MUI StaticDatePicker 달력에서 날짜 강조 표시

Question

내 React 웹사이트에 MUI StaticDatePicker를 구현하려고 합니다. 내가 원하는 것은 파란색 원이나 배지를 사용하여 달력의 날짜를 강조하는 것입니다. 이를 달성하기 위해 다양한 방법을 시도했지만 달력에서 강조 표시된 날짜의 출력을 얻을 수 없습니다. 이 작업을 수행하는 방법을 아는 사람이 있으면 도와주세요. 아래 코드에서는 달력의 하이라이트Days 상태 값을 강조 표시하려고 합니다.

저는 dayjs 라이브러리를 사용하여 웹사이트의 시간 및 날짜 관련 데이터를 처리합니다. 하지만 어떤 이유로든 renderDay가 실행되는 것을 볼 수 없습니다. 마지막으로 제가 달성하고 싶은 것은 오늘 이전 날짜, 즉 현재 날짜 이전 날짜를 차단하고 달력에서 다가오는 이벤트 날짜를 강조 표시하는 것입니다.

import { React, useState } from "react"
"dayjs"에서 dayjs를 가져옵니다;;
"@mui/material"에서 { Box, TextField } 가져오기;;
"../pages/index.mjs"에서 가져오기 { 로드 중 };
"./index.mjs"에서 { EventCard } 가져오기;;
"@mui/x-date-pickers/AdapterDayjs"에서 { AdapterDayjs } 가져오기;;
"@mui/x-date-pickers/LocalizationProvider"에서 { LocalizationProvider } 가져오기;
"@mui/x-date-pickers/StaticDatePicker"에서 { StaticDatePicker } 가져오기;;
"../hooks/useEvent.mjs"에서 { useReadAllEvent }를 가져옵니다;;
"@mui/x-date-pickers"에서 { PickersDay } 가져오기;;
"@mui/material"에서 { 배지 } 가져오기;;

const SessionBooking = ({ 의사 }) => {
  const [value, setValue] = useState("");

  const [highlightDays, setHighlightDays] = useState([
    "2023-06-01",
    "2023-06-02",
    "2023-06-04",
  ]);

  console.log(값);

  const { 데이터: eventSet, isLoading } = useReadAllEvent({
    onSuccess: (메시지) => {},
    onError: (메시지) => {},
    세션: { ID: 의사, 오늘: dayjs().format("YYYY-MM-DD") },
  });

  if (isLoading) return <Loading />

  console.log(eventSet);

  const 이벤트 = eventSet.map(
    ({ key, countPatient, start, end, maxPatients }) => (
      <이벤트카드
        키={키}
        시작됨={시작}
        종료={끝}
        환자={countPatient}
        최대={최대환자}
      />
    )
  );

  반품 (
    <박스
      mt={2}
      sx={{
        디스플레이: "그리드",
        GridTemplateColumns: {
          xs: "반복(1, 1fr)",
          sm: "반복(1, 1fr)",
          md: "반복(2, 1fr)",
        },
        간격: 1,
      }}
    >
      <박스>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            방향="초상화"
            openTo="일"
            값={값}
            onChange={(newValue) => {
              setValue(새값);
            }}
            renderInput={(params) => <텍스트 필드 {...params} />}
            renderDay={(day, _value, DayComponentProps) => {
              const isSelected =
                !DayComponentProps.outsideCurrentMonth &&
                하이라이트Days.includes(dayjs(day).format("YYYY-MM-DD"));

              반품 (
                <배지
                  키={day.toString()}
                  중첩 = "원형"
                  BadgeContent={isSelected ? "-" : 한정되지 않은}color="기본"
                >
                  <PickersDay {...DayComponentProps} />
                </배지>
              );
            }}
          />
        </현지화 제공자>
      </박스>

      <Box>{이벤트}</Box>
    </박스>
  );
};

기본 SessionBooking 내보내기;

Answer 1

스티브가 말했듯이 renderDay 속성은 새 버전에서 허용되지 않습니다. 대신 슬롯을 사용해야 합니다. StaticDatePicker

코드

으아악