Highlighting dates in react-infinite-calendar

I am using react-infinite-calendar in one of my projects. I highly recommend it if you are looking to display a calendar, especially a calendar with event dates highlighted on it.

The calendar is well-coded and well-documented. It is also written for extensibility. The calendar does not have a highlight feature built-in. But, it can be easily built using recompose. I believe at some point of time, the highlighting feature will be part of the library. But for now, I have got a good work-around for those who are looking for a quick fix.

The core calendar can be extended via higher order components. For example, keyboard support is provided with a built-in higher order component.

import InfiniteCalendar, { 
  Calendar, 
  withDateSelection, 
  withKeyboardSupport } 
from react-infinite-calendar;
 
<InfiniteCalendar
  Component={withDateSelection(withKeyboardSupport(Calendar))}
/>

withDateSelection and withKeyboardSupport are higher order components which extend the base calendar.

I will explain step-by-step how to extend the calendar for highlighting dates.

Step 1: Write a higher order component

The withHighlightedDates component below highlights the date.

import { withProps } from 'recompose';

// Enhance Day component to display selected state based on an array of selected dates
const enhanceDay = highlighted => withProps(props => ({
        isHighlighted: highlighted.indexOf(props.date) !== -1,
    }
));


// Enhancer to highlight multiple dates
export const withHighlightedDates = withProps(({
    highlighted,
    DayComponent,
  }) => ({
        DayComponent: enhanceDay(highlighted)(DayComponent),
    }));

We supply highlighted prop which is an array of dates in ‘YYYY-MM-DD’ format.  The Calendar component allows to customise the DayComponent. In our case, we supply the isHighlighted prop to the DayComponent. Note that this is a sort of hack. The isHighlighted prop is used by keyboard support feature to highlight dates when you use arrow keys in the keyboard. I use the same isHighlighted prop to highlight event dates.

Step 2: Use withHighlightedDates to extend the Calendar

Extending the calendar is straight-forward.

<InfiniteCalendar
  Component={withDateSelection(withHighlightedDates(Calendar))}
  highlighted={dates.map(d => d.format('YYYY-MM-DD'))}
/>

Step 3: Adjust the highlighted background color

The final step is to adjust the highlighted background color. This can be done with CSS.

.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before {
    background-color: #CAEBF2;
}

These steps are a work-around till a PR is released to have the feature in-built.