Markieren Sie Daten im MUI StaticDatePicker-Kalender

Question

Ich versuche, MUI StaticDatePicker auf meiner React-Website zu implementieren. Ich möchte die Tage im Kalender mit einem blauen Kreis oder Abzeichen hervorheben. Ich habe verschiedene Möglichkeiten ausprobiert, dies zu erreichen, aber ich kann die Ausgabe des hervorgehobenen Datums im Kalender nicht erhalten. Wenn jemand weiß, wie das geht, helfen Sie mir bitte. Im folgenden Code versuche ich, den Statuswert „highlightDays“ im Kalender hervorzuheben.

Ich verwende die DayJS-Bibliothek, um zeit- und datumsbezogene Daten auf meiner Website zu verarbeiten. Aber aus irgendeinem Grund kann ich meinen renderDay nicht laufen sehen. Was ich schließlich erreichen möchte, ist, Termine vor dem heutigen Tag, also Termine vor dem aktuellen Datum, zu blockieren und bevorstehende Veranstaltungstermine im Kalender hervorzuheben.

import { React, useState } from "react";
Dayjs aus „Dayjs“ importieren;
import { Box, TextField } from "@mui/material";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } aus "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } aus "@mui/x-date-pickers/StaticDatePicker";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { PickersDay } von "@mui/x-date-pickers";
import { Badge } from "@mui/material";

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

  const [highlightDays, setHighlightDays] = useState([
    „01.06.2023“,
    „02.06.2023“,
    „04.06.2023“,
  ]);

  console.log(Wert);

  const { data: eventSet, isLoading } = useReadAllEvent({
    onSuccess: (Nachricht) => {},
    onError: (Nachricht) => {},
    session: { id: doctor, today: dayjs().format("YYYY-MM-DD") },
  });

  if (isLoading) return <Loading />;

  console.log(eventSet);

  const events = eventSet.map(
    ({ key, countPatient, start, end, maxPatients }) => (
      <EventCard
        key={key}
        gestartet={start}
        beendet={end}
        patienten={countPatient}
        max={maxPatienten}
      />
    )
  );

  zurückkehren (
    <Box
      mt={2}
      sx={{
        Anzeige: „Gitter“,
        GridTemplateColumns: {
          xs: "repeat(1, 1fr)",
          sm: "repeat(1, 1fr)",
          md: "repeat(2, 1fr)",
        },
        Lücke: 1,
      }}
    >
      <Box>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            Orientierung="Hochformat"
            openTo="Tag"
            Wert={Wert}
            onChange={(newValue) => {
              setValue(newValue);
            }}
            renderInput={(params) => <TextField {...params} />}
            renderDay={(day, _value, DayComponentProps) => {
              const isSelected =
                !DayComponentProps.outsideCurrentMonth &&
                highlightDays.includes(dayjs(day).format("YYYY-MM-DD"));

              zurückkehren (
                <Abzeichen
                  key={day.toString()}
                  overlap="circular"
                  BadgeContent={isSelected ? "-" : nicht definiert}color="primär"
                >
                  <PickersDay {...DayComponentProps} />
                </Badge>
              );
            }}
          />
        </LocalizationProvider>
      </Box>

      <Box>{events}</Box>
    </Box>
  );
};

Standard-SessionBooking exportieren;

Answer 1

就像 steve 所说的 在新版本中不接受 renderDay 属性。相反必须使用插槽。 StaticDatePicker 的代码

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;