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.
  1. npx create-react-app reactpartone
Install FullCalendar
Now install fullcalendar using the following commands
  1. npm install @fullcalendar/core
  2. npm install @fullcalendar/react @fullcalendar/daygrid
  3. npm install @fullcalendar/timegrid
Now install Bootstrap in this project by using the following command.
  1. npm install --save bootstrap
Now, open the index.js file and add Bootstrap reference.
  1. 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,
  1. import "@fullcalendar/core/main.css";
  2. import "@fullcalendar/daygrid/main.css";
  3. import FullCalendar from "@fullcalendar/react";
  4. import dayGridPlugin from "@fullcalendar/daygrid";
Now add the following code in this component
  1. import React, { Component } from 'react'
  2. import "@fullcalendar/core/main.css";
  3. import "@fullcalendar/daygrid/main.css";
  4. import FullCalendar from "@fullcalendar/react";
  5. import dayGridPlugin from "@fullcalendar/daygrid";
  6. const events = [{ title: "Today", date: new Date() }];
  7. export class Calendar extends Component {
  8. render() {
  9. return (
  10. <div className="container">
  11. <div className="row title" style={{ marginTop: "20px" }} >
  12. <div class="col-sm-12 btn btn-info">
  13. FullCalendar In React Application
  14. </div>
  15. </div>
  16. <FullCalendar
  17. defaultView="dayGridMonth"
  18. plugins={[dayGridPlugin]}
  19. events={events}
  20. />
  21. </div>
  22. )
  23. }
  24. }
  26. export default Calendar
Now open App.js file and add the following code,
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import Calendar from './Calendar'
  5. function App() {
  6. return (
  7. <div className="App">
  8. <Calendar/>
  9. </div>
  10. );
  11. }
  13. 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.
  1. import React, { Component } from 'react'
  2. import FullCalendar from "@fullcalendar/react";
  3. import dayGridPlugin from "@fullcalendar/daygrid";
  4. import timeGridPlugin from "@fullcalendar/timegrid";
  6. import "@fullcalendar/core/main.css";
  7. import "@fullcalendar/daygrid/main.css";
  8. import "@fullcalendar/timegrid/main.css";
  10. const events = [{ title: "Today", date: new Date() }];
  11. export class Calendar1 extends Component {
  12. render() {
  13. return (
  14. <div className="container">
  15. <div className="row title" style={{ marginTop: "20px" }} >
  16. <div class="col-sm-12 btn btn-info">
  17. FullCalendar In React Application
  18. </div>
  19. </div>
  20. <FullCalendar
  21. defaultView="dayGridMonth"
  22. header={{
  23. left: "prev,next",
  24. center: "title",
  25. right: "dayGridMonth,timeGridWeek,timeGridDay"
  26. }}
  27. plugins={[dayGridPlugin, timeGridPlugin]}
  28. events={events}
  29. />
  30. </div>
  31. )
  32. }
  33. }
  35. export default Calendar1
Now open App.js file and add the following code,
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import Calendar1 from './Calendar1'
  5. function App() {
  6. return (
  7. <div className="App">
  8. <Calendar1/>
  9. </div>
  10. );
  11. }
  13. export default App;

Summary

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