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?

Answer 1

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).

Answer 2

我在加载过程中添加了带有微调器的绝对叠加 div。