How to add multiple blocked dates color in airbnb calendar?

Question

How can i add multiple blocked dates color in Reactjs airbnb calendar api?

ex:

• Red = special holiday
• Grey = unavailable
• blue = special non-working holiday

Answer 1

You can use renderDayContents method. For example:

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