Dots Styling Done

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

@@ -270,7 +270,7 @@ const DaysList = ({
       for (var i = 0; i < events.length; i++) {
         if (sDay == events[i].day) {
 
-           return(events[i].description);
+          return (events[i].description);
 
         }
       }
@@ -306,7 +306,7 @@ const DaysList = ({
         data-is-default-selectable={shouldEnableKeyboardNavigation}
       >
         {!isStandard ? '' : getLanguageDigits(day)}
-        {specialDay(day) == day ?  '.' : null}
+        {specialDay(day) == day ? <span>.</span> : ' '}
       </div>
     );
   };
@@ -373,8 +373,8 @@ const DaysList = ({
 };
 
 DaysList.defaultProps = {
-  onChange: () => {},
-  onDisabledDayError: () => {},
+  onChange: () => { },
+  onDisabledDayError: () => { },
   disabledDays: [],
   calendarTodayClassName: '',
   calendarSelectedDayClassName: '',

src/components/Calendar/index.css

@@ -1,3 +1,7 @@
+.Calendar *{
+  font-family: 'iranSans';
+}
+
 .DatePicker {
     position: relative;
     display: inline-block;
@@ -537,7 +541,6 @@
   }
   
   .Calendar__day {
-    display: block;
     width: calc(100% / 7 - 6px);
     text-align: center;
     padding: calc(0.25em - 1px);
@@ -548,12 +551,19 @@
     margin:3px;
     color: rgba(0, 0, 0, 0.8);
     display: flex;
-    justify-content: center;
     align-items: center;
+    
     cursor: pointer;
+    vertical-align: middle;
     background-color: #F3F3F3;
     color:#06BACE;
    
+  }
+  .Calendar__day span{
+    padding: -10px;
+    margin-top: -30px;
+    font-size: 28px;
+
   }
   
   .Calendar__day:focus {
@@ -691,6 +701,17 @@
     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/Calendar/index.js

@@ -16,64 +16,12 @@ const SimpleCalendar = () =>{
              value={selectedDay}
              onChange={setSelectedDay}
              shouldHighlightWeekends
-             renderFooter={() => <center><button onClick={() => setSelectedDay(utils('fa').getToday())}>برو به امروز</button></center>}
-            //  customDaysClassName={specialDays}
-             locale="fa" // add this
+             renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
+             locale="fa" 
             /> 
         </div>
     );
 };
 
-// const specialDays = [
-//     {
-//         year: 1400,
-//         month: 10,
-//         day: 23,
-//         className: 'specialDay',
-//         events:[
-//             {
-//                 id:1,
-//                 title:'دی به دین روز، چهارمین جشن دیگان',
-//                 dotColor: '#eeffds1'
-//             },
-//             {
-//                 id:2,
-//                 title:'مصاحبه کاری',
-//                 dotColor: 'red'
-//             },
-//             {
-//                 id:3,
-//                 title:'اجاره خانه',
-//                 dotColor: 'blue'
-//             }
-//         ]
-//     },
-//     {
-//         year: 1400,
-//         month: 10,
-//         day: 16,
-//         className: 'specialDay holiday'
-//     },
-//     {
-//         year: 1400,
-//         month: 10,
-//         day: 30,
-//         className: 'specialDay'
-//     },
-//     {
-//         year: 1400,
-//         month: 10,
-//         day: 4,
-//         className: 'specialDay'
-//     },
-//     {
-//         year: 1400,
-//         month: 10,
-//         day: 13,
-//         className: 'specialDay'
-//     },
-
-// ];
-
 
 export default SimpleCalendar;