How To Create a Calendar in Reactjs App

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.

Thank you for reading!

#react #reactjs #javascript