Serlahkan tarikh dalam kalendar MUI StaticDatePicker

Question

Saya cuba melaksanakan MUI StaticDatePicker ke tapak web React saya. Apa yang saya mahu ialah menyerlahkan hari dalam kalendar menggunakan bulatan atau lencana biru. Saya telah mencuba pelbagai cara untuk mencapai ini tetapi saya tidak boleh mendapatkan output tarikh yang diserlahkan dalam kalendar. Jika sesiapa tahu bagaimana untuk melakukan ini, tolong bantu saya. Dalam kod di bawah, saya cuba menyerlahkan nilai status highlightDays dalam kalendar.

Saya menggunakan pustaka dayjs untuk memproses data berkaitan masa dan tarikh dalam tapak web saya. Tetapi atas sebab apa pun, saya tidak dapat melihat renderDay saya berjalan. Akhir sekali, apa yang saya ingin capai ialah menyekat tarikh sebelum hari ini, iaitu tarikh sebelum tarikh semasa dan menyerlahkan tarikh acara akan datang dalam kalendar.

import { React, useState } daripada "react";
import dayjs daripada "dayjs";
import { Box, TextField } daripada "@mui/material";
import { Memuatkan } daripada "../pages/index.mjs";
import { EventCard } daripada "./index.mjs";
import { AdapterDayjs } daripada "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } daripada "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } daripada "@mui/x-date-pickers/StaticDatePicker";
import { useReadAllEvent } daripada "../hooks/useEvent.mjs";
import { PickersDay } daripada "@mui/x-date-pickers";
import { Lencana } daripada "@mui/material";

const SessionBooking = ({ doktor }) => {
  const [nilai, setValue] = useState("");

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

  console.log(nilai);

  const { data: eventSet, isLoading } = useReadAllEvent({
    onSuccess: (mesej) => {},
    onError: (mesej) => {},
    sesi: { id: doktor, hari ini: dayjs().format("YYYY-MM-DD") },
  });

  jika (isLoading) kembali <Memuatkan />;

  console.log(eventSet);

  acara const = eventSet.map(
    ({ key, countPatient, start, end, maxPatients }) => (
      <EventCard
        kunci={kunci}
        bermula={mula}
        ended={end}
        pesakit={countPatient}
        max={maxPatients}
      />
    )
  );

  kembali (
    <Kotak
      mt={2}
      sx={{
        paparan: "grid",
        gridTemplateColumns: {
          xs: "ulang(1, 1fr)",
          sm: "ulang(1, 1fr)",
          md: "ulang(2, 1fr)",
        },
        jurang: 1,
      }}
    >
      <Kotak>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            orientation="potret"
            openTo="hari"
            nilai={nilai}
            onChange={(newValue) => {
              setValue(newValue);
            }}
            renderInput={(params) => <TextField {...params} />}
            renderDay={(hari, _value, DayComponentProps) => {
              const isSelected =
                !DayComponentProps.outsideCurrentMonth &&
                highlightDays.includes(dayjs(day).format("YYYY-MM-DD"));

              kembali (
                <Lencana
                  key={day.toString()}
                  overlap="bulatan"
                  badgeContent={isSelected ? "-" : tidak ditentukan}warna="utama"
                >
                  <PickersDay {...DayComponentProps} />
                </Lencana>
              );
            }}
          />
        </Penyedia Penyetempatan>
      </Kotak>

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

eksport lalai SessionBooking;

Answer 1

Seperti kata steve atribut renderDay tidak diterima dalam versi baharu. Slot mesti digunakan sebaliknya. Kod untuk 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;