# Editing Basics

The Kendo UI for Angular Scheduler lets users create, preview, update, and delete events.

Event operations are an essential feature of the Kendo UI Scheduler for Angular. As a native Angular component, the Scheduler is tightly integrated with the [Angular forms module](https://angular.dev/api/forms/FormsModule)—for example, change tracking and validation work in the same way as in other forms.

Angular provides [reactive and template-driven forms](https://angular.dev/guide/forms) of which, currently, the Scheduler supports the [reactive (model-driven) forms](https://angular.dev/guide/forms/reactive-forms).

> Support for editing in [Angular template-driven forms](https://angular.dev/guide/forms) is planned for future releases.

## Getting Started with Editing

The Scheduler provides built-in reactive directives that automate and simplify editing operations in Angular reactive forms. This approach requires minimal setup and handles most common editing scenarios.

### Automatic Editing Configuration

The [`kendoSchedulerReactiveEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive handles the necessary Scheduler events and enables you to skip the boilerplate code that is required to set up the Scheduler for editing with Angular reactive forms. The directive requires a `createFormGroup` input—you must set the input to a function that creates a `FormGroup` for the event model or, when the user adds a new event, for the new model.

The following example demonstrates how to use the `kendoSchedulerReactiveEditing` directive with the [`kendoSchedulerBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/data-binding#automatic-data-processing) directive to enable editing of events loaded from local data.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/editing/editing-directives/reactive-editing/source.txt)

### Adding Resource Editing

The [`kendoSchedulerReactiveEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive handles the editing of Scheduler resources. The corresponding values of the resources must be part of the `FormGroup` that is returned by the `createFormGroup` input.

The following example demonstrates how to use the `kendoSchedulerReactiveEditing` directive to edit resources.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/editing/editing-directives/reactive-editing-resources/source.txt)

### Connecting Custom Data Services

By default, the built-in editing directives modify the data that is passed to the Scheduler in memory. You can customize this behavior by implementing a custom service through the [`editService`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective#editservice) input. The custom service handles the data operations that are defined by the [`EditService`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/editservice) interface.

Custom services typically persist data through a table-based API such as OData. To reduce repetitive code, especially for editing recurring events, services can inherit from the [`BaseEditService`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/baseeditservice) base class.

The following example demonstrates how to implement a custom service using the base class.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/editing/reactive-editing-service/source.txt)

## Quick Create

The quick create functionality lets users add an event by title from an empty slot. A single click on the slot opens a popover instead of the full edit dialog.

The popover provides the following actions:

* **Save**—Creates the event.
* **Cancel**—Closes the popover without saving.
* **More options**—Opens the [full edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog) with the title and selected time range. Custom field values are not preserved.

### Enabling the Popover

The quick create functionality is off by default. To enable it, set the [`quickCreate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#quickcreate) property to `true` and enable editing, for example, through the [`kendoSchedulerReactiveEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive as described in the [automatic editing configuration](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#automatic-editing-configuration) section.

The `quickCreate` property of a view overrides the Scheduler setting. The functionality is unavailable in the Agenda and Year views. The following example enables quick create in the Week view but not in the Month view:

```html
<kendo-scheduler
    [kendoSchedulerBinding]="events"
    [kendoSchedulerReactiveEditing]="createFormGroup"
    [selectedDate]="selectedDate"
    [quickCreate]="true"
>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
    <kendo-scheduler-month-view [quickCreate]="false"></kendo-scheduler-month-view>
</kendo-scheduler>
```

In the example below, clicking an empty time slot opens the quick create popover, while double-clicking it opens the full editor. You can toggle **Quick Create** from **Component Properties**.

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

### Configuring the Form

The quick create popover and the [full edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog) use separate forms. When the [`kendoSchedulerReactiveEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive requests a form, the [`createFormGroup`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective#kendoschedulerreactiveediting) callback receives the [`quickCreate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/createformgroupargs#quickcreate) property, which indicates which form the Scheduler needs. The callback needs to return a different `FormGroup` for each case:

* `true`—You need to supply the form for the quick create popover. It contains only the controls that the popover displays, such as the event title.
* `false`—You need to supply the form for the full editor dialog, with a control for every field the editor displays.

The following snippets show both cases:

```ts Quick create form
public createFormGroup(args: CreateFormGroupArgs): FormGroup {
    const event = args.dataItem;

    if (args.quickCreate) {
        return this.formBuilder.group({
            title: [event.title, Validators.required],
            start: [event.start, Validators.required],
            end: [event.end, Validators.required],
            isAllDay: event.isAllDay
        });
    }
    // ...
}
```

```ts Full editor form
public createFormGroup(args: CreateFormGroupArgs): FormGroup {
    const event = args.dataItem;

    if (!args.quickCreate) {
        return this.formBuilder.group({
            title: [event.title, Validators.required],
            start: [event.start, Validators.required],
            end: [event.end, Validators.required],
            isAllDay: event.isAllDay,
            description: event.description
        });
    }
    // ...
}
```

A smaller form for the popover is useful when the full editor requires fields that the popover does not display. For example, if the full editor requires a `description` field, a popover form that includes the same required control cannot be saved because the popover has no input for it. To add fields and validation to the popover, use a [quick create template](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#quick-create-template).

For [manual editing](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/editing-reactive-forms), the [`create`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#create) event handler receives the [`CreateEvent.quickCreate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/createevent#quickcreate) property. When it is `true`, calling [`addEvent(formGroup, true)`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#addevent) supplies the popover form.

```html HTML
<kendo-scheduler
    [kendoSchedulerBinding]="events"
    [quickCreate]="true"
    (create)="onCreate($event)"
>
</kendo-scheduler>
```

```ts TypeScript
public onCreate(args: CreateEvent): void {
    const { sender, start, end, isAllDay, quickCreate } = args;

    if (quickCreate) {
        this.formGroup = this.formBuilder.group({
            title: ['', Validators.required],
            start: [start, Validators.required],
            end: [end, Validators.required],
            isAllDay
        });
        sender.addEvent(this.formGroup, true);
    } else {
        this.formGroup = this.createFullFormGroup(start, end, isAllDay);
        sender.addEvent(this.formGroup);
    }
}
```

When the user selects **More options**, the `create` event fires again with `quickCreate: false` for the [full edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog).

## Event Overview

The event overview functionality lets users preview the details of an event and choose to edit or delete it. Clicking an event, or focusing it and pressing `Enter`, opens a popover with the event title, date, time, and description. To customize the body of the popover, use an [event overview template](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates#event-overview-template).

When editing is enabled, the popover includes **Edit** and **Delete** actions. For recurring events, users can choose a single occurrence or the whole series. The actions are hidden for [read-only events](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/restrictions#read-only-events) or when editing is off.

Double-clicking an event opens the [full edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog). When the event overview functionality is off, pressing `Enter` opens the editor instead.

The event overview functionality is on by default. To turn it off, set the [`eventOverview`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#eventoverview) property to `false`. You can also set the property on individual views to override the Scheduler setting. The Agenda and Year views do not support it.

> caution Starting with Kendo UI for Angular 26.0.0, a single click opens the event overview popover by default. If your [`eventClick`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#eventclick) handler opens a custom details view, set the `eventOverview` property to `false` to avoid opening both.

In the example below, clicking an event opens the [event overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#event-overview) popover, while double-clicking it opens the [full edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#built-in-edit-dialog). You can toggle **Event Overview** from **Component Properties**.

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

If you handle deletion manually, the [`RemoveEvent.mode`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/removeevent#mode) property indicates whether the user chose an occurrence or the whole series. A prompt for the user to choose is needed only when `mode` is absent.

```ts
public removeHandler({ sender, dataItem, mode }: RemoveEvent): void {
    if (mode) {
        this.handleRemove(dataItem, mode);
    } else if (this.editService.isRecurring(dataItem)) {
        sender.openRecurringConfirmationDialog(CrudOperation.Remove)
            .pipe(filter(editMode => editMode !== undefined))
            .subscribe(editMode => this.handleRemove(dataItem, editMode));
    } else {
        sender.openRemoveConfirmationDialog().subscribe(shouldRemove => {
            if (shouldRemove) {
                this.editService.remove(dataItem);
            }
        });
    }
}
```

## Built-In Edit Dialog

The built-in edit dialog is the default form for creating and editing events with the [`kendoSchedulerReactiveEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective) directive. It opens when users double-click a slot or an event, select **Edit** in the [event overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#event-overview) popover, or select **More options** in the [quick create](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#quick-create) popover. It contains the event fields, such as title, start and end, time zones, description, and [recurrence](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/recurring-events).

The dialog applies the following behavior:

* Preserves the event duration when users change the start date or time.
* Does not accept end-date and end-time values before the start.
* Uses 15-minute steps in the time pickers.
* Asks users to confirm **Discard changes** when they close it with unsaved changes.

These constraints do not apply to a [custom edit dialog](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/custom-reactive-editing).

## Advanced Editing Approaches

For scenarios that require custom form layouts, external editing interfaces, or full control over the editing workflow, consider these approaches:

* [Custom Reactive Editing](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/custom-reactive-editing)—Learn how to handle editing operations manually for custom requirements.
* [Editing with Reactive Forms](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/editing-reactive-forms)—Implement editing with reactive forms without using the built-in directives.
* [External Editing](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/external-editing)—Use external forms or editors instead of the built-in popup editing.
* [Drag and Drop from ListView](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/drag-and-drop-listview-scheduler)—Enable dragging events from a ListView to the Scheduler.

## Editing Restrictions

For information about event editing restrictions based on time slots, user permissions, or other conditions, see the [Editing Restrictions](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/restrictions) article.

## Suggested Links

* [Angular Scheduler Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler)
* [`ReactiveEditingDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/reactiveeditingdirective)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)
* [Editing Restrictions](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/restrictions)
* [API Index of the Scheduler](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api)