diff --git a/package-lock.json b/package-lock.json
index 86620b5..8a1ec3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,16 +15,17 @@
         "@types/jest": "^27.5.2",
         "@types/node": "^16.11.45",
         "@types/react": "^18.0.15",
+        "@types/react-calendar": "^3.5.1",
         "@types/react-dom": "^18.0.6",
         "@types/react-transition-group": "^4.4.5",
         "react": "^18.2.0",
+        "react-calendar": "^3.7.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "react-transition-group": "^4.4.2",
         "typescript": "^4.7.4",
         "web-vitals": "^2.1.4"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
@@ -3781,6 +3782,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-calendar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.1.tgz",
+      "integrity": "sha512-d71cKkkSN8CA4PWx87jQOrEyElc2uY3hwpXmceroaPMrMaZ9fPlLFPLP0OCaay5nlJ6ErNmHVb75lE1huharPQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@@ -4224,6 +4233,14 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
+      "integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -8105,6 +8122,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-user-locale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz",
+      "integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==",
+      "dependencies": {
+        "lodash.once": "^4.1.1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -11291,6 +11316,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -11401,6 +11431,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/merge-class-names": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
+      "integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/merge-class-names?sponsor=1"
+      }
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -13648,6 +13686,24 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-calendar": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.7.0.tgz",
+      "integrity": "sha512-zkK95zWLWLC6w3O7p3SHx/FJXEyyD2UMd4jr3CrKD+G73N+G5vEwrXxYQCNivIPoFNBjqoyYYGlkHA+TBDPLCw==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.2",
+        "get-user-locale": "^1.2.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -19195,6 +19251,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-calendar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.5.1.tgz",
+      "integrity": "sha512-d71cKkkSN8CA4PWx87jQOrEyElc2uY3hwpXmceroaPMrMaZ9fPlLFPLP0OCaay5nlJ6ErNmHVb75lE1huharPQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@@ -19535,6 +19599,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@wojtekmaj/date-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
+      "integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -22352,6 +22421,14 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "get-user-locale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz",
+      "integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==",
+      "requires": {
+        "lodash.once": "^4.1.1"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -24654,6 +24731,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -24742,6 +24824,11 @@
         "fs-monkey": "^1.0.3"
       }
     },
+    "merge-class-names": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
+      "integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26168,6 +26255,17 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-calendar": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.7.0.tgz",
+      "integrity": "sha512-zkK95zWLWLC6w3O7p3SHx/FJXEyyD2UMd4jr3CrKD+G73N+G5vEwrXxYQCNivIPoFNBjqoyYYGlkHA+TBDPLCw==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.2",
+        "get-user-locale": "^1.2.0",
+        "merge-class-names": "^1.1.1",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/package.json b/package.json
index 8d5389c..1150eb9 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.45",
     "@types/react": "^18.0.15",
+    "@types/react-calendar": "^3.5.1",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
     "react": "^18.2.0",
