Create a Month, Week, and Day View Calendar with React and FullCalendar

The best JavaScript calendar library out there

Photo by Kyrie kim on Unsplash

In a recent project, I wanted to create a calendar that had views for the month, week, and day. I searched the internet and tried a few libraries out. By far, the best option I found was FullCalendar.

FullCalendar is a calendar library that you can implement with vanilla JavaScript or a framework such as React, Vue, or Angular. They have over 300 settings, making the calendar highly customizable to suit your needs.

In this article, we will take a look at how to do the following:

• Implement FullCalendar in a React application
• Create a custom header with custom buttons
• Add events to the calendar
• Customize the calendar with useful properties

Implement FullCalendar

For this example, we will use create-react-app to set up a basic React application.

Once the app is set up, start by installing the FullCalendar React package in your project.

npm install @fullcalendar/react

We will also need to install 3 plugins from FullCalendar.

npm install @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

First, create a new file in the project called Calendar.js. In this file, import the FullCalendar component from @fullcalendar/react, along with the plugins from the respective libraries.

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

We can now render a calendar in our application. Pass an array of the plugins we imported to the plugins prop. We will also set the initial view of the calendar using the initialView property. The initialView prop takes a string of any of the available views we added as a plugin. For our example, I set the initial view to dayGridMonth.

function FullCalendarApp() {
  return (
    <div className="App">
      <FullCalendar…