<p>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. </p> <p>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.</p> <pre class="brush:php;toolbar:false;">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;</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;