I want to display array of days in Date picker MUI means if booked then it should show red in React js datepicker

Question

I want to display array of days in Date picker MUI means if booked then it should show red in Reactjs with datepicker

    <StaticDatePicker 
    value={value}
    onChange={(newValue) => {
    setValue(newValue);
    }} 
    renderInput={(params) => <TextField {...params} />}
    />
 

Answer 1

UPDATE:

Possibly missunderstood the question.

For adding an array of days you can set and manage them in a state outside the datepicker component. And then render them with renderDay property. See the documentation.

---

You can set text color based on a function like this in renderInput

const isBooked = () => {
  //TODO: check if booked. This is only for test
  return date > new Date();
};

return (
  <>
    <DatePicker
      inputFormat='dd/MM/yyyy'
      value={date}
      onChange={(value) => setDate(value)}
      renderInput={(params) => (
        <TextField
          sx={{ input: { color: isBooked() ? "red" : "blue" } }}
          {...params}
        />
      )}
    />
  </>

Then inside isBooked function you check your values and return the correct value.

Beware, this changes only the text color of the picker's text, not the dropdown.

As a next step you should set a className and change color using styles based on the result of the function.

Cheers