ReactJS Date Range Picker with disabled dates - Rsuite

Question

I am looking to a solution for my ReactJS project. In a property page I want to display a Date Range Picker with the availability of the property. By running a query with Postman I get the availability from the calendar with the following format, although there is no problem for me to manipulate the array in order to fit the requirements for the date range picker.

How to display inside the date range picker the blocked days so they are not clickable. I already tried with the DateRangePicker of rsuite and storybook but no luck for me. For the rsuite the data should have the following format:

Answer 1

It will depend on the date range picker you decide to use (or if you write your own) - a quick look at this component's API, for example, will tell you that it has a disabledDates: Date[] prop that you can use to disable certain dates.

Answer 2

The way I managed to do it was to get the data from the API. Manipulated and syntax in a way the DateRangePicker could import it via a function.

axios(config)
            .then(function (response) {
                //console.log(JSON.stringify(response.data));
                calendar= response.data.calendar;
                console.log(calendar);

                var highlighted = [];
                var disabled_days=[];
                    for(var i=0;i<calendar.length;i++) {
                        var item = calendar[i];
                        if(item.status === 'available') {
                            highlighted.push(new Date(item.date));
                            //console.log(item.date);
                        }
                        else{
                            disabled_days.push(new Date(item.date));
                        }
                    };

                modifiers = {
                    disabled: disabled_days,
                    highlight: highlighted 
                }
                self.setState({
                    modifiers: modifiers})
                    //console.log(modifiers);
                })
            .catch(function (error) {
                console.log(error);
            });

Then I used the package 'react-calendar' and import it to my node project.

npm i 'react-calendar' --save

Then I used the component Calendar as I have import it via the following command:

import Calendar from '../Components/CalendarRangePicker';

...

<Calendar modifiers={modifiers}/>

...

CalendarRangePicker.js

import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function CalendarRangePicker(props){

    const [value, onChange] = useState(new Date());
    const dataNotYetFetched = useState();

    // disabled some days until I fetched the data...
    var disabledDates = [
        new Date(2021, 7, 1),
        new Date(2021, 7, 2),
    ];
    //console.log(disabledDates);
    var modifiers = null;
    if(props.modifiers != null) {
        modifiers = props.modifiers;
        console.log(modifiers);
        disabledDates = modifiers.disabled;
    }

    return (
        <div>
        <Calendar
            // Make calendar not viewable for previous months
            minDate={new Date()}
            // Whether to show two months 
            showDoubleView = {false}
            ActiveStartDate = {new Date()}
            returnValue={"range"}
            // settings for the calendar
            onChange={onChange} 
            value={value} 
            selectRange={true} 
            locale="en-US"
            autofocus={false}
            // disabled dates. Got data from channel manager
            tileDisabled={({date, view}) =>
            (view === 'month') && // Block day tiles only
            disabledDates.some(disabledDate =>
            date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()
            )}
        />
        </div>
    );
}

export default CalendarRangePicker;