搜索

首页  >  问答  >  正文

MUI 日期日历如何按设定的时间间隔设置日期样式?

我对 MUI DateCalendar 有点不知所措,需要一些指导。我阅读了文档并进行了大量的修改,但我仍然不知道如何实现这一点。任何帮助将不胜感激,谢谢!

当前日历代码:

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粉883973481P粉883973481438 天前684

全部回复(1)我来回复

  • P粉197639753

    P粉1976397532023-09-16 11:26:23

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

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

    回复
    0
  • 取消回复