Month View
The Month view displays a high-level schedule overview organized by weeks.
Configuration
The Month view provides the following common settings:
eventHeight—Represents the height of each event.eventsPerDay—Sets the number of events to be rendered in a day slot.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.
For configuration options shared across all views (current time marker, ongoing event highlighting, first day of week), see 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
eventHeightproperty is set to'auto', theadaptiveSlotHeightproperty will be automatically set totrue.
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.
When the
eventsPerDayproperty is set to'auto', theadaptiveSlotHeightproperty will be automatically set totrue.
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.
Customizing More Events Button Behavior
When the number of events in a day slot exceeds the available space (either naturally or through the eventsPerDay limit), the Month view renders a more events button.
When the user clicks it, the Month view fires the moreEventsClick event.
By default, the Scheduler navigates to the Day view for the clicked date.
To override this behavior, call preventDefault() method in your handler and implement the necessary logic.
The event arguments are provided through the MoreEventsClickEvent type.
You can show a preview UI, or navigate to another view, by using the displayedEvents and 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.