How to disable dates in React nice dates?

I am using this Calendar library from https://reactnicedates.hernansartorio.com/. I am using <DatePickerCalendar /> component from the library.

I have an array with three dates.

[date1, date2, date3]

How can i disable these three dates in the calendar. In the context of that user cannot pick these dates. In the API docs there is a reference to modifier object which takes a callback to modify the days in the calendar but i am struggling to implement this. Any suggestion? Thank you

https://codesandbox.io/s/serverless-dust-vkuhz?file=/src/App.js

Answer

You need to use the disabled modifier and run an Array loop check on the values as follows:

...
import { isEqual } from "date-fns"; // Importing isEqual to compare dates

const datesArray = [
  new Date(2021, 8, 31, 0, 0, 0, 0),
  new Date(2021, 9, 1, 0, 0, 0, 0),
  new Date(2021, 9, 3, 0, 0, 0, 0)
];

const modifiers = {
  disabled: (date) => {

    // The `some` method will check whether one of the values
    // of the Array passes the test (true):
    const isDisabled = datesArray.some((dateToDisable) =>
      isEqual(dateToDisable, date)
    );

    return isDisabled;

  },
...

The rest of the code, remains as is.

Make sure to include valid dates in the datesArray.