Editing
The Scheduler enables you to create, update, and delete its events.
Getting Started
The Scheduler provides a dataItems property and a datachange event to allow full user control. For more information on handling data changes, refer to the article on data binding.
To enable all edit modes in the Scheduler, set its editable property to true.
<Scheduler :editable="true" />To configure which edit modes will be enabled, set the editable property to an object of type EditableProp with your custom configuration.
The EditableProp option provides the following options:
add—Allows creating events through quick create or by double-clicking a time or day slot to open the full editor.remove—Allows the deletion of theDataItemwhich is associated with the clicked event.drag—Changes thestartandendsettings, or the provided resources configuration of theDataItem.resize—Changes the duration of theDataItem.edit—Provides advanced editing through a form component.select—Select events and slots.
<Scheduler
:editable="{
add: true,
remove: true,
drag: true,
resize: true,
edit: true,
select: true
}"
/>The Scheduler provides the created, updated, and deleted data items through the datachange event.
The following example demonstrates how to allow editing in the Scheduler component and modify the local data based on the data supplied by the datachange event. To avoid the same id configurations on two data items, the following example uses guid from @progress/kendo-vue-common for the newly created data items.
Quick Create
When adding events is enabled, click an empty slot or focus it and press Enter to open a quick-create popover. The popover uses a 6px anchor margin. Enter a title and choose Save, or press Enter in the title field, to create the event through the Scheduler's datachange event.
The popover preserves the slot's start, end, all-day status, and grouped resources. More options opens the full editor with the title you have entered. Double-clicking a slot always opens the full editor without opening quick create first. Only one quick-create popover or event overview is displayed at a time, so opening one closes the other.
Quick create is enabled by default. Set quickCreate to false to retain double-click and keyboard creation through the full editor:
<Scheduler :editable="true" :quick-create="false" />Choose Cancel, press Escape, or click outside the popover to dismiss it without creating an event. The popover also closes when navigating to another date or view, or when the slot scrolls completely outside the visible Scheduler content. Saving, choosing Cancel, or pressing Escape returns focus to the slot without scrolling. An outside click retains the browser's normal focus behavior for the clicked element.
The example requires a title. Toggle Quick create in the configurator to turn the popover on or off.
Event Overview
Click an event or focus it and press Enter to open its overview popover. The popover uses a 6px anchor margin and displays the event title, date and time (or all-day status), and description. Double-clicking an editable event continues to open the full editor.
Times use the Scheduler's timezone.
The overview is enabled by default. Set eventOverview to false to disable it:
<Scheduler :editable="true" :event-overview="false" />The option controls new click and keyboard opens. Changing it does not dismiss an already-open overview or cancel a click that is already waiting for the double-click interval.
The Edit and Delete actions respect the corresponding editable permissions. Read-only events and a Scheduler with editing disabled still display event details without these actions. For recurring events, each action offers an occurrence or series scope; deleting still requires confirmation.
Press Escape while focus is inside the overview, or click outside it, to dismiss it. Overviews without actions leave focus on the event; use an outside click to dismiss them. The overview also closes when navigating to another date or view, or when its event scrolls completely outside the visible Scheduler content, including behind a sticky header or side column. Dismissal returns focus to the event without scrolling it back into view.
After dismissal, a single click or tap reopens the overview even if the event remains selected, including in adaptive layouts.
See Keyboard Navigation for the available shortcuts.
The Agenda view retains its task-based interaction and does not display event overviews.
This example includes recurring, read-only, and all-day events. Turn off Allow editing to hide Edit and Delete for all events.
Date and Time Selection
The default editor keeps the start and end values in sync:
- Changing the start moves the end by the same amount. Changing the end leaves the start unchanged and sets the duration used for the next start change.
- The end cannot precede the start. Equal start and end values are allowed.
- Time pickers offer 15-minute intervals and accept other valid times you type, such as 10:07.
- All-day events use date-only inputs and keep their duration in calendar days.
No additional settings are needed. To replace the date or time fields, use a custom editing form.
For timed events, choose Time zone to set event-specific timezones. Resetting them requires confirmation.
Open the one-hour meeting or all-day event below to try changing its dates and times.
Discarding Unsaved Changes
The full event editor asks you to confirm before discarding unsaved changes when you choose Cancel, close the dialog, press Escape, or use the browser's Back button. This applies when creating an event, editing a single occurrence, or editing a series.
Choose Cancel in the Discard changes dialog to return to the editor with your entered values retained. Choose Discard changes to abandon the edits and close the editor. If no values have changed, these actions close the editor without confirmation. Restoring all edited values to their original values also avoids the confirmation.
The browser's Back button dismisses the editor rather than navigating away from the page. Clicking outside the editor or the discard confirmation leaves the dialog open.
This confirmation is built into SchedulerForm. If you replace it through the Scheduler's form prop, your component must handle unsaved changes.
You can translate the confirmation title, message, and actions through the Scheduler's localization messages.
Customized Recurring Events
Choose Make recurring in the full editor to set a daily, weekly, monthly, or yearly pattern and an end condition. Save the recurrence dialog, then the event.
The editor shows Edit recurrence and a summary, which also appears in the recurrence dialog. Customize the summary through recurrenceSummaryTemplate; the button label stays localized. Removing recurrence requires confirmation. These controls are hidden when editing a single occurrence.
When you save, move, resize, or delete a series with individually edited occurrences, Keep or reset custom events? offers three choices:
- Keep custom events preserves the edited occurrences, their series links, and exception dates, so the series does not create duplicates.
- Reset custom events deletes the edited occurrences and clears the exception dates so the series follows the updated pattern.
- Cancel, closing the dialog, or pressing
Escapereturns to the editor without losing your changes.
When recurrence is removed or the series is deleted, Keep custom events makes the edited occurrences standalone events; Reset custom events deletes them. Removing recurrence also keeps the original event, even if its first occurrence was customized.
The confirmation appears in calendar and Agenda views, but not when editing a single occurrence or a series without exceptions. Use the recurrenceCustomEvents* localization messages for the dialog text.
In the demo, one daily occurrence has been moved to the afternoon. Edit the series to try keeping or resetting it.
Customization
The Scheduler provides configurations you can use to customize the editing form. For details about each customization option, see the following links:
- Scheduler - Custom Editing Form
- Scheduler - Set Edit Form Initial Values
- Scheduler - Custom Validation Messages