# 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/data-binding).

To enable all edit modes in the Scheduler, set its [`editable`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#editable) property to `true`.

```vue
<Scheduler :editable="true" />
```

To configure which edit modes will be enabled, set the `editable` property to an object of type [`EditableProp`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/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 the `DataItem` which is associated with the clicked event.
* `drag`—Changes the `start` and `end` settings, or the provided [resources](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/resources) configuration of the `DataItem`.
* `resize`—Changes the duration of the `DataItem`.
* `edit`—Provides advanced editing through a form component.
* `select`—Select events and slots.

```vue
<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`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#ondatachange) 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-operations/editing/basic/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#quickcreate) to `false` to retain double-click and keyboard creation through the full editor:

```vue
<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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-operations/editing/quick-create/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/timezones).

The overview is enabled by default. Set [`eventOverview`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#eventoverview) to `false` to disable it:

```vue
<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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/keyboard-navigation#event-overview-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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-operations/editing/event-overview/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing/custom-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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-operations/editing/date-time-selection/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/globalization).

## 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing/custom-form#customizing-the-recurrence-summary) through [`recurrenceSummaryTemplate`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerformeditorprops#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 `Escape` returns 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/globalization) 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/data-operations/editing/recurring-events/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing/custom-form)
* [Scheduler - Set Edit Form Initial Values](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing/default-values)
* [Scheduler - Custom Validation Messages](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/editing/custom-validation-messages)

## Suggested Links

* [Data Binding in the Kendo UI for Vue Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/data-binding)
* [Grouping in the Kendo UI for Vue Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/grouping)
* [Handling the Scheduler Resources](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/resources)
* [API Reference of the SchedulerDataChangeEvent](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerdatachangeevent)