New to Kendo UI for Angular? Start a free 30-day trial

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 the startTime and endTime options.
  • allDaySlot—Toggles the all day slot.

For the full list of configuration options, refer to the DayViewComponent, MultiDayViewComponent, WeekViewComponent, and WorkWeekViewComponent.

Example
View Source
Change Theme:

Grouping by Resources

You can configure the Day, Multi-Day, Week, and Work Week views to display events that are grouped by a resource.

Example
View Source
Change Theme:

Current Time Marker

By default, the current time marker is enabled if the current date and time are visible in the view-range.

The Scheduler can receive a currentTimeMarker input. These settings are applied to all of its views. However, if currentTimeMarker settings are passed to a given view individually (for example, Day view), that takes precedence.

Example
View Source
Change Theme:

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:

Example
View Source
Change Theme:

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 startTime and endTime options of the Scheduler component.
  • To set the length of the time slots, use the slotDuration property.
  • To divide a time slot, use the slotDivisions property.
Example
View Source
Change Theme: