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