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);
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}
minDate={minDate}
maxDate={maxDate}
// value={minDate}
// minDate={minDate}
// maxDate={maxDate}
weekDays={weekDays}
calendar={persian}
locale={persian_fa}

@ -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>
);

@ -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;
}

Loading…
Cancel
Save