如何在airbnb日历中添加多个阻塞日期颜色？

【问题标题】：How to add multiple blocked dates color in airbnb calendar?如何在airbnb日历中添加多个阻塞日期颜色？
【发布时间】：2020-07-07 14:38:43
【问题描述】：

如何在 Reactjs airbnb 日历 API 中添加多个被阻止的日期颜色？

例如：

红色 = 特殊节日
灰色 = 不可用
蓝色 = 特殊非工作假期

【问题讨论】：

标签： reactjs react-dates

【解决方案1】：

您可以使用 renderDayContents 方法。例如：

<DateRangePicker
  renderDayContents={(day) => {
    if (day.format('DD-MM') === '19-07')
      return <td className={classes.specialHoliday}>{day.format('DD')}</td>;
    if (day.format('DD-MM') === '18-07')
      return <td className={classes.unavailable}>{day.format('DD')}</td>;
    if (day.format('DD-MM') === '20-07')
      return (
        <td className={classes.specialNonWorkingHoliday}>
          {day.format('DD')}
        </td>
      );
    return <td>{day.format('DD')}</td>;
  }}
  ..........
/>

【讨论】：