# Displaying a Full Month in Agenda View

## Environment

<table>
	<tbody>
		<tr>
			<td>Product</td>
			<td>Progress® Kendo UI® for Angular Scheduler</td>
		</tr>
	</tbody>
</table>

## 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

> The Agenda view provides the [`numberOfDays`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendaviewcomponent#numberOfDays) property to control how many days are displayed.

This article demonstrates how to dynamically calculate and update this value to show a full month in the Agenda view.

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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#navigate) event of the Scheduler and determine the currently navigated month and year depending on the type of the performed [`action`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/navigateevent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/next), and if the type is [`Prev`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/agendaviewcomponent#numberofdays) property with the calculated value and set the [`selectedDate`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/scheduler-full-month-agenda-view/source.txt)

## See Also

* [Kendo UI for Angular Scheduler Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler)
* [Kendo UI for Angular Scheduler Agenda View](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/agenda)
* [API Reference of the Scheduler Component](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)