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.

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.

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.

Step 3: Adjust the highlighted background color

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

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

Highlighting dates in react-infinite-calendar
Tagged on:     

3 thoughts on “Highlighting dates in react-infinite-calendar

  • August 16, 2017 at 4:08 am
    Permalink

    I have an error: Uncaught ReferenceError: withDateSelection is not defined
    so, I think it has no function withDateSelection but in this article I also don’t see the function withDateSelection

    Reply
    • August 16, 2017 at 4:15 am
      Permalink

      oh sorry, I found this in top :)))

      Reply
  • August 16, 2017 at 5:32 am
    Permalink

    Thank you very much, I done it

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *