Displaying a Full Month in Agenda View

Environment

Product

Progress® Kendo UI® for Angular Scheduler

Description

How can I display each month entirely in the Agenda view of the Scheduler, ensuring that all days are present based on the corresponding month?

Solution

To display each month entirely in the Agenda view of the Scheduler and ensure that all days are present regardless of the varying number of days per month:

1. Handle the navigate event of the Scheduler and determine the currently navigated month and year depending on the type of the performed action:

   html

   <kendo-scheduler
       [kendoSchedulerBinding]="events"
       [selectedDate]="selectedDate"
       style="height: 600px;"
       (navigate)="onNavigate($event)"
   >
       <kendo-scheduler-agenda-view [numberOfDays]="numberOfDays"></kendo-scheduler-agenda-view>
   </kendo-scheduler>

   ts

   public onNavigate(e: NavigateEvent): void {
       let type = e.action.type;
   
       if (type === 'next') {
           this.incrementOnNext();
           this.setNumberOfDayBasedOnMonth();
       } else if (type === 'prev') {
           this.decrementOnPrev();
           this.setNumberOfDayBasedOnMonth();
       }
   }

   • Increment the current month if the navigation action is of type Next, and if the type is Prev, decrement the month correspondingly. In a similar manner, update the value of the current year when the first or twelfth month was navigated to indicate that the year has changed:

     ts

     private incrementOnNext(): void {
         if (this.currentMonth === 12) {
             this.currentMonth = 1;
             this.currentYear++;
         } else {
             this.currentMonth++;
         }
     }
     
     private decrementOnPrev(): void {
         if (this.currentMonth === 1) {
             this.currentMonth = 12;
             this.currentYear--;
         } else {
             this.currentMonth--;
         }
     }

2. Implement a separate method that calculates the number of days for each specific month and year. Then, update the numberOfDays property with the calculated value and set the selectedDate option to the first day of the current month:

   ts

   private setNumberOfDayBasedOnMonth(): void {
       this.numberOfDays = new Date(this.currentYear, this.currentMonth, 0).getDate();
       this.selectedDate = new Date(this.currentYear, this.currentMonth - 1, 1);
   }

The following example demonstrates how to display a full month in the Agenda view of the Scheduler.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Scheduler Overview
• Kendo UI for Angular Scheduler Agenda View
• API Reference of the Scheduler Component