In this article, I will explain how to create FullCalendar in a ReactJS application.
Prerequisites
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