Highlight dates in MUI StaticDatePicker calendar

Question

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.

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.

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;

Answer 1

Like steve said The renderDay attribute is not accepted in the new version. Slots must be used instead. Code for 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;