How To Create a Calendar In a ReactJS Application

Introduction

 

In this article, I will explain how to create FullCalendar in a ReactJS application.

 

Prerequisites

• Knowledge of ReactJS
• Visual Studio Code Installed
• Node and NPM installed

Create a React.js Project

 

To create a new ReactJS project, open the command prompt and enter the following command.

npx create-react-app reactpartone

Install FullCalendar

 

Now install fullcalendar using the following commands

npm install @fullcalendar/core
npm install @fullcalendar/react @fullcalendar/daygrid
npm install @fullcalendar/timegrid

Now install Bootstrap in this project by using the following command. 

npm install --save bootstrap

Now, open the index.js file and add Bootstrap reference.  

import 'bootstrap/dist/css/bootstrap.min.css';

Now go to src folder and create a new component 'Calendar.js' and add the following reference for fullcalendar plugin,

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

 Now add the following code in this component

import React, { Component } from 'react'
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
const events = [{ title: "Today", date: new Date() }];
export class Calendar extends Component {
    render() {
        return (
            <div className="container">
                <div className="row title" style={{ marginTop: "20px" }} >
                    <div class="col-sm-12 btn btn-info">
                        FullCalendar In React Application
               </div>
                </div>
                <FullCalendar
                    defaultView="dayGridMonth"
                    plugins={[dayGridPlugin]}
                    events={events}
                />
            </div>
        )
    }
}

export default Calendar

Now open App.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Calendar from './Calendar'
function App() {
  return (
    <div className="App">
     <Calendar/>
    </div>
  );
}

export default App;

Now run the project by using 'npm start' and check your result,

 

 

Now go to src folder and create a new component 'Calendar1.js' and add the following code.

import React, { Component } from 'react'
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

const events = [{ title: "Today", date: new Date() }];
export class Calendar1 extends Component {
    render() {
        return (
            <div className="container">
                  <div className="row title" style={{ marginTop: "20px" }} >
                    <div class="col-sm-12 btn btn-info">
                        FullCalendar In React Application
               </div>
                </div>
                 <FullCalendar
              defaultView="dayGridMonth"
             header={{
            left: "prev,next",
            center: "title",
           right: "dayGridMonth,timeGridWeek,timeGridDay"
        }}
        plugins={[dayGridPlugin, timeGridPlugin]}
        events={events}
      />
            </div>
        )
    }
}

export default Calendar1

Now open App.js file and add the following code,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Calendar1 from './Calendar1'
function App() {
  return (
    <div className="App">
     <Calendar1/>
    </div>
  );
}

export default App;

 

 

Summary

 

In this article, I have discussed how to create FullCalendar in a React application.