Event Calendar in React

In this blog, I give the steps to include an event calendar(like the outlook or google calendar) in your React application.

This can be done using react-big-calendar.

Installation

Install using npm.

npm

Code Inclusions

Include react-big-calendar/lib/css/react-big-calendar.css for styles. I copied from node-modules to src/styles and imported the same in src/index.js as below

import

Define Calendar Component

Now the component can be imported and defined as a custom component and included in your application.

import2

For Localization, you can use moment or Globalize. Here I used moment.
moment
Next the specifications of the calendar are defined.
Calendar2
For styling of events, you can use below functions.
calendarstyling
 Finally, function to get the events(in the below format) to be marked in the calendar.
getevents
Now the EventCalendar component is ready to be included anywhere in your application. If you need to use application state to get the event data, you will have to bind your component using react-redux to get the required event details and pass the same in the expected format appropriately.

References:

https://github.com/intljusticemission/react-big-calendar

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s