Mettre en surbrillance les dates dans le calendrier MUI StaticDatePicker

Question

J'essaie d'implémenter MUI StaticDatePicker sur mon site Web React. Ce que je veux, c'est mettre en évidence les jours du calendrier à l'aide d'un cercle ou d'un badge bleu. J'ai essayé différentes manières d'y parvenir, mais je ne parviens pas à obtenir le résultat de la date en surbrillance dans le calendrier. Si quelqu'un sait comment faire, aidez-moi. Dans le code ci-dessous, j'essaie de mettre en évidence la valeur du statut highlightDays dans le calendrier.

J'utilise la bibliothèque dayjs pour traiter les données liées à l'heure et à la date sur mon site Web. Mais pour une raison quelconque, je ne vois pas mon renderDay fonctionner. Enfin, ce que je souhaite réaliser, c'est bloquer les dates antérieures à aujourd'hui, c'est-à-dire les dates antérieures à la date actuelle, et mettre en évidence les dates des événements à venir dans le calendrier.

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

const SessionBooking = ({ docteur }) => {
  const [valeur, setValue] = useState("");

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

  console.log(valeur);

  const { données : eventSet, isLoading } = useReadAllEvent ({
    onSuccess : (message) => {},
    onError : (message) => {},
    session : { id : docteur, aujourd'hui : dayjs().format("AAAA-MM-JJ") },
  });

  if (isLoading) renvoie <Loading />;

  console.log(eventSet);

  const événements = eventSet.map(
    ({ clé, countPatient, début, fin, maxPatients }) => (
      <Carte d'événement
        clé={clé}
        démarré={début}
        terminé={fin}
        patients={countPatient}
        max={maxPatients}
      />
    )
  );

  retour (
    <Boîte
      mt={2}
      sx={{
        affichage : "grille",
        grilleTemplateColumns : {
          xs : "répéter(1, 1fr)",
          sm : "répéter(1, 1fr)",
          md : "répéter(2, 1fr)",
        },
        écart: 1,
      }}
    >
      <Boîte>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            orientation="portrait"
            openTo="jour"
            valeur={valeur}
            onChange={(nouvelleValeur) => {
              setValue(nouvelleValeur);
            }}
            renderInput={(params) => <TextField {...params} />}
            renderDay={(jour, _value, DayComponentProps) => {
              const est sélectionné =
                !DayComponentProps.outsideCurrentMonth &&
                highlightDays.includes(dayjs(day).format("AAAA-MM-JJ"));

              retour (
                <Insigne
                  clé={jour.toString()}
                  chevauchement="circulaire"
                  badgeContent={isSelected ? "-" : indéfini}couleur = "primaire"
                >
                  <PickersDay {...DayComponentProps} />
                </Badge>
              );
            }}
          />
        </Provider de localisation>
      ≪/Boîte>

      <Boîte>{événements}</Boîte>
    ≪/Boîte>
  );
} ;

exporter SessionBooking par défaut ;

Answer 1

Comme Steve l'a dit, l'attribut renderDay n'est pas accepté dans la nouvelle version. Des emplacements doivent être utilisés à la place. Code pour 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;