Adding Calendar To Your React App

Two months ago, I presented my React-Hooks-Redux web app in front of ~80 people (virtually, of course). After the presentation, I received quite a few questions on implementing a calendar library AND dynamically rendering data based on user clicks on the dates.

As requested, here is my little journey of building an interactive calendar with the help of one simple yet powerful React library.

Leveraging React Calendar Library

There are a lot of Calendar Library out there, I just picked the first one I found: React-Calendar.

The documentation is clear and beginner-friendly. All I did was follow the three steps in the tl;dr section:

1. Install by executing npm install react-calendar or yarn add react-calendar.
2. Import by adding import Calendar from 'react-calendar'.
3. Use by adding <Calendar />. Use onChange prop for getting new values.

And voilà -- We just built a calendar without having to carve out one from scratch! All hail open-source communities 🙌

Connecting the Calendar to the Data

Cool, we have a well-formatted calendar on our page. How might we connect the calendar dates to the dates specified in our data?

In the React Calendar documentation, there is a basic usage section where the author demonstrated using onChange prop to save the date currently being clicked on:

import React, { Component } from 'react';
import Calendar from 'react-calendar';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

Here's my simplified, functional-component version that takes advantage of React Hooks:

import React, { useState } from 'react';
import Calendar from 'react-calendar';

export default function Results() {
    // set states of calendar date
    const [calDate, setCalDate] = useState(new Date())

    function onChange (calDate) {
        // change results based on calendar date click
        setCalDate(calDate)
    }

    return (
        <div className="result-calendar">
            <Calendar onChange={onChange} value={calDate} />
        </div>
    )

}

Then, inside my onChange function, I grabbed my data (userResults), compared them against the currently-highlighted calendar date, and display only those with the same date.

The trick -- and the biggest challenge for me -- was to make sure the date format in the data matches that of React-Calendar.

Here's the complete code snippet of my onChange function:

function onChange (calDate) {
    setCalDate(calDate)

    const filteredResults = userResults.filter(result => {
        const newResultFormat = new Date(result.created_at).toLocaleString().split(",")[0]
        const newCalDateFormat = calDate.toLocaleString().split(",")[0]
        return newResultFormat === newCalDateFormat
    })
}

Styling

Last but not least, you can play around with the font and color, thanks to the CSS that comes with the library.

But first, don't forget to import the CSS into your JS file:

import 'react-calendar/dist/Calendar.css';

Then in your own stylesheet, adjust whatever custom styling that suits your app. My approach was to view the display in the console's element inspector, find out which selector controls which layout, and tweak the styling accordingly, like so:

.react-calendar__month-view__weekdays {
  color: gray;
}

.react-calendar__navigation button {
  font-size: 1em;
}

To be honest, I wasn't sure the implementation would work, considering it was my first time incorporating an external React library into my first React-Hooks-Redux app.

As it turns out, the tasks were not as daunting as I imagined.

So the biggest takeaway from this experience is: We all need to have a little more faith in ourselves. Just gotta take that first step, try, try again.