Wie stelle ich den Datumsstil entsprechend dem festgelegten Zeitintervall im MUI-Datumskalender ein?

Question

Ich bin mit MUI DateCalendar etwas ratlos und brauche etwas Anleitung. Ich habe die Dokumentation gelesen und viel herumgebastelt, aber ich weiß immer noch nicht, wie ich das umsetzen soll. Wir würden uns über jede Hilfe sehr freuen, vielen Dank!

Aktueller Kalendercode:

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

我不确定，但希望这对您有帮助。

您可以在 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