How To Create a Calendar In a ReactJS Application

Loading

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.