What are the attributes that are used in the Fullcalendar components

The FullCalendar component in a React project has various attributes (also referred to as props) that you can use to customize the calendar’s behavior and appearance. Here are some of the most commonly used attributes:

1. plugins: An array of plugins you want to use with the calendar. Plugins add additional views and functionalities.

plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}

2.initialView: Sets the initial view when the calendar loads.

initialView="dayGridMonth"

3.events: An array of event objects or a URL to fetch events from. Each event object can contain various properties such as title, start, end, allDay, etc.

events={[
  { title: 'Event 1', date: '2024-07-01' },
  { title: 'Event 2', date: '2024-07-02' }
]}

4.dateClick: A callback function that gets called when a date is clicked.

dateClick={handleDateClick}

5.eventClick: A callback function that gets called when an event is clicked.

eventClick={handleEventClick}

6.headerToolbar: Defines the buttons and layout of the calendar’s header.

headerToolbar={{
 left: 'prev,next today',
 center: 'title',
 right: 'dayGridMonth,timeGridWeek,timeGridDay'
}}

7.footerToolbar: Defines the buttons and layout of the calendar’s

 footer.footerToolbar={{
 left: 'prev,next today',
 center: 'title',
 right: 'dayGridMonth,timeGridWeek,timeGridDay'
}}

8.height: Sets the height of the calendar.

height="auto"

9.weekends: A boolean that determines whether to display weekend days.

weekends={false}

10.initialDate: Sets the initial date displayed when the calendar loads.

initialDate="2024-07-01"

11.editable: A boolean that allows users to drag and resize events.

editable={true}

12.selectable: A boolean that allows users to select multiple days or time slots.

selectable={true}

13.select: A callback function that gets called when a selection is made.

select={handleSelect}

14.eventDrop: A callback function that gets called when an event is dragged to a different date or time.

eventDrop={handleEventDrop}

15.eventResize: A callback function that gets called when an event is resized.

eventResize={handleEventResize}

16.locale: Sets the locale of the calendar to support different languages.

locale="es"

17.timeZone: Sets the time zone for displaying events.

timeZone="UTC"

Here is an example of a FullCalendar component with several attributes configured:

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';


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


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


  const handleEventClick = (info) => {
    alert('Event: ' + info.event.title);
  };


  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      dateClick={handleDateClick}
      eventClick={handleEventClick}
      events={[
        { title: 'Event 1', date: '2024-07-01' },
        { title: 'Event 2', date: '2024-07-02' }
      ]}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      footerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      height="auto"
      weekends={true}
      initialDate="2024-07-01"
      editable={true}
      selectable={true}
    />
  );
};


export default MyCalendar;