@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

Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions

View the docs »

This package was created from the FullCalendar monorepo »

Changelog

5.0.0 (2020-06-21)

Changes since RC:

• CSS fix for timegrid events. overflow hidden on time text
• fix where dayMaxEvents would not readjust when increasing height of calendar
• don't set custom text colors on list-view events or list-item events (#5518)
• fix event dot color not being customizable (#5522)
• fix for calendar updating when no options were reset (#5519)
• fix typescript def omission of eventSource 'method' prop (#5505)
• fix typescript def problem with schedulerLicenseKey again (#5462)