Highlight the days in MUI X StaticDatePicker Calender

Question

I'm trying implement MUI X StaticDatePicker to my react website. What I want is to highlight several days in the calendar using blue circle or a badge. I tried various methods achieve this but I couldn't get the highlighted dates output in the calendar. If anyone knows how to do this pls help me. In the below code I'm trying to highlight the highlightDays state values in calendar.

I used dayjs library handle time and date realated data in my website. But whatever reason I couldn't see my renderDay is running. Finally what I want to achieve is block the date prior to the today which is dates before the current dates 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 <StaticDatePicker /> doesn't accept renderDay prop in newer version. Instead have to use slots. 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;