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