# Month View

The **Month** view displays a high-level schedule overview organized by weeks.

## Configuration

The **Month** view provides the following common settings:

* [`eventHeight`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent#eventheight)—Represents the height of each event.
* [`eventsPerDay`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent#eventsperday)—Sets the number of events to be rendered in a day slot.
* [`adaptiveSlotHeight`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent#adaptiveslotheight)—Determines whether the slots will adapt their height to the number of displayed events.

For the full list of configuration options, refer to the [`MonthViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent).

> For configuration options shared across all views (current time marker, ongoing event highlighting, first day of week), see [View Features](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/view-features).

### Configuring the Height of the Scheduler Events

By setting a specific number value to the `eventHeight` property, you can configure a desired fixed height that will apply to all events in the Scheduler.

The **Month** view of the component also enables you to automatically adapt the height of each event based on its content by setting `eventHeight` to `'auto'`.

> When the `eventHeight` property is set to `'auto'`, the `adaptiveSlotHeight` property will be automatically set to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/month/config/event-height/source.txt)

### Setting the Number of Events per Day

You can specify the maximum number of events to be rendered per day slot by setting a particular number value to the `eventsPerDay` property. If you set this property to `'auto'`, all events will be displayed for the respective slot.

The following configuration shows two events per day and includes the **Day** view.

```html
<kendo-scheduler [kendoSchedulerBinding]="events" [selectedDate]="selectedDate">
	<kendo-scheduler-month-view [eventsPerDay]="2"></kendo-scheduler-month-view>
	<kendo-scheduler-day-view></kendo-scheduler-day-view>
</kendo-scheduler>
```

> When the `eventsPerDay` property is set to `'auto'`, the `adaptiveSlotHeight` property will be automatically set to `true`.

The example below demonstrates how to change the number of events per day.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/month/config/events-per-day/source.txt)

### Enabling the Adaptive Slot Height of the Scheduler

By default, the height of the Scheduler slots is not adaptive. To configure the height of each slot group (row) to adapt to the maximum number of displayed events, set the `adaptiveSlotHeight` property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/month/config/adaptive-slot-height/source.txt)

## Customizing More Events Button Behavior

When the number of events in a day slot exceeds the available space (either naturally or through the [`eventsPerDay`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent#eventsperday) limit), the Month view renders a **more events** button.
When the user clicks it, the Month view fires the [`moreEventsClick`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/monthviewcomponent#moreeventsclick) event.

By default, the Scheduler navigates to the Day view for the clicked date.
To override this behavior, call [`preventDefault()`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/moreeventsclickevent#preventdefault) method in your handler and implement the necessary logic.

The event arguments are provided through the [`MoreEventsClickEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/moreeventsclickevent) type.
You can show a preview UI, or navigate to another view, by using the [`displayedEvents`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/moreeventsclickevent#displayedevents) and [`moreEvents`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/moreeventsclickevent#moreevents) collections.

The following example demonstrates how to render a Popover with the list of all events for the current day and a choice to navigate to the Day or Agenda views.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/month/more-events-click/source.txt)

## Suggested Links

* [Scheduler Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/resources-grouping)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)