How to set and use the Fullcalendar.js in the react project

After installing FullCalendar.Js and importing the css to the component.

Set up the FullCalendar component:

Add the FullCalendar component to your render method and configure it with the desired plugins and options.

const MyCalendar = () => {
 const handleDateClick = (arg) => {
  alert('Date clicked: ' + arg.dateStr);
 };

 return (
  <FullCalendar
   plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
   initialView="dayGridMonth"
   dateClick={handleDateClick}
   events={[
    { title: 'Event 1', date: '2024-07-01' },
    { title: 'Event 2', date: '2024-07-02' }
   ]}
  />
 );
};

export default MyCalendar;

Add CSS for FullCalendar:

Import FullCalendar’s CSS files to style the calendar properly. Add the following imports at the top of your component or in your main CSS file.

import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/interaction/main.css';

Use the calendar component in your app:

Finally, use the calendar component in your app.

import React from 'react';
import MyCalendar from './MyCalendar';


const App = () => {
  return (
    <div>
      <h1>My React Calendar</h1>
      <MyCalendar />
    </div>
  );
};


export default App;