我對 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