reza added utils

src/components/Calendar/index.css

@@ -407,7 +407,7 @@
     font-size: 1.4em;
     min-width: 85%;
     padding: 0.2em 0.5em;
-    border-radius: 8.5px;
+    border-radius: 5px;
   }
   
   .Calendar__monthSelector.-open,
@@ -453,7 +453,7 @@
   
   .Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText,
   .Calendar__yearSelectorItem.-active .Calendar__yearSelectorText {
-    background-color: var(--cl-color-primary);
+    background-color: #006C94;
     color: #fff;
   }
   

src/components/Calendar/index.js

@@ -6,6 +6,10 @@ import './index.css';
 
 const SimpleCalendar = () =>{
     const [selectedDay, setSelectedDay] = useState(null);
+
+    const gotoToday = () =>{
+        setSelectedDay(utils('fa').getToday());
+    }
     return(
         <div className="flex items-center justify-center w-full my-2">
             
@@ -13,6 +17,7 @@ const SimpleCalendar = () =>{
              value={selectedDay}
              onChange={setSelectedDay}
              shouldHighlightWeekends
+             renderFooter={() => <center><button onClick={gotoToday}>برو به امروز</button></center>}
              locale="fa" // add this
             /> 
         </div>

src/components/RangeDatePicker/index.js

@@ -10,6 +10,7 @@ const RangeDatePicker = () => {
     return (
       <DatePicker
         value={selectedDayRange}
+        calendarClassName="range-date-picker"
         onChange={setSelectedDayRange}
         inputPlaceholder="یک بازه زمانی انتخاب کنید"
         shouldHighlightWeekends

src/components/SimpleDatePicker/index.js

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
-import DatePicker from "react-modern-calendar-datepicker";
+import DatePicker, {utils} from "react-modern-calendar-datepicker";
 import '../Calendar/index.css';
-const SimpleDatePicker = () =>{
+const SimpleDatePicker = (props) =>{
     const [selectedDay, setSelectedDay] = useState(null);
+    const gotoToday = () =>{
+        setSelectedDay(utils('fa').getToday());
+    }
+
     return(
         <div className='flex items-center justify-center w-full my-2'>
             <DatePicker
@@ -10,6 +14,7 @@ const SimpleDatePicker = () =>{
                 onChange={setSelectedDay}
                 inputPlaceholder="انتخاب تاریخ"
                 shouldHighlightWeekends
+                renderFooter={() => <button onClick={gotoToday}>برو به امروز</button>}
                 locale='fa'
             />
         </div>