0

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

ex:

  • Red = special holiday
  • Grey = unavailable
  • blue = special non-working holiday
TylerH
  • 20,799
  • 66
  • 75
  • 101
tmcrz
  • 1

1 Answers1

0

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

enter image description here

Sergey
  • 126
  • 7