@fullcalendar/interaction

What is @fullcalendar/interaction?

@fullcalendar/interaction is an add-on for the FullCalendar library that provides a set of features to enable user interactions with the calendar. This includes functionalities like dragging and dropping events, resizing events, and selecting date ranges.

What are @fullcalendar/interaction's main functionalities?

Event Dragging

This feature allows users to drag and drop events within the calendar. The 'editable' property is set to true to enable this functionality.

{
  "import": "import interactionPlugin from '@fullcalendar/interaction';",
  "calendarOptions": {
    "plugins": ["interactionPlugin"],
    "editable": true,
    "events": [
      { "title": "Event 1", "start": "2023-10-01" },
      { "title": "Event 2", "start": "2023-10-02" }
    ]
  }
}

Event Resizing

This feature allows users to resize events by dragging the edges of the event. The 'editable' property is set to true to enable this functionality.

{
  "import": "import interactionPlugin from '@fullcalendar/interaction';",
  "calendarOptions": {
    "plugins": ["interactionPlugin"],
    "editable": true,
    "events": [
      { "title": "Event 1", "start": "2023-10-01", "end": "2023-10-02" },
      { "title": "Event 2", "start": "2023-10-02", "end": "2023-10-03" }
    ]
  }
}

Date Selection

This feature allows users to select date ranges on the calendar. The 'selectable' property is set to true, and a callback function is provided to handle the selection event.

{
  "import": "import interactionPlugin from '@fullcalendar/interaction';",
  "calendarOptions": {
    "plugins": ["interactionPlugin"],
    "selectable": true,
    "select": function(info) {
      alert('Selected range: ' + info.startStr + ' to ' + info.endStr);
    }
  }
}

Other packages similar to @fullcalendar/interaction

react-big-calendar

React Big Calendar is a full-featured calendar component for React. It offers similar functionalities such as drag-and-drop, resizing, and date selection. However, it is specifically designed for React, whereas @fullcalendar/interaction can be used with various frameworks.

tui-calendar

TUI Calendar is a JavaScript calendar library that provides a wide range of features including drag-and-drop, resizing, and date selection. It is similar to @fullcalendar/interaction but offers additional features like multiple view types and customizable themes.

dhtmlx-scheduler

DHTMLX Scheduler is a JavaScript event calendar that offers drag-and-drop, resizing, and date selection functionalities. It is highly customizable and provides a variety of views and configurations, making it a strong alternative to @fullcalendar/interaction.

README

FullCalendar Interaction Plugin

Calendar functionality for event drag-n-drop, event resizing, date clicking, and date selecting

Installation

Install the FullCalendar core package, the interaction plugin, and any other plugins (like daygrid):

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

Usage

Instantiate a Calendar with the necessary plugins and options:

import { Calendar } from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [
    interactionPlugin,
    dayGridPlugin
  ],
  initialView: 'dayGridMonth',
  editable: true, // important for activating event interactions!
  selectable: true, // important for activating date selectability!
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()

Changelog

6.0.2 (2022-12-27)

Standard/premium:

• FIX: unable to resize an event smaller after initial resize (#7099)

React:

• FIX: re-rendering loop error with navLink and dayCellContent (#7107)

Angular:

• FIX: resource content-injection, when resource element destroyed, throws JS error (#7105)

Vue 2:

• FIX: resource content-injection, when resource element destroyed, throws JS error