Scheduler - Drag and Drop

Move events in week, resource, and constrained schedules.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root editable event-start-editable :event-allow="eventAllow" @event-drag-start="onEventDragStart" @event-drop="onEventDrop">
    <!-- Scheduler parts -->
</Scheduler.Root>

Drag and drop is configured on the root interaction surface. Enable editing, optionally constrain drops with event-allow, and persist accepted moves from event-drop.

#Drop Validation

eventAllow is a callback that receives each proposed drag target before Scheduler accepts the move. Return true to allow the drop or false to reject it.

import type { EventAllowCallback } from '@primeui/vue-scheduler';

const eventAllow: EventAllowCallback = (dropInfo, draggedEvent) => {
    return dropInfo.resourceId === undefined || dropInfo.resourceId === draggedEvent.resourceId;
};

dropInfo includes start, end, allDay, view, and optional resourceId. Use the callback for blocked intervals, permission checks, resource limits, or backend rules that need to reject a drop.

#Timed Drag

Drag-enabled timed events can move between week slots. All-day rows and slot settings show how the parent receives the updated range.

Loading Demo...

#Resources

Resource drag and drop exposes resource ids, row or column UI, and resource-specific payloads.

Loading Demo...

#Blocked Drops

Blocked intervals and eventAllow can reject proposed moves while the drag pipeline still handles pointer capture, collision checks, drop validation, and event geometry.

Loading Demo...

#API

Key APIs are editable, eventStartEditable, @event-drop, eventAllow, eventConstraint, dragMinDistance, dragRevertDuration, dragScroll, snapDuration, and blocked interval constraints.