airbnb/react-dates set blocked days after api fetch

Question

Library: https://github.com/airbnb/react-dates

Question: Is possible to set blocked days after fetch from server? (wait/recall isDayBlocked callback or re-initialize calendar)

Problem: Callback 'isDayBlocked' is called after calendar changes view to next month when data are not ready yet.

Example Code:

import { DayPickerSingleDateController } from 'react-dates';

class DayPicker {

  isDayBlocked(day) {
    return this.days.has(day);
  }

  handleMonthChange() {
    // async api fetch
    this.days = getNextMonthBlockedDays();
  }

  render() { 
    <DayPickerSingleDateController
      {...someProps}
      isOutsideRange={this.isOutsideRange}
      onNextMonthClick={this.handleMonthChange}
    />
  }

}

What i tried:

mount/unmount calendar depending on loading prop (problem - animation to next month before nextMount callback + when calendar disappear it looks bad)
load to store nextMonth data, so when i change view to nextMonth 'isDayBlocked' works good and fetch data for nextMonth (problem - double click on nextMonth change or slow connection)

Any ideas please?

We'd need more code before figuring out what's wrong. For example when is `isDayBlocked` called? — Daniel Andrei, Oct 24 '17 at 20:27
It's called on component mount and on month view change. Click nextMonth -> `isDayBlocked` called (that's problem because i have old data) -> `GET_DAYS_START` -> `GET_DAYS_SUCCESS` -> now data OK, but i am unable to re-check blocked days — Miroslav Papírník, Oct 25 '17 at 07:26

score 0 · Answer 1 · answered Oct 25 '17 at 07:38

0

Holding your data in state would fix your issue and update your view everytime.

  handleMonthChange() {
    // async api fetch
    getNextMonthBlockedDays().then((data) => {
        this.setState({days : data});
    });
  }

You can also set a flag to not be able to change the month while a request is processing or you could cancel the previous request. (if your fetch api implements cancellation).

answered Oct 25 '17 at 07:38

Daniel Andrei

2,654
15
16

1) i keep my data in redux, so my component `DayPicker` is updated, but it is not propagated to `DayPickerSingleDateController` (isDayBlocked not called again) 2) Tried to block click on next while fetching, that component has prop `navNext:element` to support own navigation. But this element is automatically wrapped by button which cause that month change implementation. – Miroslav Papírník Oct 25 '17 at 09:53

score 0 · Accepted Answer · answered Dec 13 '19 at 10:53

0

I added absolute overlay div with spinner while loading is in progress.

answered Dec 13 '19 at 10:53

Miroslav Papírník

709
5
17

airbnb/react-dates set blocked days after api fetch

2 Answers2