-1

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.

enter image description here

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:

Rsuite DateRangePicker disableddays format

Filippos
  • 134
  • 1
  • 10

2 Answers2

0

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.

Brendan Bond
  • 1,737
  • 1
  • 10
  • 8
  • Yes but how this array is syntaxed? The way the data are imported into this array? Should it be ["2018-01-01","2018-01-05",....]? Should it be [{year:"2018",month:"01",day:"01"},{year:"2018",month:"01",day:"02"},....]? There is no example anywhere. – Filippos Aug 04 '21 at 07:08
  • Also if you can check with the package "react-nice-dates" https://reactnicedates.hernansartorio.com/ – Filippos Aug 04 '21 at 07:24
  • @Filippos it's an array of [Javascript Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) objects (that's what that type notation Date[] means). You'll need to take your API data and create Dates out of them, either by parsing the strings yourself or using a library like [date-fns](https://date-fns.org/), [Day.js](https://day.js.org/), [MomentJS](https://momentjs.com/). – Brendan Bond Aug 04 '21 at 14:16
  • @Filippos react-nice-dates uses a similar idea to the one I've described, read it about it in the [API docs](https://reactnicedates.hernansartorio.com/) under "Customizing Days" - they even use Date-Fns in the documentation! – Brendan Bond Aug 04 '21 at 14:22
  • Thanks! I managed to do it successfully. ALthough now I am facing a another problem. Mainly with CORS. – Filippos Aug 04 '21 at 18:02
  • Take a look if you have the time please: https://stackoverflow.com/questions/68656265/how-to-surpass-the-problem-of-cors-on-a-reactjs-node-project-deployed-on-vercel – Filippos Aug 04 '21 at 18:24
0

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;
Filippos
  • 134
  • 1
  • 10