Rumah > Soal Jawab > teks badan
Saya agak tersesat dengan MUI DateCalendar dan memerlukan bimbingan. Saya membaca dokumentasi dan bermain-main banyak, tetapi saya masih tidak tahu bagaimana untuk melaksanakan ini. Sebarang bantuan akan sangat dihargai, terima kasih!
Kod kalendar semasa:
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
Saya tidak pasti tetapi harap ini membantu.
Anda boleh melakukan ini dalam atribut slotProps
中使用 day
.
Contohnya:
<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 {}; } }} />
Anda boleh melihat keseluruhan contoh di sini: kodesandbox. io