[pickers] Particular color need to highlight

[vel-kathir]

Steps to reproduce

shouldDisableDate not working that particular date need to change the background color
const disabledDates = ["15-11-2023", "20-11-2023"];

import React, { useState } from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { DialogTitle, Divider, IconButton, Box } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DesktopDatePicker } from "@mui/x-date-pickers";
import dayjs from "dayjs";
import "dayjs/locale/en-gb";

const AddLeaveDialogBox = (props) => {
const {
isAddDialogOpen,
handleClose,
selectedDate,
handleDateChange,
holidayName,
setHolidayName,
handleSave,
dialogBoxLabel,
handleSaveEdit,
} = props;

const [locale, setLocale] = React.useState("en-gb");

const disabledDates = ["15-11-2023", "20-11-2023"];

const renderDay = (date) => {
const formattedDate = dayjs(date).format("DD/MM/YYYY");
console.log(formattedDate, "date", date);
const isDisabled = disabledDates.includes(formattedDate);

return (
  <div
    style={{
      width: "36px",
      height: "36px",
      lineHeight: "36px",
      textAlign: "center",
      borderRadius: "50%",
      background: isDisabled ? "lightgray" : "inherit",
    }}
  >
    {date.getDate()}
  </div>
);

};

return (

<DialogTitle
id="customized-dialog-title"
style={{ fontWeight: "600", color: "#565656", fontSize: "15px" }}
>
{dialogBoxLabel}

<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: "absolute",
right: 8,
top: 8,
color: "#B5B5B5",
borderRadius: "5px",
background: "rgba(88, 88, 88, 0.05)",
}}
>

  <DialogContent style={{ width: "346px" }}>
    <Box style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
      <Box>
        <span
          style={{ fontWeight: 400, fontSize: "14px", color: "#464646" }}
        >
          Holiday Date
        </span>
        <LocalizationProvider
          dateAdapter={AdapterDayjs}
          adapterLocale={locale}
        >
          <DemoContainer
            components={["DatePicker"]}
            sx={{ padding: "0px", mt: 1.5 }}
          >
            <DesktopDatePicker
              inputFormat="DD/MM/YYYY"
              value={
                dialogBoxLabel === "Edit Holiday"
                  ? dayjs(selectedDate, "DD/MM/YYYY")
                  : selectedDate
              }
              shouldDisableDate={(date) => {
                const formattedDate = dayjs(date).format("DD/MM/YYYY");
                return disabledDates.includes(formattedDate);
              }}
              onChange={handleDateChange}
              sx={{ width: "346px" }}
              renderDay={renderDay}
            />
          </DemoContainer>
        </LocalizationProvider>
      </Box>
      <Box>
        <span
          style={{ fontWeight: 400, fontSize: "14px", color: "#464646" }}
        >
          Holiday Name
        </span>
        <TextField
          fullWidth
          value={holidayName}
          onChange={(e) => setHolidayName(e.target.value)}
          placeholder="Enter Holiday Name"
          sx={{ mt: 1.3 }}
        />
      </Box>

      <Button
        variant="contained"
        onClick={
          dialogBoxLabel === "Edit Holiday" ? handleSaveEdit : handleSave
        }
        style={{ marginTop: 16, backgroundColor: "#BE8976" }}
        fullWidth
      >
        SAVE
      </Button>
    </Box>
  </DialogContent>
</Dialog>

);
};

export default AddLeaveDialogBox;

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: 1

[romgrk]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

@vel-kathir Make sure to move the code you pasted above in a codesandbox template, and ideally edit your issue to remove the wall of code and clarify the issue.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.