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

Timeline Views

The Timeline, Timeline Week, and Timeline Month views display events on a continuous time-scale.

Configuration

The Timeline, Timeline Week, and Timeline Month 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.
  • eventHeight—The height of each event.

For the full list of configuration options, refer to the TimelineViewComponent, TimelineWeekViewComponent, and TimelineMonthViewComponent.

Example
View Source
Change Theme:

Grouping by Resources

You can configure the Timeline views to display events that are grouped by a resource.

Example
View Source
Change Theme:

Setting the First Weekday

The first day of the week for Timeline Week view 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:

Specifying the Timeline Visible Range

To customize the visible range of the Timeline, Timeline Week and Timeline Month views set the numberOfDays, numberOfWeeks and numberOfMonths option for the respective view.

Example
View Source
Change Theme: