# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelineviewcomponent), [`TimelineWeekViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelineweekviewcomponent), and [`TimelineMonthViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelinemonthviewcomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/timeline/config/source.txt)

> For configuration options shared across all views (current time marker, ongoing event highlighting, work hours display), see [View Features](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/view-features).

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#starttime) and [`endTime`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#endtime) options of the Scheduler component.
* To set the length of the time slots, use the [`slotDuration`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#slotduration) property.
* To divide a time slot, use the  [`slotDivisions`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#slotdivisions) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/timeline/time-slot-configuration/source.txt)

## Specifying the Timeline Visible Range

To customize the visible range of the **Timeline**, **Timeline Week** and **Timeline Month** views set the [`numberOfDays`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelineviewcomponent#numberofdays), [`numberOfWeeks`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelineweekviewcomponent#numberofweeks) and [`numberOfMonths`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/timelinemonthviewcomponent#numberofmonths) option for the respective view.

The following example demonstrates the interactive configuration of time slots in the Timeline views.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/timeline/custom-range/source.txt)

## Suggested Links

* [Scheduler Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/resources-grouping)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)