+    "react-calendar": "^3.7.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.2",
diff --git a/src/components/mainPart/calendar/calendar.css b/src/components/mainPart/calendar/calendar.css
new file mode 100644
index 0000000..abe2bd3
--- /dev/null
+++ b/src/components/mainPart/calendar/calendar.css
@@ -0,0 +1,192 @@
+.react-calendar {
+    width: 350px;
+    width: 540px;
+    width: 100%;
+    /* max-width: 100%; */
+    /* border: 1px solid #a0a096; */
+    border: none;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.125em;
+  }
+  .react-calendar--doubleView {
+    width: 700px;
+  }
+  .react-calendar--doubleView .react-calendar__viewContainer {
+    display: flex;
+    margin: -0.5em;
+  }
+  .react-calendar--doubleView .react-calendar__viewContainer > * {
+    width: 50%;
+    margin: 0.5em;
+  }
+  .react-calendar,
+  .react-calendar *,
+  .react-calendar *:before,
+  .react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .react-calendar button {
+    margin: 0;
+    border: 0;
+    outline: none;    
+  }
+  .react-calendar button:enabled:hover {
+    cursor: pointer;
+  }
+  .react-calendar__navigation {
+    display: flex;
+    height: 44px;
+    margin-bottom: 1em;
+  }
+  .react-calendar__navigation button {
+    min-width: 44px;
+    background: none;
+    color: transparent;
+    /* background: url('navigateRightIcon.svg') 50% 50% no-repeat; */
+  }
+  .react-calendar__navigation button:nth-child(1) {
+    background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;    
+  }
+  .react-calendar__navigation button:nth-child(3) {
+    background: url('navigateCalendarButtonIcon.svg') 50% 50% no-repeat;
+    transform: rotate(180deg);
+  }
+  .react-calendar__navigation button:disabled {
+    background-color: #f0f0f0;
+    
+  }
+  .react-calendar__navigation button:disabled:nth-child(1) {
+    background-color: transparent;
+    opacity: .7;
+  }
+  .react-calendar__navigation button:disabled:nth-child(2) {
+    background-color: transparent;
+  }
+  .react-calendar__navigation button:enabled:hover,
+  .react-calendar__navigation button:enabled:focus {
+    /* background-color: #e6e6e6; */
+    opacity: .6;
+  }
+  .react-calendar__month-view__weekdays {
+    text-align: center;
+    /* text-transform: uppercase; */
+    font-weight: bold;
+    font-size: 0.75em;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 130%;
+  }
+  .react-calendar__month-view__weekdays__weekday {
+    padding: 0.5em;
+  }
+  .react-calendar__month-view__weekNumbers .react-calendar__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75em;
+    font-weight: bold;
+  }
+  .react-calendar__month-view__days__day--weekend {
+    /* color: #d10000; */
+  }
+  .react-calendar__month-view__days__day--neighboringMonth {
+    color: #757575;
+    color: transparent;
+    pointer-events: none;
+    text-indent: 200%;
+  }
+  .react-calendar__year-view .react-calendar__tile,
+  .react-calendar__decade-view .react-calendar__tile,
+  .react-calendar__century-view .react-calendar__tile {
+    padding: 2em 0.5em;    
+  }
+  .react-calendar__tile {
+    max-width: 100%;
+    padding: 10px 6.6667px;
+    background: none;
+    text-align: center;
+    line-height: 16px;
+
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 130%;
+
+    color: #CE56C2;
+  }
+  .react-calendar__tile:disabled {
+    /* background-color: #f0f0f0; */
+    color: #B196AF;
+  }
+  .react-calendar__tile:enabled:hover,
+  .react-calendar__tile:enabled:focus {
+    background-color: #e6e6e6;
+  }
+  .react-calendar__tile--now {
+    /* background: #ffff76; */
+  }
+  .react-calendar__tile--now:enabled:hover,
+  .react-calendar__tile--now:enabled:focus {
+    /* background: #ffffa9; */
+  }
+  .react-calendar__tile--hasActive {
+    background: #76baff;
+  }
+  .react-calendar__tile--hasActive:enabled:hover,
+  .react-calendar__tile--hasActive:enabled:focus {
+    background: #a9d4ff;
+  }
+  .react-calendar__tile--active {
+    background: #006edc;
+    color: white;
+  }
+  .react-calendar__tile--active:enabled:hover,
+  .react-calendar__tile--active:enabled:focus {
+    background: #1087ff;
+  }
+  .react-calendar--selectRange .react-calendar__tile--hover {
+    background-color: #e6e6e6;
+  }
+  
+
+abbr[title] {
+  text-decoration: none;
+}
+
+.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {  
+    color: #333333;
+    color: white;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 110%;
+}
+
+/* .react-calendar__month-view__days button:nth-child(-n+7) {
+  background-color: #006edc;
+} */
+
+.react-calendar__month-view__days button:nth-child(-n+35) {
+    background-color: #FAFAFA;
+    background: #322948;
+}
+
+.react-calendar__month-view__days button:nth-child(-n+28) {
+  background-color: transparent;
+}
+
+.react-calendar__month-view__days button:nth-child(-n+21) {
+  background-color: #FAFAFA;
+  background: #322948;
+}
+
+.react-calendar__month-view__days button:nth-child(-n+14) {
+  background-color: transparent;
+}
+
+.react-calendar__month-view__days button:nth-child(-n+7) {
+  background-color: #FAFAFA;
+  background: #322948;
+}
\ No newline at end of file
diff --git a/src/components/mainPart/calendar/calendar.tsx b/src/components/mainPart/calendar/calendar.tsx
new file mode 100644
index 0000000..15a3ad0
--- /dev/null
+++ b/src/components/mainPart/calendar/calendar.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Calendar from "react-calendar";
+import './calendar.css';
+
+export const CalendarComponent:React.FC = React.memo(() => {
+    return <Calendar 
+        showDoubleView={false}
+        next2Label={null}
+        prev2Label={null}
+        view={"month"}
+        maxDetail={"month"}
+        minDetail={"month"}
+        // tileDisabled={(a) => {
+        //         return props.disableDays.includes(a.date.getDate())
+        // }}
+        minDate={new Date()}
+        // onClickDay={(e) => onClickDay(e.getDate(), e.getMonth())}
+    />
+})
\ No newline at end of file
diff --git a/src/components/mainPart/calendar/navigateCalendarButtonIcon.svg b/src/components/mainPart/calendar/navigateCalendarButtonIcon.svg
new file mode 100644
index 0000000..4602305
--- /dev/null
+++ b/src/components/mainPart/calendar/navigateCalendarButtonIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19L8 12L15 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index 8141fc7..bf707a4 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -211,4 +211,12 @@
     opacity: 0;    
     transition: .3s;
     transform: translateY(0);
+}
+
+.main-part-plan-content {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 80px 0;
+    margin-bottom: auto;
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 99332dd..9702b5c 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -6,11 +6,15 @@ import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
 import { OrLineContainer } from "./orLineContainer";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import Calendar from "react-calendar";
+import { CalendarComponent } from "./calendar/calendar";
+import { PlanContentContainer } from "./planContentContainer";
 
 
 export const MainPart: React.FC = React.memo(() => {
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
+    const [planContent, setPlaneContent] = useState<JSX.Element>();
     const [currentContent, setCurrentContent] = useState<JSX.Element>(
         <ContentContainer 
             titleText="Удаленная демонстрация жилого комплекса"
@@ -57,6 +61,13 @@ export const MainPart: React.FC = React.memo(() => {
 
     function onClickPlaneDemo() {
         enableBackground();
+        setPlaneContent(
+            <PlanContentContainer 
+                title="Выбор даты"
+                content={<CalendarComponent />}
+            />
+        );
+        setCurrentContent(<></>);
     }
 
     function onClickConnect() {
@@ -84,7 +95,14 @@ export const MainPart: React.FC = React.memo(() => {
                     {currentContent}                
                 </div>
             </CSSTransition>            
-        </TransitionGroup>            
+        </TransitionGroup>
+        {
+            planContent ?
+            <div className="main-part-plan-content">
+                {planContent}
+            </div>
+            : null
+        }        
         <CSSTransition
             in={showBackground}
             timeout={300}
diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx
new file mode 100644
index 0000000..79859ca
--- /dev/null
+++ b/src/components/mainPart/planContentContainer.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+type TProps = {
+    title: string
+    content: JSX.Element
+}
+
+export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
+    return <div className="plan-content-container">
+        <span className="plan-content-title">{props.title}</span>
+        {props.content}
+    </div>
+})
\ No newline at end of file