Docs Event Dragging & Resizing

edit doc

How to enable and control where the user can drag-n-drop and resize events. Start by setting the editable setting to true. If you want to allow external elements to be dropped onto your calendar, visit the droppable, drop, and eventReceive articles.

Flags

Determines whether the events on the calendar can be modified.

eventStartEditable

Allow events’ start times to be editable through dragging.

eventDurationEditable

Allow events’ durations to be editable through resizing.

eventResourceEditable

Determines whether the user can drag events between resources.

Determines if external jQuery UI draggables can be dropped onto the calendar.

Effects

dragRevertDuration

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

The opacity of an event while it is being dragged.

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.

Control

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

eventConstraint

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.

Callbacks

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 a valid external jQuery UI draggable has been dropped onto the calendar.

Called when a valid external jQuery UI draggable, containing event data, has been dropped onto the calendar.

eventResizeStart

Triggered when event resizing begins.

eventResizeStop

Triggered when event resizing stops.

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

See Also

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.

Dragging and Resizing before v2.1.0

For older versions of the library, dependency requirements for drag-n-drop and resizing.