Showing a ContextMenu for a Selected Calendar Date

Environment

Product

Progress® Kendo UI for Angular Calendar

Description

How can I show a ContextMenu for a selected date inside the Kendo UI for Angular Calendar?

Solution

To achieve the desired scenario:

1. Handle the contextmenu event in the Calendar component.

html

<kendo-calendar [value]="value" type="infinite" (contextmenu)="onRightClick($event)"></kendo-calendar>

2. Retrieve the class name of the current cell when the contextmenu event fires. If the clicked date contains k-state-selected class, prevent the default click event and render the ContextMenu component. Use show method of the component to toggle its visibility.

ts

public onRightClick(event: MouseEvent): void {
        const classNameOnContext = (event.composedPath()[1] as Element).className;
        if (classNameOnContext.includes('k-state-selected')) {
            event.preventDefault();
            this.calendarMenu.show({
                left: event.x,
                top: event.y
            });
        }
    }

The following example shows the full implementation of the suggested approach.

Change Theme

Theme

Loading ...