@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.2.0 (2020-07-30)

features:

• provide browser-global JS file for all packages (#5617)
• indicate which row (or format) is being rendered in slotLabelContent (#5516)
• nepali locale (#5574)

bugfixes:

• compatible with server-side rendering (SSR) (#4784)
• background events don't fire eventClick in daygrid when clicked on day header (#5560)
• background events don't fire eventClick in timegrid (#5579)
• bigger touch hit area for selected list-item events in daygrid (#5635)
• CustomButtonInput click argument type is incorrect (#5432)
• parse rrule strings the same as objects (#5326)
• navLinks are not clickable if slotLabelFormat is a moment format (#5317)
• unswitch CSS variables in v-event.css (#5552)
• time slots not aligned to labels with dayMinWidth and Bootstrap theme (#5600)
• expandRows broken for time slat labels when horizontal scrolling (#5674)
• render method not rerendering resourceLabelContent (#5586)
• eventReceive/eventLeave is missing revert and relatedEvents (#5610)
• daygrid event changes between list-item and block, depending on start date (#5634)
• default scrollTime is not appropriate for month/year view (#5645)
• naturalBound is null with CSP (#5556)
• does not support Content Security Policy (CSP) nonce, only unsafe-inline css (#4317)
• RTL timeline scrolling messed up with nowIndicator (#5632)
• scrollTime does not always work when changing views (#5351)
• (p)react maximum recursion with specific resize/scrollbars (#5558, #5606)
• dayGridMonth overflows in Firefox (#5524)