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

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