Comment définir le style de date en fonction de l'intervalle de temps défini dans le calendrier des dates MUI ?

Question

Je suis un peu perdu avec MUI DateCalendar et j'ai besoin de conseils. J'ai lu la documentation et beaucoup bricolé, mais je ne sais toujours pas comment l'implémenter. Toute aide serait grandement appréciée, merci !

Code du calendrier actuel :

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

Answer 1

Je ne suis pas sûr mais j'espère que cela vous aidera.

Vous pouvez le faire dans l'attribut slotProps 中使用 day.

Par exemple :

<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 {};
    }
  }}
/>

Vous pouvez voir l'exemple complet ici : codesandbox. io