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

master
mahdi 2 years ago
parent 2122b4a932
commit 4aa87f43a4
  1. 19
      src/components/Datepicker/Calender/index.js
  2. 6
      src/components/Datepicker/CalenderList/index.js
  3. 32
      src/index.scss

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

@ -34,9 +34,9 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
/> />
</div> </div>
{/* ? calender list */} {/* ? 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/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/03/01" maxDate="1401/03/31" />
<Calender minDate="1401/04/01" maxDate="1401/04/31" /> <Calender minDate="1401/04/01" maxDate="1401/04/31" />
<Calender minDate="1401/05/01" maxDate="1401/05/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/09/01" maxDate="1401/09/30" />
<Calender minDate="1401/10/01" maxDate="1401/10/30" /> <Calender minDate="1401/10/01" maxDate="1401/10/30" />
<Calender minDate="1401/11/01" maxDate="1401/11/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>
</div> </div>
); );

@ -2875,25 +2875,49 @@ $radkoColor2: #3197ee;
font-size: 11px !important; font-size: 11px !important;
} }
.rmdp-day.rmdp-selected span:not(.highlight) { .calender-list .rmdp-day.rmdp-selected span:not(.highlight) {
background-color: #ddd; background-color: #ddd;
box-shadow: none; box-shadow: none;
color: #fff; color: #fff;
border-radius: 8px !important; 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; border-radius: 8px !important;
background: #4878e6 !important; background: #4878e6 !important;
box-shadow: none !important; box-shadow: none !important;
color: #fff; color: #fff;
} }
.rmdp-day.rmdp-selected .highlight-red:hover { .calender-list .rmdp-day.rmdp-selected .highlight-red:hover {
background: #f7f7f7 !important; background: #f7f7f7 !important;
border: none; 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; 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;
}

Loading…
Cancel
Save