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.


Install using 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


Define Calendar Component

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


For Localization, you can use moment or Globalize. Here I used moment.
Next the specifications of the calendar are defined.
For styling of events, you can use below functions.
 Finally, function to get the events(in the below format) to be marked in the calendar.
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.






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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s