MUI StaticDatePicker カレンダーの日付を強調表示する

Question

React Web サイトに MUI StaticDatePicker を実装しようとしています。私が望むのは、青い円またはバッジを使用してカレンダー内の日を強調表示することです。これを達成するためにさまざまな方法を試しましたが、カレンダーで強調表示された日付の出力を取得できません。誰かがこれを行う方法を知っていれば、助けてください。以下のコードでは、カレンダー内のhighlightDaysステータス値を強調表示してみます。

dayjs ライブラリを使用して、Web サイト内の時刻と日付に関連するデータを処理します。しかし、何らかの理由で、renderDay が実行されていることがわかりません。最後に、私が達成したいのは、今日より前の日付、つまり現在の日付より前の日付をブロックし、カレンダー内の今後のイベントの日付を強調表示することです。

import { React, useState } from "react";
「dayjs」から dayjs をインポートします。
import { Box, TextField } from "@mui/material";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } から "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } から "@mui/x-date-pickers/StaticDatePicker";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { PickersDay } から "@mui/x-date-pickers";
import { Badge } から "@mui/material";

const SessionBooking = ({ 医師 }) => {
  const [値, setValue] = useState("");

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

  console.log(値);

  const { データ: イベントセット、isLoading } = useReadAllEvent({
    onSuccess: (メッセージ) => {}、
    onError: (メッセージ) => {}、
    セッション: { id: 医師、今日: dayjs().format("YYYY-MM-DD") },
  });

  if (isLoading) return <Loading />;

  コンソール.ログ(イベントセット);

  const events =eventSet.map(
    ({ key, countPatients, start, end, maxPatients }) => (
      <イベントカード
        キー={キー}
        開始={開始}
        終了={終了}
        患者={患者数}
        max={最大患者数}
      />
    )
  );

  戻る （
    <ボックス
      mt={2}
      sx={{
        表示: 「グリッド」、
        グリッドテンプレート列: {
          xs: "リピート(1, 1fr)",
          sm: "リピート(1, 1fr)",
          md: "repeat(2, 1fr)",
        }、
        ギャップ: 1、
      }}
    >
      <ボックス>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            向き=「縦」
            openTo="日"
            値={値}
            onChange={(newValue) => {
              setValue(newValue);
            }}
            renderInput={(params) => <TextField {...params} />}
            renderDay={(day, _value, DayComponentProps) => {
              const isSelected =
                !DayComponentProps.outsideCurrentMonth &&
                ハイライトデイズ.includes(dayjs(日).format("YYYY-MM-DD"));

              戻る （
                <バッジ
                  key={day.toString()}
                  オーバーラップ=「円形」
                  バッジコンテンツ={選択されていますか? 「-」 ： 未定義}color="プライマリ"
                >
                  <PickersDay {...DayComponentProps} />
                </バッジ>
              );
            }}
          />
        </LocalizationProvider>
      </ボックス>

      <ボックス>{イベント}</ボックス>
    </ボックス>
  );
};

デフォルトの SessionBooking;

をエクスポートします。

Answer 1

スティーブが言ったように renderDay 属性は新しいバージョンでは受け入れられません。代わりにスロットを使用する必要があります。 StaticDatePicker のコード

リーリー