New to Kendo UI for AngularStart a free 30-day trial

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.

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.

Change Theme
Theme
Loading ...

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 eventsPerDay property is set to 'auto', the adaptiveSlotHeight property will be automatically set to true.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Grouping by Resources

You can configure the Month view to display events that are grouped by a resource.

Change Theme
Theme
Loading ...

Setting the First Weekday

The first day of the week is determined by the current locale. See the help article on Globalization.

To set a week start day other than the one provided by the locale, use the weekStart setting on the Scheduler component:

Change Theme
Theme
Loading ...