MUI Date Calendar how do I set styles to the days at a set interval?

Question

I'm a bit overwhelmed with the MUI DateCalendar and need some guidance. I read the docs and have fiddled around a good amount but I'm still lost on how to accomplish this. Any help would greatly be appreciated, thanks!

Current calendar code:

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

I'm not sure but I hope this helps you.

You can use day property in slotProps.

For example:

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

You can see the whole example here: codesandbox.io