Multi-Week View
A Scheduler with a Multi-Week view allows a user to view and manage their schedule over a period of multiple weeks.
Configuration
The Multi-Week view provides the following common settings:
numberOfWeeks—Defines the number of weeks that will be displayed.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 MultiWeekViewComponent.
The starting week period is determined by the selectedDate option of the SchedulerComponent. If the selectedDate is not set, the current date is used.
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 Multi-Week 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.
Grouping by Resources
You can configure the Multi-Week view to display events that are grouped by a resource.
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: