react-calendar tileDisabled Saturdays and Sundays

2k Views Asked by At

I want to disabled every Saturday and Sunday on my react-calendar. So I used the tileDisabled function like this:

<Calendar
        onChange={setDate}
        value={date}
        minDate={today}
        tileDisabled={({ date, view }) =>
          (view === "month" && date.getDay() === 0) || date.getDay() === 6
        }
      />

This works in some cases, but when I press the month to select another one, some months are disabled, like october in this

enter image description here

2

There are 2 best solutions below

0
On

Hope it might works for you.

<Calender tileDisabled={({date}) => [0, 6].includes(date.getDay())}

In turn it will disable the day number 6 and 0 which means saturday and sunday.

0
On
const tileDisabled = ({ date }: { date: Date }) => {
    return (
      date.getDay() === 0 ||
      date.getDay() === 6
    );
  };

<Calendar
    onChange={setDate}
    value={date}
    tileDisabled={tileDisabled}
/>