<p>React Web サイトに MUI StaticDatePicker を実装しようとしています。私が望むのは、青い円またはバッジを使用してカレンダー内の日を強調表示することです。これを達成するためにさまざまな方法を試しましたが、カレンダーで強調表示された日付の出力を取得できません。誰かがこれを行う方法を知っていれば、助けてください。以下のコードでは、カレンダー内のhighlightDaysステータス値を強調表示してみます。 </p> <p>dayjs ライブラリを使用して、Web サイト内の時刻と日付に関連するデータを処理します。しかし、何らかの理由で、renderDay が実行されていることがわかりません。最後に、私が達成したいのは、今日より前の日付、つまり現在の日付より前の日付をブロックし、カレンダー内の今後のイベントの日付を強調表示することです。</p> <pre class="brush:php;toolbar:false;">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;</pre> をエクスポートします。 <pre class="brush:php;toolbar:false;"></pre></p>