How to make ReactJS Calendar with events
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.
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 (<CalendarstartAccessor="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:-
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:-
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?: booleanresource?: 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 (<Calendarevents={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.
d
efaultDate: in this we are usingmoment().toDate()which provides the current date.
So check the look of Calendar
Month view
Week View
For day view
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 😉
