How to make ReactJS Calendar with events
Creating a Custom Calendar with React Big Calendar
Creating a calendar that aligns with specific requirements can be challenging. Even if you find a calendar that meets your needs, listing events and managing them effectively can still be difficult. While many calendar NPM plug-ins exist, they often lack full customization capabilities.
In this blog, we will use React Big Calendar and customize it according to our requirements.
Why Choose React Big Calendar?
React Big Calendar offers numerous features, including:
- Creating, displaying, and updating events
- Month, week, and day views
- Easy integration and customization
Step 1: Install Required Dependencies
To start, install the necessary plug-ins:
npm install --save react-big-calendar
npm install moment
react-big-calendar
helps create and manage calendars efficiently.moment
assists in date validation, manipulation, and formatting.
Step 2: Setting Up the Calendar Component
Create a calendar.js
file inside the src
folder and insert the following code:
import React from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
const localizer = momentLocalizer(moment);
class CustomCalendar extends React.Component {
render() {
return (
<Calendar
localizer={localizer}
startAccessor="start"
endAccessor="end"
/>
);
}
}
export default CustomCalendar;
Step 3: Adding Events to the Calendar
To make the calendar more useful, we need to list and display user events.
Example Events: Holidays and Leaves
We will fetch and display two types of events: holidays and leaves.
Fetching the Holiday List
getHolidaysList() {
const holidaysList = [];
for (let i = 0; i < holidays.length; i++) {
let color = '#ff0000';
holidaysList.push({
id: holidays[i].id,
title: holidays[i].occasion,
start: new Date(holidays[i].for_date),
end: new Date(holidays[i].for_date),
color: color,
type: 'holiday',
allDay: true
});
}
return holidaysList;
}
Fetching the Leave List
getAbsenteesList() {
const absenteesList = [];
for (let i = 0; i < leaves.length; i++) {
let start_at = new Date(leaves[i].start_at);
let end_at = new Date(leaves[i].end_at);
absenteesList.push({
id: leaves[i].id,
title: leaves[i].username,
start: start_at,
end: end_at,
color: '#008000',
type: 'leave',
allDay: true
});
}
return absenteesList;
}
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 leave data according to the above event variable.
So we will set the 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 holidays and leaves together.
Now it’s time to implement binding data of holidays and leave codes in the Calendar in a simple way.
Just follow the 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 to 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 usingmoment().toDate()which provides the current date.
So check the look of the Calendar
Month View
Week View
For day view
Enhancing the Calendar with More Features
Integrating Frontend Development Service
For companies offering Frontend Development Services, integrating a calendar into web applications can improve user experience. A well-designed calendar can enhance productivity by helping users manage tasks, deadlines, and schedules efficiently.
Additional Enhancements:
- Adding Filters: Enable users to filter events based on type (holidays, meetings, personal events, etc.).
- Event Editing: Implement a feature that allows users to modify or delete events.
- Custom Styling: Enhance UI by applying themes and styles to match the application’s look and feel.
Conclusion
This blog provided a step-by-step guide to implementing a custom calendar using React Big Calendar. By integrating holidays and leave lists, we demonstrated how to fetch, format, and display events effectively. Stay tuned for the next blog, where we will discuss how to create, update, and delete calendar events.
If you have any queries, feel free to drop a comment below.
Happy coding! 😊