Docs Event Dragging & Resizing

It’s possible to take elements that live outside of a calendar and make them drag-and-droppable. When they are dropped on a specific date of a calendar, a new event might be created and certain callbacks might fire. It is possible to achieve this using FullCalendar alone, without any third party libraries.

It’s possible to initialize two or more separate Calendars, and then allow the user to drag events between the calendars!

It’s possible to leverage a third-party library to do your external element drag-n-drop instead of using FullCalendar. You might want to do this if you prefer the visual effects of another library, need “sorting” functionality, or need the ability to drag-n-drop between multiple containers, functionality that FullCalendar does not have.

Determines whether the events on the calendar can be modified.

Allow events’ start times to be editable through dragging.

Whether the user can resize an event from its starting edge.

Allow events’ durations to be editable through resizing.

Determines whether the user can drag events between resources.

Determines if external draggable elements or events from other calendars can be dropped onto the calendar.

How many pixels the user’s mouse/touch must move before an event drag activates.

Time it takes for an event to revert to its original position after an unsuccessful drag.

Whether to automatically scoll the scroll-containers during event drag-and-drop and date selecting.

The time interval at which a dragged event will snap to the time axis. Also affects the granularity at which selections can be made.

Determines how an event’s duration should be mutated when it is dragged from a timed section to an all-day section and vice versa.

Determines if events being dragged and resized are allowed to overlap each other.

Limits event dragging and resizing to certain windows of time.

Exact programmatic control over where an event can be dropped.

Provides a way to filter which external elements can be dropped onto the calendar.

Triggered when event dragging begins.

Triggered when event dragging stops.

Triggered when dragging stops and the event has moved to a different day/time.

Called when an external draggable element or an event from another calendar has been dropped onto the calendar.

Called when an external draggable element with associated event data was dropped onto the calendar. Or an event from another calendar.

Triggered when on a calendar when one if its events is about to be dropped onto another calendar.

Triggered when event resizing begins.

Triggered when event resizing stops.

Triggered when resizing stops and the event has changed in duration.

Limits which dates the user can navigate to and where events can go.

FullCalendar’s Touch support includes smooth scrolling, time-range selection via long-press, and event drag-n-drop/resizing via long-press.