我对 MUI DateCalendar 有点不知所措,需要一些指导。我阅读了文档并进行了大量的修改,但我仍然不知道如何实现这一点。任何帮助将不胜感激,谢谢!
当前日历代码:
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
我不确定,但希望这对您有帮助。
您可以在 slotProps
中使用 day
属性。
例如:
<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 {}; } }} />
您可以在此处查看整个示例:codesandbox。 io