добавлена легенда при записи, дописаны стили календаря

src/components/mainPart/calendar/calendar.css

@@ -122,7 +122,8 @@
   }
   .react-calendar__tile:enabled:hover,
   .react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
+    background-color: #443A5D;
+    /* border-radius: 8px; */
   }
   .react-calendar__tile--now {
     /* background: #ffff76; */

src/components/mainPart/legend.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+type TProps = {
+    active: boolean
+}
+
+export const Legend:React.FC<TProps> = React.memo((props) => {
+    return <div className="legend-container">
+        <span className={`legend-circle ${props.active ? 'active' : 'disable'}`}></span>
+        <span className={`legend-text ${props.active ? 'active' : 'disable'}`}>
+            {
+                props.active            
+                ? 'Запись есть'
+                : 'Записи нет'
+            }
+        </span>
+    </div>
+})

src/components/mainPart/mainPart.css

@@ -219,4 +219,44 @@
     flex-direction: column;
     padding: 80px 0;
     margin-bottom: auto;
+}
+
+.legend-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.legend-circle {
+    width: 12px;
+    height: 12px;
+    border-radius: 50px;
+}
+
+.legend-circle.active {
+    background-color: #CE56C2;
+}
+
+.legend-circle.disable {
+    background-color: #B196AF;
+}
+
+.legend-text {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+}
+
+.legend-text.active {
+    color: #CE56C2;
+}
+
+.legend-text.disabled {
+    color: #B196AF;
+}
+
+.plan-content-legend {
+    margin-top: 24px;
+    display: flex;
+    gap: 32px;
 }

src/components/mainPart/mainPart.tsx

@@ -65,6 +65,7 @@ export const MainPart: React.FC = React.memo(() => {
             <PlanContentContainer 
                 title="Выбор даты"
                 content={<CalendarComponent />}
+                isLegend={true}
             />
         );
         setCurrentContent(<></>);
@@ -74,6 +75,14 @@ export const MainPart: React.FC = React.memo(() => {
 
     }
 
+    function onSelectDay() {
+
+    }
+
+    function onSelectTime() {
+        
+    }
+
     function enableBackground() {
         setShowBackground(true);
     }

src/components/mainPart/planContentContainer.tsx

@@ -1,13 +1,23 @@
 import React from "react";
+import { Legend } from "./legend";
 
 type TProps = {
     title: string
     content: JSX.Element
+    isLegend: boolean
 }
 
 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}
+        {
+            props.isLegend 
+            ? <div className="plan-content-legend">
+                <Legend active={true} />
+                <Legend active={false} />
+            </div>
+            : null
+        }
     </div>
 })