New to Kendo UI for Angular? Start a free 30-day trial

Custom Remove Dialog in Kendo UI for Angular Scheduler

Environment

Product

Progress® Kendo UI® for Angular Scheduler

By default, the Kendo UI for Angular Scheduler displays a confirmation dialog when an event is removed. This dialog cannot be customized, but you can prevent it from appearing and implement your custom dialog logic.

This Knowledge Base article also answers the following questions:

How to prevent the default delete confirmation dialog in the Kendo UI for Angular Scheduler?
How to implement a custom delete confirmation dialog in the Kendo UI for Angular Scheduler?
How to replace the default delete confirmation dialog in the Kendo UI for Angular Scheduler?

Solution

To replace the default remove confirmation dialog with a custom one and prevent the default dialog from appearing:

Enable editing and add the remove event to the Scheduler component. This allows you to handle the removal of an event manually.
html
```
<kendo-scheduler (remove)="removeHandler($event)">
    
</kendo-scheduler>
```

In the removeHandler method, call preventDefault on the event argument to prevent the Scheduler's default remove confirmation dialog from being displayed.

typescript

import { Component } from '@angular/core';
import { RemoveEvent } from '@progress/kendo-angular-scheduler';

@Component({
    selector: 'my-app',
    template: `
        <kendo-scheduler [editable]="true" (remove)="removeHandler($event)">
            <!-- Scheduler configuration -->
        </kendo-scheduler>
    `
})
export class AppComponent {
    public removeHandler(ev: RemoveEvent): void {
        ev.preventDefault();
    }
}

Implement your custom dialog logic within the removeHandler method. For example, you can render the HTML dialog in the component template and show/hide it based on the user interaction.

html

<kendo-scheduler [events]="events" [editable]="true" (remove)="removeHandler($event)">
    <!-- Scheduler configuration -->
</kendo-scheduler>

<dialog>
    <h2 class="dialog-title">Confirm Deletion</h2>
    <p class="dialog-message">Are you sure you want to delete this event?</p>
    <div class="dialog-buttons">
        <button kendoButton themeColor="error" class="dialog-button confirm" (click)="confirmDeletion()">Yes</button>
        <button kendoButton themeColor="primary" class="dialog-button cancel" (click)="cancelDeletion()">No</button>
    </div>
</dialog>

typescript

public events: SchedulerEvent[] = [
{
  id: 1,
  title: 'Morning Strategy Talk with Stefan',
  start: new Date('2024-10-22T09:00:00'),
  end: new Date('2024-10-22T10:30:00'),
}];

public removeHandler(ev: RemoveEvent): void {
    ev.preventDefault();
    this.eventToRemove = ev;

    if (this.dialogRef) {
        this.dialogRef.showModal();
    }
}

public confirmDeletion(): void {
    if (this.eventToRemove) {
        this.events = [
            ...this.events.filter(
                (event) => event.id !== this.eventToRemove?.event.id
            ),
        ];
        this.eventToRemove = null;

        if (this.dialogRef) {
            this.dialogRef.close();
        }
    }
}

public cancelDeletion(): void {
    this.eventToRemove = null;

    if (this.dialogRef) {
        this.dialogRef.close();
    }
}

The following implementation demonstrates the custom remove dialog in action. Hover over the event and click the X delete icon to see the custom dialog.

Change Theme

Theme

Loading ...

Custom Remove Dialog in Kendo UI for Angular Scheduler

Environment

Description

Solution

See Also