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

Customizing the More Events Button Behavior in Scheduler Month View

Environment

Product

Progress® Kendo UI® for Angular Scheduler

When a single day slot contains multiple events in the Month view of the Scheduler, a more events button with three dots appears. By default, clicking this button navigates to the Day view, in which the event is present.

This article demonstrates how to change the default behavior so that clicking the more events button navigates to a different view of the Scheduler containing that day instead.

This Knowledge Base article also answers the following questions:

How can I change the view when clicking on more events in the Scheduler Month view?
Is it possible to navigate to a different view instead of the Day view from the Month view in the Scheduler?
How do I override the default more events button action in the Scheduler's Month view?

Solution

To customize the behavior of the more events button in the Scheduler's Month view:

Handle the navigate event and prevent its default behavior when the type of the event action is ShowDate.
Change the current view by setting the selectedViewIndex property to the index of the desired view. The index depends on the order of the views defined in the Scheduler configuration.

Set the selectedDate property to the date of the event action to navigate to the particular week containing the clicked date.

html

<kendo-scheduler 
  [kendoSchedulerBinding]="events"
  [selectedDate]="selectedDate" 
  [selectedViewIndex]="viewIndex"
  (navigate)="onNavigate($event)"
  >
    <kendo-scheduler-agenda-view> </kendo-scheduler-agenda-view>
    <kendo-scheduler-month-view [eventHeight]="30">
    </kendo-scheduler-month-view>
</kendo-scheduler>

public onNavigate(event: NavigateEvent): void {
  if (event.action.type === 'show-date') {
    event.preventDefault();
    this.viewIndex = this.viewIndex === 1 ? 0 : 1;
    this.selectedDate = event.action.date;
  }
}

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

Change Theme

Theme

Loading ...

Customizing the More Events Button Behavior in Scheduler Month View

Environment

Description

Solution

See Also