DEV Community

Cover image for Adding Calendar To Your React App
Annie Liao
Annie Liao

Posted on

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.

Chill Lounge Interactive Calendar

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.

React Calendar screenshot

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>
    );
  }
}


Enter fullscreen mode Exit fullscreen mode

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>
    )

}


Enter fullscreen mode Exit fullscreen mode

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
    })
}


Enter fullscreen mode Exit fullscreen mode

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';


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
thisdotmedia_staff profile image
This Dot Media

This is great! Thanks Annie 🙏

Collapse
 
mhermank profile image
mherman22

Been helpful thanks

Collapse
 
minashaben profile image
Minase

Hi Annie
Thank you for your contribution to the community. i was going to through and trying to implement it but
npm install react-calendar corrupted my application. Is it trusted library

Collapse
 
liaowow profile image
Annie Liao

Hi Minase, I just checked the official documentation of react-calendar, its usage seems quite stable and the latest update was less than a month ago. So yes, I believe it is a trusted library. Perhaps you could reinstall the package after purging node-module?