Scheduler - Resize

#Usage

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

<Scheduler.Root editable event-duration-editable :snap-duration="snapDuration" @event-resize-start="onEventResizeStart" @event-resize-stop="onEventResizeStop">
    <!-- Scheduler parts -->
</Scheduler.Root>

Resize behavior is configured on the root editing surface. Enable duration editing, set a snap interval, and persist the accepted duration from the resize events.

#Resize Options

snapDuration is a number of minutes used to round resize changes.

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

const snapDuration: NonNullable<SchedulerProps['snapDuration']> = 15;

Keep it as a named binding when timeline and time-grid surfaces need to share the same rounding rule.

#Resize Handles

Enable resize handles on timed events so users can adjust duration directly in the grid.

#Snap Rules

Resize handles can follow the same snap duration used by the grid. Persist the accepted stop payload after the user releases the handle.

#View Support

Timed day, week, resource day, resource week, and timeline surfaces can expose duration handles when events are editable. Treat month and all-day resizing as a date-range edit flow unless the product explicitly provides a custom all-day range editor.

For persistence, save the final event-resize-stop result, not every move payload. If the backend rejects the duration, call revert() or replace the event with the last accepted value. The controlled event array stays the source of truth.

#API

Key APIs are eventDurationEditable, snapDuration, timelineSnapDuration, eventAllow, eventConstraint, @event-resize-start, @event-resize, and @event-resize-stop.

#Related Docs

• Drag and Drop
• Day View