如何在airbnb日歷中添加多個阻塞日期顏色？

Question

如何在 Reactjs airbnb 日歷 api 中添加多個阻塞日期顏色？

前任：

• 紅色 = 特殊節日
• 灰色 = 不可用
• 藍色 = 特殊非工作假期

Answer 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>;
  }}
  ..........
/>