[DatePicker] Read only static calendar displaying availabilities

[nasaabg]

Hi! Is there a way to implement a Static read-only calendar displaying available dates like for the booking system when you review an apartment and its availability with Material UI pickers?

I have tried to use StaticDatePicker & shouldDisableDate & renderDay:

      <StaticDatePicker
        displayStaticWrapperAs="desktop"
        openTo="date"
        value={value}
        loading={highlightedDays === null}
        onChange={(newValue) => setValue(newValue)}
        // loading
        renderInput={(props) => <TextField {...props} />}
        renderLoading={() => <CalendarSkeleton />}
        renderDay={(day, val, DayComponentProps) => {
          console.log(day.day());
          const isSelected = highlightedDays.includes(day.day());

          return (
            <Badge
              key={day.toString()}
              overlap="circle"
              badgeContent={isSelected ? "🌚" : undefined}
            >
              <PickersDay {...DayComponentProps} disabled />
            </Badge>
          );
        }}
      />

However, it still allows picking some date from that calendar...I would like it to be read-only, showing what dates are prohibited and what available.

[EDIT] I partially managed to do it by passing disabled to PickersDay - not sure if this is the best way?

Example:

[YosephKS]

Hey @oliviertassinari @nasaabg I am new to this repo and would like to contribute by resolving this issue. Can I have a try to do it if I have background in React App Development?

[YosephKS]

@oliviertassinari okay cool thanks for the opportunity, I'll work on it and get back to you once I am done resolving the issue.

[nasaabg]

@YosephKS thanks, lmk if you need more details