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—for example, change tracking and validation work in the same way as in other forms.
Angular provides reactive and template-driven forms of which, currently, the Scheduler supports the reactive (model-driven) forms.
Support for editing in Angular template-driven 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 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 directive to enable editing of events loaded from local data.
Adding Resource Editing
The kendoSchedulerReactiveEditing 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.
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 input. The custom service handles the data operations that are defined by the 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 base class.
The following example demonstrates how to implement a custom service using the base class.
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 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 property to true and enable editing, for example, through the kendoSchedulerReactiveEditing directive as described in the 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:
<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.
Configuring the Form
The quick create popover and the full edit dialog use separate forms. When the kendoSchedulerReactiveEditing directive requests a form, the createFormGroup callback receives the 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:
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
});
}
// ...
}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.
For manual editing, the create event handler receives the CreateEvent.quickCreate property. When it is true, calling addEvent(formGroup, true) supplies the popover form.
<kendo-scheduler
[kendoSchedulerBinding]="events"
[quickCreate]="true"
(create)="onCreate($event)"
>
</kendo-scheduler>When the user selects More options, the create event fires again with quickCreate: false for the full 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.
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 or when editing is off.
Double-clicking an event opens the full 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 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.
Starting with Kendo UI for Angular 26.0.0, a single click opens the event overview popover by default. If your
eventClickhandler opens a custom details view, set theeventOverviewproperty tofalseto avoid opening both.
In the example below, clicking an event opens the event overview popover, while double-clicking it opens the full edit dialog. You can toggle Event Overview from Component Properties.
If you handle deletion manually, the 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.
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 directive. It opens when users double-click a slot or an event, select Edit in the event overview popover, or select More options in the quick create popover. It contains the event fields, such as title, start and end, time zones, description, and recurrence.
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.
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—Learn how to handle editing operations manually for custom requirements.
- Editing with Reactive Forms—Implement editing with reactive forms without using the built-in directives.
- External Editing—Use external forms or editors instead of the built-in popup editing.
- Drag and Drop from ListView—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 article.