Scheduler - Add and Edit Events

#Usage

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

<Scheduler.Root :events="events" editable @event-click="onEventClick" @event-drop="onEventDrop" @event-resize-stop="onEventResizeStop">
    <!-- Scheduler parts -->
</Scheduler.Root>

Add and edit flows live on the root event surface. Control the event array, open forms from app commands or event clicks, then persist drag and resize changes from the emitted root events.

#Controlled Events

Parent-owned event state can drive a form-backed editor. A command can open a blank record, and @event-click can load the existing event into the same dialog. Save by replacing the matching event in the array. Delete by filtering it out.

#Selection Dialog Flow

Selection belongs in an add/edit workflow when the selected range becomes a draft event. Drag an empty range, copy the selected start and end into the form, then wait for Save before adding anything to events. Cancel should close the dialog without changing the schedule.

<Scheduler.Root :events="events" selectable selection-mode="range" editable @date-select="onDateSelect" @event-click="onEventClick">
    <!-- Scheduler parts -->
</Scheduler.Root>

<dialog v-model:visible="dialogVisible" modal>
    <!-- create/edit form seeded from the selected range -->
</dialog>

The dialog keeps range creation and event editing on the same path. @date-select opens a new draft, @event-click loads an existing event, and both actions save through the same validation and persistence logic.

#Persistence

Create drafts outside the committed events array until required fields pass validation. On save, insert the new event with a stable id. On cancel, drop the draft and leave the array unchanged. For edits, update by id and replace the array rather than mutating a nested object in place.

Drag and resize can optimistically update the event in the UI. Keep oldEvent or the provided revert() callback available until the backend accepts the change. Recurring events need an explicit scope decision before saving. One occurrence, future occurrences, and the full series are different persistence operations.

#API

Key APIs are editable, @event-click, @event-drop, @event-resize-stop, @event-add, @event-change, @event-remove, eventAllow, eventConstraint, and event identity fields. Use selectable, selection-mode, and @date-select only when the add flow starts from a selected date or time range.

#Related Docs

• Drag and Drop
• Resize