Various Changes On Calendar Component

Separating components from each other (it was showing them all as date pickers)
Adding The Data Model Mr.Gorji Made and Using it
Adding The Description of Event Showing in footer By Clicking the Day

Next Step: Making Changes On The Dots in Days Lists
                  Getting And Comparing Month and year from Data and into The
                  Component

src/components/Calendar/CalendarComponents/Calendar.js

@@ -14,7 +14,7 @@ import { useLocaleUtils, useLocaleLanguage } from './shared/hooks';
 
 import { Header, MonthSelector, YearSelector, DaysList } from './components';
 
-export const Calendar = ({
+ const Calendar = ({
   value,
   onChange,
   onDisabledDayError,
@@ -37,6 +37,7 @@ export const Calendar = ({
   renderFooter,
   customDaysClassName,
   events,
+  renderEvents,
 }) => {
   const calendarElement = useRef(null);
   const [mainState, setMainState] = useState({
@@ -45,7 +46,7 @@ export const Calendar = ({
     isMonthSelectorOpen: false,
     isYearSelectorOpen: false,
   });
-
+  const [eventInFooter, setEventInFooter] = useState(null);
   useEffect(() => {
     const handleKeyUp = ({ key }) => {
       /* istanbul ignore else */
@@ -188,11 +189,16 @@ export const Calendar = ({
         shouldHighlightWeekends={shouldHighlightWeekends}
         customDaysClassName={customDaysClassName}
         events={events}
+        renderFooter={renderFooter}
+        renderEvents={renderEvents}
         isQuickSelectorOpen={
           mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
         }
+        showEvent={event => setEventInFooter(event)}
       />
-      <div className="Calendar__footer">{renderFooter()}</div>
+      <div className="Calendar__footer">
+        <p className='footer__Events'>{eventInFooter}</p>
+        {renderFooter()}</div>
     </div>
   );
 };
@@ -207,36 +213,64 @@ Calendar.defaultProps = {
   locale: 'en',
   value: null,
   renderFooter: () => null,
+  renderEvents : () => null,
   customDaysClassName: [],
   events: [
     {
-      id: 1,
-      day: 15,
-      occasions: [
-        {
-          title: 'دی به دین روز، چهارمین جشن دیگان',
-          dotColor: '#eeffds1',
+      id: 2,
+      description: "تست 2",
+      type: "global",
+      isHoliday: false,
+      date: "2022-01-04T00:00:00.000Z",
+      year: 2022,
+      month: 1,
+      day: 2
       },
       {
-          title: 'lorem',
-          dotColor: 'blue'
-        }
-      ]
-
+      id: 4,
+      description: "تست 4",
+      type: "global",
+      isHoliday: true,
+      date: "2022-01-12T00:00:00.000Z",
+      year: 2022,
+      month: 1,
+      day: 3
       },
       {
-      id: 2,
-      day: 22,
-      title: 'مصاحبه کاری',
-      dotColor: 'red',
+      id: 1,
+      description: "تست کاربر 1",
+      type: "userDefined",
+      userId: "5",
+      date: "2022-01-12T00:00:00.000Z",
+      categoryId: 1,
+      year: 2022,
+      month: 1,
+      day: 3
       },
       {
-      id: 3,
-      title: 'اجاره خانه',
-      day: 21,
-      dotColor: 'blue',
+      id: 4,
+      description: "تست کاربر 4",
+      type: "userDefined",
+      userId: "5",
+      date: "2022-01-08T00:00:00.000Z",
+      categoryId: 3,
+      year: 2022,
+      month: 1,
+      day: 6
       },
+      {
+      id: 5,
+      description: "تست کاربر 5",
+      type: "userDefined",
+      userId: "5",
+      date: "2022-01-12T00:00:00.000Z",
+      categoryId: 1,
+      year: 2022,
+      month: 1,
+      day: 3
+      }
   ],
 };
 
 
+export default Calendar;

src/components/Calendar/CalendarComponents/DatePicker.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
 
-import { Calendar } from './Calendar';
+import  Calendar  from './Calendar';
 import DatePickerInput from './DatePickerInput';
 import { getValueType } from './shared/generalUtils';
 import { TYPE_SINGLE_DATE, TYPE_MUTLI_DATE, TYPE_RANGE } from './shared/constants';

src/components/Calendar/CalendarComponents/components/DaysList.js

@@ -39,6 +39,7 @@ const DaysList = ({
   isQuickSelectorOpen,
   customDaysClassName,
   events,
+  showEvent,
 }) => {
   const calendarSectionWrapper = useRef(null);
   const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale);
@@ -254,10 +255,6 @@ const DaysList = ({
       isStandard,
     });
     const specialDay = (sDay) => {
-      // let specialDayArray = [];
-      // console.log(sDay);
-
-      // specialDayArray.push(events[i].day);
       var eventDate;
       for (var i = 0; i < events.length; i++) {
         if (sDay == events[i].day) {
@@ -266,13 +263,18 @@ const DaysList = ({
         
         }
       }
-      //  sDay = events[0].day;
-      // return sDay;
-      // console.log(sDay);
 
-      // console.log(specialDayArray[0])
     };
+    const showEventDescription = (sDay) => {
+      var eventDate;
+      for (var i = 0; i < events.length; i++) {
+        if (sDay == events[i].day) {
           
+           return(events[i].description);
+        
+        }
+      }
+    }
     return (
       <div
         style={{
@@ -286,7 +288,7 @@ const DaysList = ({
         onClick={() => {
           handleDayPress({ ...dayItem, isDisabled });
           console.log(specialDay(day));
-          console.log(day)
+          showEvent(showEventDescription(day))
         }}
         onKeyDown={({ key }) => {
           /* istanbul ignore else */

src/components/Calendar/CalendarComponents/index.js

@@ -1,3 +1,3 @@
-export { default } from './DatePicker';
+export { default} from './DatePicker';
 export * from './Calendar';
 export { default as utils } from './shared/localeUtils';

src/components/Calendar/index.css

@@ -666,6 +666,14 @@
     position: relative;
     z-index: 1;
   }
+  .Calendar__footer .footer__Events{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-family: 'IranSans';
+    padding: 3px;
+  }
 
   .Calendar .holiday span{
     color:#ff2929;

src/components/Calendar/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import './index.css';
-import  Calendar  from "./CalendarComponents";
+import  Calendar  from "./CalendarComponents/Calendar";
 import { utils } from "./CalendarComponents";
 
 import './index.css';
@@ -18,7 +18,6 @@ const SimpleCalendar = () =>{
              shouldHighlightWeekends
              renderFooter={() => <center><button onClick={() => setSelectedDay(utils('fa').getToday())}>برو به امروز</button></center>}
             //  customDaysClassName={specialDays}
-             events={[]}
              locale="fa" // add this
             /> 
         </div>

src/components/SimpleDatePicker/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import DatePicker, {utils} from "react-modern-calendar-datepicker";
+import  DatePicker  from "../Calendar/CalendarComponents";
+import { utils } from "../Calendar/CalendarComponents";
 import '../Calendar/index.css';
 const SimpleDatePicker = (props) =>{
     const [selectedDay, setSelectedDay] = useState(null);