How can i add multiple blocked dates color in Reactjs airbnb calendar api?
ex:
- Red = special holiday
- Grey = unavailable
- blue = special non-working holiday
How can i add multiple blocked dates color in Reactjs airbnb calendar api?
ex:
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>;
}}
..........
/>