update src/components/Datepicker/Calender/index.js, src/components/Datepicker/CalenderList/index.js and src/index.scss

src/components/Datepicker/Calender/index.js

@@ -18,12 +18,23 @@ const Calender = ({ minDate, maxDate }) => {
   const [date, setDate] = useState(null);
 
   return (
-    <div className="calender-list">
+    <div className="calender-list w-[1050px] h-[1000px]">
       <Calendar
+        numberOfMonths={12}
+        // currentDate={
+        //   new Date({
+        //     calendar: persian,
+        //     year: 1399,
+        //     month: 12,
+        //     day: 1,
+        //   })
+        // }
+        disableMonthPicker
+        disableYearPicker
         onChange={setDate}
-        value={minDate}
+        // value={minDate}
-        minDate={minDate}
+        // minDate={minDate}
-        maxDate={maxDate}
+        // maxDate={maxDate}
         weekDays={weekDays}
         calendar={persian}
         locale={persian_fa}

src/components/Datepicker/CalenderList/index.js

@@ -34,9 +34,9 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
         />
       </div>
       {/* ? calender list */}
-      <div className="flex flex-wrap justify-around mx-auto gap-x-5">
+      <div className="flex">
         <Calender minDate="1401/01/01" maxDate="1401/01/31" />
-        <Calender minDate="1401/02/01" maxDate="1401/02/31" />
+        {/* <Calender minDate="1401/02/01" maxDate="1401/02/31" />
         <Calender minDate="1401/03/01" maxDate="1401/03/31" />
         <Calender minDate="1401/04/01" maxDate="1401/04/31" />
         <Calender minDate="1401/05/01" maxDate="1401/05/31" />
@@ -46,7 +46,7 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
         <Calender minDate="1401/09/01" maxDate="1401/09/30" />
         <Calender minDate="1401/10/01" maxDate="1401/10/30" />
         <Calender minDate="1401/11/01" maxDate="1401/11/30" />
-        <Calender minDate="1401/12/01" maxDate="1401/12/30" />
+        <Calender minDate="1401/12/01" maxDate="1401/12/30" /> */}
       </div>
     </div>
   );

src/index.scss

@@ -2875,25 +2875,49 @@ $radkoColor2: #3197ee;
   font-size: 11px !important;
 }
 
-.rmdp-day.rmdp-selected span:not(.highlight) {
+.calender-list .rmdp-day.rmdp-selected span:not(.highlight) {
   background-color: #ddd;
   box-shadow: none;
   color: #fff;
   border-radius: 8px !important;
 }
 
-.rmdp-day.rmdp-selected .highlight-red {
+.calender-list .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+  background: #f7f7f7 !important;
+  border: none;
+  color: #3e3e3e !important;
+}
+
+.calender-list .rmdp-day.rmdp-selected .highlight-red {
   border-radius: 8px !important;
   background: #4878e6 !important;
   box-shadow: none !important;
   color: #fff;
 }
 
-.rmdp-day.rmdp-selected .highlight-red:hover {
+.calender-list .rmdp-day.rmdp-selected .highlight-red:hover {
   background: #f7f7f7 !important;
   border: none;
 }
 
-.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) .highlight-red:hover {
+.calender-list
+  .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden)
+  .highlight-red:hover {
   color: #3e3e3e !important;
 }
+
+.calender-list {
+  overflow-x: hidden;
+}
+
+.calender-list .rmdp-day-picker {
+  flex-wrap: wrap !important;
+}
+
+.calender-list .rmdp-wrapper {
+  width: 100% !important;
+}
+
+.calender-list .rmdp-day-picker > div {
+  margin-top: 50px;
+}