Adding Calendar To Your React App
Tags: showdev, react, javascript
Published: 2020-06-06 16:07:37

Two months ago, I presented [my React-Hooks-Redux web app](https://dev.to/liaowow/talk-about-stressful-times-how-covid-19-shaped-my-first-react-hooks-redux-app-2o4k) 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](https://dev-to-uploads.s3.amazonaws.com/i/h6g3t6egtds9w1c5dlyf.gif)

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](https://www.npmjs.com/package/react-calendar).

![React Calendar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/y5sc12r5sti36lh2wp38.png)

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](https://www.npmjs.com/package/react-calendar#usage) where the author demonstrated using `onChange` prop to save the date currently being clicked on:
```js
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:
```js
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:
```js
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:
```js
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:
```css
.react-calendar__month-view__weekdays {
  color: gray;
}

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

<hr>

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.