I'm a little lost with MUI DateCalendar and need some guidance. I read the documentation and tinkered a lot, but I still don't know how to implement this. Any help would be greatly appreciated, thank you!
Current calendar code:
export default function CalendarComp() { const [day, setDay] = useState(dayjs()); function handleClick(e) { setDay(e); } return ( <Box sx={{ height: 340, width: 340, backgroundColor: "secondary.main", }} > <LocalizationProvider dateAdapter={AdapterDayjs}> <DateCalendar value={day} onChange={handleClick} disableHighlightToday={true} slotProps={{ day: { selectedDay: day, }, }} /> </LocalizationProvider> </Box> ); }
P粉1976397532023-09-16 11:26:23
I'm not sure, but I hope this helps.
You can use the day
attribute in slotProps
.
For example:
<DateCalendar value={day} onChange={handleClick} disableHighlightToday={true} slotProps={{ day: ({ day: selectedDay }) => { if ((selectedDay.date() - day.date()) % 5 === 0) { return { style: { width: 36, height: 36, borderRadius: "50%", border: `2px solid red` } }; } return {}; } }} />
You can view the entire example here: codesandbox. io