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! 😊