If we create a calendar according to perception and as per requirement, it is challenging. And suppose if you are lucky to get a calendar as per your requirement, still it will be tough to list events on a calendar. There are many calendar npm plug-ins available, but they are not fully adjustable as per our requirements.

In this blog, we are using react-big-calendar, and we will update it according to our requirements.

React big Calendar provides so many features like create, show, update, events in a month, week, day view, etc.

Step 1:- creating a calendar 

Now let’s start creating the Calendar with below-given links

Install the plug-in for react big Calendar:-

npm install --save react-big-calendar

The above plug-in helps in installing the package for react big Calendar.

npm install moment

And this plug-in will help you in validating, manipulating, and formatting dates.


 

Step-2 After installing the required plug-ins- “ let’s code.”

 

Create calender.js file in the src folder

And insert this code

 

import React from 'react';

import { Calendar, momentLocalizer } from 'react-big-calendar';

import moment from 'moment';

class Calendar extends React.Component {

   render() {

       return (

           <Calendar

               startAccessor="start"

               endAccessor="end"

           />

       )

   }
}
export default Calendar;

 

React big Calendar provides so many features in the form of props we will be using some of the props in the blog.

In Above code, we have used initial two props 

startAccessor:- Gives start date/time of the event

endAccessor: Gives end date/time of the event

We will be using more props later, which you will find with the next steps.

Step 3 - Make your Calendar look more helpful by adding events

In this step, you will come to know about how user events are listed and how events will present on the Calendar.

“Let’s see the events of the user.”

For example- 

We have two types of events like leaves and holiday

We will need a function which fetches the response of the GET API of holiday list

Holiday list

 

getHolidaysList() {

const holidaysList = []

    for (var i = 0; i < holidays.length; i++) {

    let color = '#ff0000'

    holidaysList.push({ ....,color: color })

   }

 };

 

So the JSON data for holiday response will be shown like this:-

ReactJS calendar with events-holiday event- gkmit

 

Set your data according to the above JSON and use it in your code.

It gives the list of holidays, and in the Calendar, it will display events in ‘red’ color

Leaves list

getAbsentiesList() {

   const absentiesList = []

   for (var i = 0; i < leaves.length; i++) {

       let start_at = (new Date(leaves[i].start_at))

       let end_at = (new Date(leaves[i].end_at))

       absentiesList.push({ ....,start_at: start_at, end_at: end_at})

     }

   };

   

 

So the JSON data for leave response will be shown like this:-

 

ReactJS calendar with events-leave event- gkmit

It provides the list of leaves taken by the user, and in the Calendar, it will display in the Default color.

Now we will implement both functions in the Calendar.

 

STEP 4 - Bind your data with calendar events

In this step, we will be working in render() where we will set the data of both holidays and leave lists according to the react big calendar props.

React big Calendar provides some default event variables which are listed below

 

Event {

  title: string,

  start: Date,

  end: Date,

  allDay?: boolean

  resource?: any,

}

We will set a holiday and leaves data according to the above event variable.

So we will set above data of event variable in the format given below

const holidays = []

       this.state.holidaysList.forEach((holiday) => {

           let start = moment(holiday.for_date).toDate()

           holidays.push({ id: holiday.id, title: holiday.occasion, start: start, end: start, color: holiday.color, resource: holiday.is_restricted, type: 'holiday', allDay: 'true' })

       })

       const leaves = []

       this.state.absentiesList.forEach((leave) => {

           let start_at = (new Date(leave.start_at))

           let end_at = (new Date(leave.end_at))

           leaves.push({ id: leave.id, title: leave.username, start: start_at, end: end_at, color: leave.color, type: 'leave', allDay: 'true' })

       })

       const list = [...holidays, ...leaves]

In the above list, we are binding our data on holiday and leaves together.

Now it’s time to implement binding data of holiday and leaves codes in the Calendar in a simple way.

Just follow below codes

return (

           <Calendar

               events={list}

               startAccessor="start"

               endAccessor="end"

               defaultDate={moment().toDate()}

               eventPropGetter={event => {

                   const eventData = list.find(ot => ot.id === event.id);

                   const backgroundColor = eventData && eventData.color;

                   return { style: { backgroundColor } };

               }}

           />

       )

Let me explain to you the above codes.

We added three more props in the calendar events:

It binds the list of events.

eventPropGetter: Optionally provide a function that returns an object of className or style props to be applied to the event node. 

defaultDate: in this we are using moment().toDate() which provides the current date.

So check the look of Calendar 

Month view

 

ReactJS calendar with events-month view gkmit


Week View

ReactJS calendar with events-week view- gkmit

 

For day view

ReactJS calendar with events-day view- gkmit

 

The above code is the complete description of how to show the Calendar with different events. I am hopeful this blog will turn fruitful for you. In my next blog, I will discuss how to create, update, and delete events from Calendar. In case if you have more queries, please leave your feedback and doubts in the comment section below.

Stay tuned and happy coding ;)