Day and Week Views
The Day, Multi-Day, Week, and Work Week views display events in a familiar calendar layout.
Configuration
The Day, Multi-Day, Week, and Work Week views provide the following common settings:
startTime—The first visible hour of the day.endTime—The last visible hour of the day.showWorkHours—Determines whether to show only working hours or the interval that is defined by thestartTimeandendTimeoptions.allDaySlot—Toggles the all day slot.
For the full list of configuration options, refer to the DayViewComponent, MultiDayViewComponent, WeekViewComponent, and WorkWeekViewComponent.
For configuration options shared across all views (current time marker, ongoing event highlighting, first day of week, work hours display), see View Features.
Multi-Day Timed Events
Timed events that cross midnight appear in the all-day area with time labels, even if they last less than 24 hours. Their dates and isAllDay values do not change.
Arrows at the sides of an event indicate that it starts before or ends after the visible date range. Single-day timed events stay in the time grid; all-day events have no time labels.
When the allDaySlot property is false, the all-day area is hidden and these events appear in the time grid. The Show all-day area checkbox in the example below switches between these layouts.
Configuring Time Slots within a Time Range
The Scheduler component allows you to configure a block of time with predefined time slots that are available for the users to book. It enables you to personalize the scheduling approach and achieve granularity:
- To set the range of time (block of time) where the time slots appear, use the
startTimeandendTimeoptions of the Scheduler component. - To set the length of the time slots, use the
slotDurationproperty. - To divide a time slot, use the
slotDivisionsproperty.
The following example demonstrates the interactive configuration of time slots in the Day and Week views.