<p>I'm trying to implement MUI StaticDatePicker to my React website. What I want is to highlight the days in the calendar using a blue circle or badge. I've tried various ways to achieve this but I can't get the output of the highlighted date in the calendar. If anyone knows how to do this please help me. In the code below, I try to highlight the highlightDays status value in the calendar. </p> <p>I use the dayjs library to process time and date related data in my website. But for whatever reason, I can't see my renderDay running. Finally, what I want to achieve is to block dates before today, i.e. dates before the current date, and highlight the upcoming event dates in the calendar.</p> <pre class="brush:php;toolbar:false;">import { React, useState } from "react"; import dayjs from "dayjs"; import { Box, TextField } from "@mui/material"; 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 { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker"; import { useReadAllEvent } from "../hooks/useEvent.mjs"; import { PickersDay } from "@mui/x-date-pickers"; import { Badge } from "@mui/material"; const SessionBooking = ({ doctor }) => { const [value, setValue] = useState(""); const [highlightDays, setHighlightDays] = useState([ "2023-06-01", "2023-06-02", "2023-06-04", ]); console.log(value); const { data: eventSet, isLoading } = useReadAllEvent({ onSuccess: (message) => {}, onError: (message) => {}, 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} started={start} ended={end} patients={countPatient} max={maxPatients} /> ) ); return ( <Box mt={2} sx={{ display: "grid", gridTemplateColumns: { xs: "repeat(1, 1fr)", sm: "repeat(1, 1fr)", md: "repeat(2, 1fr)", }, gap: 1, }} > <Box> <LocalizationProvider dateAdapter={AdapterDayjs}> <StaticDatePicker orientation="portrait" openTo="day" value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(params) => <TextField {...params} />} renderDay={(day, _value, DayComponentProps) => { const isSelected = !DayComponentProps.outsideCurrentMonth && highlightDays.includes(dayjs(day).format("YYYY-MM-DD")); return ( <Badge key={day.toString()} overlap="circular" badgeContent={isSelected ? "-" : undefined}color="primary" > <PickersDay {...DayComponentProps} /> </Badge> ); }} /> </LocalizationProvider> </Box> <Box>{events}</Box> </Box> ); }; 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;