<p>我正在尝试将 MUI StaticDatePicker 实现到我的 React 网站。我想要的是使用蓝色圆圈或徽章突出显示日历中的几天。我尝试了各种方法来实现这一点，但我无法获得日历中突出显示的日期输出。如果有人知道该怎么做，请帮助我。在下面的代码中，我尝试突出显示日历中的highlightDays状态值。</p> <p>我在我的网站中使用了dayjs库处理时间和日期相关的数据。但无论出于什么原因，我看不到我的 renderDay 正在运行。最后，我想要实现的是阻止今天之前的日期，即当前日期之前的日期，并在日历中突出显示即将发生的活动日期。</p> <pre class="brush:php;toolbar:false;">import { React, useState } from &quot;react&quot;; import dayjs from &quot;dayjs&quot;; import { Box, TextField } from &quot;@mui/material&quot;; import { Loading } from &quot;../pages/index.mjs&quot;; import { EventCard } from &quot;./index.mjs&quot;; import { AdapterDayjs } from &quot;@mui/x-date-pickers/AdapterDayjs&quot;; import { LocalizationProvider } from &quot;@mui/x-date-pickers/LocalizationProvider&quot;; import { StaticDatePicker } from &quot;@mui/x-date-pickers/StaticDatePicker&quot;; import { useReadAllEvent } from &quot;../hooks/useEvent.mjs&quot;; import { PickersDay } from &quot;@mui/x-date-pickers&quot;; import { Badge } from &quot;@mui/material&quot;; const SessionBooking = ({ doctor }) =&gt; { const [value, setValue] = useState(&quot;&quot;); const [highlightDays, setHighlightDays] = useState([ &quot;2023-06-01&quot;, &quot;2023-06-02&quot;, &quot;2023-06-04&quot;, ]); console.log(value); const { data: eventSet, isLoading } = useReadAllEvent({ onSuccess: (message) =&gt; {}, onError: (message) =&gt; {}, session: { id: doctor, today: dayjs().format(&quot;YYYY-MM-DD&quot;) }, }); if (isLoading) return &lt;Loading /&gt;; console.log(eventSet); const events = eventSet.map( ({ key, countPatient, start, end, maxPatients }) =&gt; ( &lt;EventCard key={key} started={start} ended={end} patients={countPatient} max={maxPatients} /&gt; ) ); return ( &lt;Box mt={2} sx={{ display: &quot;grid&quot;, gridTemplateColumns: { xs: &quot;repeat(1, 1fr)&quot;, sm: &quot;repeat(1, 1fr)&quot;, md: &quot;repeat(2, 1fr)&quot;, }, gap: 1, }} &gt; &lt;Box&gt; &lt;LocalizationProvider dateAdapter={AdapterDayjs}&gt; &lt;StaticDatePicker orientation=&quot;portrait&quot; openTo=&quot;day&quot; value={value} onChange={(newValue) =&gt; { setValue(newValue); }} renderInput={(params) =&gt; &lt;TextField {...params} /&gt;} renderDay={(day, _value, DayComponentProps) =&gt; { const isSelected = !DayComponentProps.outsideCurrentMonth &amp;&amp; highlightDays.includes(dayjs(day).format(&quot;YYYY-MM-DD&quot;)); return ( &lt;Badge key={day.toString()} overlap=&quot;circular&quot; badgeContent={isSelected ? &quot;-&quot; : undefined} color=&quot;primary&quot; &gt; &lt;PickersDay {...DayComponentProps} /&gt; &lt;/Badge&gt; ); }} /&gt; &lt;/LocalizationProvider&gt; &lt;/Box&gt; &lt;Box&gt;{events}&lt;/Box&gt; &lt;/Box&gt; ); }; export default SessionBooking;</pre> <pre class="brush:php;toolbar:false;"></pre></p>

import React, { useState } from "react";
import dayjs from "dayjs";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { PickersDay } from "@mui/x-date-pickers/PickersDay";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";

const HighlightedDay = styled(PickersDay)(({ theme }) => ({
  "&.Mui-selected": {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  },
}));

//higlight the dates in highlightedDays arra
const ServerDay = (props) => {
  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;

  const isSelected =
    !props.outsideCurrentMonth &&
    highlightedDays.includes(day.format("YYYY-MM-DD"));

  return (
    <HighlightedDay
      {...other}
      outsideCurrentMonth={outsideCurrentMonth}
      day={day}
      selected={isSelected}
    />
  );
};

const SessionBooking = ({ doctor }) => {
  const [value, setValue] = useState("");
  const [highlightedDays, setHighlitedDays] = useState([
    "2023-07-01",
    "2023-07-09",
    "2023-07-21",
    "2024-07-12",
  ]);


  const today = dayjs();

  return (
    
      <Box>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            defaultValue={today}
            minDate={today}
            maxDate={today.add(1, "month")}
            slots={{
              day: ServerDay,
            }}
            slotProps={{
              day: {
                highlightedDays,
              },
            }}
          />
        </LocalizationProvider>
      </Box>
  );
};

export default SessionBooking;