@fullcalendar/interaction
Advanced tools
Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions
@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.
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);
}
}
}
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 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 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.
Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions
This package was created from the FullCalendar monorepo »
5.3.0 (2020-08-12)
bugfixes:
FAQs
Calendar functionality for event drag-n-drop, event resizing, date clicking, and date selecting
The npm package @fullcalendar/interaction receives a total of 468,246 weekly downloads. As such, @fullcalendar/interaction popularity was classified as popular.
We found that @fullcalendar/interaction demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.