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

Showing a ContextMenu for a Selected Calendar Date


ProductProgress® Kendo UI for Angular Calendar


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


To achieve the desired scenario:

  1. Handle the contextmenu event in the Calendar component.
<kendo-calendar [value]="value" type="infinite" (contextmenu)="onRightClick($event)"></kendo-calendar>
  1. 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.
public onRightClick(event: MouseEvent): void {
        const classNameOnContext = (event.composedPath()[1] as Element).className;
        if (classNameOnContext.includes('k-state-selected')) {
                left: event.x,
                top: event.y

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

View Source
Change Theme:

In this article

Not finding the help you need?