calendar Events Almost Done

Has Some Errors

src/components/Calendar/CalendarComponents/Calendar.js

@@ -215,61 +215,7 @@ Calendar.defaultProps = {
   renderFooter: () => null,
   renderEvents : () => null,
   customDaysClassName: [],
-  events: [
-    {
-      id: 2,
-      description: "تست 2",
-      type: "global",
-      isHoliday: false,
-      date: "2022-01-04T00:00:00.000Z",
-      year: 2022,
-      month: 1,
-      day: 2
-      },
-      {
-      id: 4,
-      description: "تست 4",
-      type: "global",
-      isHoliday: true,
-      date: "2022-01-12T00:00:00.000Z",
-      year: 2022,
-      month: 1,
-      day: 3
-      },
-      {
-      id: 1,
-      description: "تست کاربر 1",
-      type: "userDefined",
-      userId: "5",
-      date: "2022-01-12T00:00:00.000Z",
-      categoryId: 1,
-      year: 2022,
-      month: 1,
-      day: 3
-      },
-      {
-      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
-      }
-  ],
+  events: [],
 };
 
 

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

@@ -275,6 +275,7 @@ const DaysList = ({
         }
       }
     }
+    
     return (
       <div
         style={{

src/components/Calendar/index.js

@@ -1,27 +1,83 @@
 import React, { useState } from "react";
 import './index.css';
-import  Calendar  from "./CalendarComponents/Calendar";
+import Calendar from "./CalendarComponents/Calendar";
 import { utils } from "./CalendarComponents";
 
 import './index.css';
 
-const SimpleCalendar = () =>{
+const SimpleCalendar = () => {
     const [selectedDay, setSelectedDay] = useState(null);
 
-  
-    return(
+
+    return (
         <div className="flex items-center justify-center w-full my-2">
-            
-            <Calendar 
-             value={selectedDay}
-             onChange={setSelectedDay}
-             shouldHighlightWeekends
-             renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
-             locale="fa" 
-            /> 
+
+            <Calendar
+                value={selectedDay}
+                onChange={setSelectedDay}
+                shouldHighlightWeekends
+                renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
+                locale="fa"
+                events={eventsList}
+            />
         </div>
     );
 };
 
+const eventsList = [
+    {
+        id: 2,
+        description: "تست 2",
+        type: "global",
+        isHoliday: true,
+        date: "2022-01-04T00:00:00.000Z",
+        year: 2022,
+        month: 1,
+        day: 2
+    },
+    {
+        id: 4,
+        description: "تست 4",
+        type: "global",
+        isHoliday: true,
+        date: "2022-01-12T00:00:00.000Z",
+        year: 2022,
+        month: 1,
+        day: 1
+    },
+    {
+        id: 1,
+        description: "تست کاربر 1",
+        type: "userDefined",
+        userId: "5",
+        date: "2022-01-12T00:00:00.000Z",
+        categoryId: 1,
+        year: 2022,
+        month: 1,
+        day: 3
+    },
+    {
+        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 SimpleCalendar;

src/components/RangeDatePicker/index.css

@@ -1,3 +1,7 @@
+.Calendar *{
+  font-family: 'iranSans';
+}
+
 .DatePicker {
     position: relative;
     display: inline-block;
@@ -49,16 +53,16 @@
     bottom: calc(100% + 20px);
   }
   
-  .range-date-picker,
-  .range-date-picker * {
+  .Calendar,
+  .Calendar * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     direction: ltr;
   }
   
-  .range-date-picker,
-  .range-date-picker.-rtl * {
+  .Calendar,
+  .Calendar.-rtl * {
     direction: rtl;
   }
   
@@ -77,7 +81,7 @@
     
   }
   
-  .range-date-picker {
+  .Calendar {
     --cl-color-black: #444444;
     --cl-color-disabled: #d4d4d4;
     --cl-color-error: #ff2929;
@@ -98,7 +102,7 @@
     min-height: 38.7em;
   }
   
-  .DatePicker .range-date-picker,
+  .DatePicker .Calendar,
   .DatePicker__calendarArrow {
     transform: translateY(2.5em);
     opacity: 0;
@@ -106,15 +110,15 @@
     
   }
   
-  .DatePicker__calendarContainer.-top .range-date-picker {
+  .DatePicker__calendarContainer.-top .Calendar {
     transform: translateY(-2.5em);
   }
   
-  .range-date-picker.-noFocusOutline *:focus {
+  .Calendar.-noFocusOutline *:focus {
     outline: none !important;
   }
   
-  .range-date-picker > :not(.Calendar__footer) button {
+  .Calendar > :not(.Calendar__footer) button {
     font-family: inherit;
     background: transparent;
     cursor: pointer;
@@ -156,7 +160,7 @@
   .Calendar__monthArrowWrapper.-left {
     transform: rotate(180deg);
   }
-  .range-date-picker.-rtl .Calendar__monthArrowWrapper.-left {
+  .Calendar.-rtl .Calendar__monthArrowWrapper.-left {
     transform: rotate(-180deg);
   }
   
@@ -164,7 +168,7 @@
     transform: rotate(-0deg);
     
   }
-  .range-date-picker.-rtl .Calendar__monthArrowWrapper.-right {
+  .Calendar.-rtl .Calendar__monthArrowWrapper.-right {
     transform: rotate(0deg);
   }
   
@@ -214,7 +218,7 @@
     transform: translateX(50%);
   }
   
-  .range-date-picker.-rtl .Calendar__monthYear.-hiddenNext {
+  .Calendar.-rtl .Calendar__monthYear.-hiddenNext {
     transform: translateX(-150%);
   }
   
@@ -223,7 +227,7 @@
     transform: translateX(-150%);
   }
   
-  .range-date-picker.-rtl .Calendar__monthYear.-hiddenPrevious {
+  .Calendar.-rtl .Calendar__monthYear.-hiddenPrevious {
     transform: translateX(50%);
   }
   
@@ -265,7 +269,7 @@
   }
   
   .Calendar__monthYear.-shown > *:hover,
-  .range-date-picker:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus,
+  .Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus,
   .Calendar__monthYear > *.-activeBackground {
     background: #f5f5f5;
   }
@@ -273,14 +277,14 @@
   .Calendar__monthText:hover {
     transform: translateX(-0.2em) scale(0.95);
   }
-  .range-date-picker.-rtl .Calendar__monthText:hover {
+  .Calendar.-rtl .Calendar__monthText:hover {
     transform: translateX(0.2em) scale(0.95);
   }
   
   .Calendar__yearText:hover {
     transform: translateX(0.2em) scale(0.95);
   }
-  .range-date-picker.-rtl .Calendar__yearText:hover {
+  .Calendar.-rtl .Calendar__yearText:hover {
     transform: translateX(-0.2em) scale(0.95);
   }
   
@@ -289,7 +293,7 @@
     opacity: 0;
   }
   
-  .range-date-picker.-rtl .Calendar__monthYear .Calendar__yearText.-hidden {
+  .Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden {
     transform: translateX(-50%);
   }
   
@@ -298,7 +302,7 @@
     opacity: 0;
   }
   
-  .range-date-picker.-rtl .Calendar__monthYear .Calendar__monthText.-hidden {
+  .Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden {
     transform: translateX(50%);
   }
   
@@ -509,7 +513,7 @@
     transform: translateX(-90%);
   }
   
-  .range-date-picker.-rtl .Calendar__section.-hiddenPrevious {
+  .Calendar.-rtl .Calendar__section.-hiddenPrevious {
     transform: translateX(90%);
   }
   
@@ -518,7 +522,7 @@
     transform: translateX(90%);
   }
   
-  .range-date-picker.-rtl .Calendar__section.-hiddenNext {
+  .Calendar.-rtl .Calendar__section.-hiddenNext {
     transform: translateX(-90%);
   }
   
@@ -536,22 +540,30 @@
     width: 100%;
   }
   
-  .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day {
-    display: block;
-    width: calc(100% / 7);
+  .Calendar__day {
+    width: calc(100% / 7 - 6px);
     text-align: center;
     padding: calc(0.25em - 1px);
     font-size: 1.6em;
+    border-radius: 7px;
     transition: 0.2s;
     border: 1px solid transparent;
+    margin:3px;
     color: rgba(0, 0, 0, 0.8);
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    border-radius: 7px;
     
+    cursor: pointer;
+    vertical-align: middle;
+    background-color: #F3F3F3;
+    color:#06BACE;
    
+  }
+  .Calendar__day span{
+    padding: -10px;
+    margin-top: -30px;
+    font-size: 28px;
+
   }
   
   .Calendar__day:focus {
@@ -569,9 +581,9 @@
     height: 2.45em;
   }
   
-  .range-date-picker .Calendar__section .Calendar__weekRow .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover {
+  .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover {
     
-   
+    background-color: #DAFBFF;
     color: #06BACE;
     border:1px solid #06BACE;
   }
@@ -664,14 +676,42 @@
     position: relative;
     z-index: 1;
   }
-
-  .range-date-picker .specialDay span{
-    border-bottom: 4px dotted #444444;
+  .Calendar__footer .footer__Events{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-family: 'IranSans';
+    padding: 3px;
   }
-  .range-date-picker .holiday span{
+
+  .Calendar .holiday span{
     color:#ff2929;
   }
-  
+  .Calendar .DayNumDiv{
+    display: flex;
+    flex-direction: column;
+  }
+  .Calendar .DayNumDiv span{
+    margin: 0;
+    padding: 0;
+    margin-bottom: -5px;
+  }
+  .Calendar .DayNumDiv .eventDots{
+    margin-top: -10px;
+    font-size: 20px;
+  }
+  .GoToTodayButton{
+    background-color: #006C94;
+    padding: 7.5px;
+    font-size: 12px;
+    color:white;
+    font-family: 'iranSans';
+    border-radius: 50%;
+    float: left;
+    margin: 15px;
+
+  }
   @keyframes fadeCalendar {
     from {
       opacity: 0;

src/components/RangeDatePicker/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import "./index.css";
-import DatePicker from "react-modern-calendar-datepicker";
+import DatePicker from "../Calendar/CalendarComponents";
 
 const RangeDatePicker = () => {
     const [selectedDayRange, setSelectedDayRange] = useState({