Timeline View

Jun 21, 2021
5 minutes to read

The Timeline view displays appointments as horizontal bars along the timescales. This view allows users to quickly review appointment information for multiple resources.

Set the SchedulerControl.ActiveViewIndex property to the corresponding view index in the SchedulerControl.Views collection to show the view. This collection stores all views defined in the scheduler.

XAML

xaml

<dxsch:SchedulerControl ActiveViewIndex="0">
    <dxsch:TimelineView 
        x:Name="timelineView"/>
        <!---->
</dxsch:SchedulerControl>

Note

The SchedulerControl has all views enabled out-of-the-box. If you declare any view in XAML or create views using the SchedulerControl’s smart tag, only the explicitly declared views become available. You can specify any number of views with the same type and different settings.

The Timeline view is the TimelineView class in the Scheduler API. It inherits the ViewBase base class.

Updated Timeline View

v20.2 introduces an updated Timeline view that is enabled by default.

The updated Timeline view features the following enhancements over the previous version:

TimeScale is a new universal time scale that adapts to the current zoom level.
Per-pixel horizontal and vertical scrolling.
Resources with multiple appointments that occupy the same time slot can be expanded/collapsed.
Resource height adapts to uniformly fill the viewport.

Custom styles and templates defined for the Legacy view version are not compatible. Set the ViewMode property to Legacy to revert to the previous view version.

Time Scales

Use the TimeScales property to define time scales displayed in the Timeline View.

If you define multiple time scales, the scheduler displays the time scale that has the shortest duration of a single division:

Duration = ScaleUnit * UnitCount

Use the MinWidth property to specify the minimum allowed width of a single division. A time scale can only be shown if the Zoom value is small enough to accommodate the duration of at least a single division:

Zoom < Duration / MinWidth

The code snippet below illustrates how to define two time scales:

XAML

xaml

<dxsch:TimelineView>
    <dxsch:TimelineView.TimeScales>
        <!--duration of a single scale division is 1 hour-->
        <dxsch:TimeScale ScaleUnit="Hour" UnitCount="1" MinWidth="0"/>
        <!--duration of a single scale division is 3 minutes-->
        <dxsch:TimeScale ScaleUnit="Minute" UnitCount="30" MinWidth="60"/>
    </dxsch:TimelineView.TimeScales>
</dxsch:TimelineView>

The following image shows the result:

The TimeScaleMaxCount property specifies the maximum number of time scales displayed by the Scheduler. The image below illustrates the Timeline View with three time scales.

API

The following properties affect the view’s appearance and functionality:

View Mode	Property	Description
	TimelineView.ViewMode	Allows you to switch to the updated version of the Timeline View.
Standard	TimelineView.IntervalDuration	Specifies the interval available in the Timeline View. This is a dependency property.
Standard	TimelineView.ResourceMaxHeight	Specifies the maximum resource height in the collapsed state. This is a dependency property.
Standard	TimelineView.ShowCellControls	Specifies whether to generate and display CellControl instances. This is a dependency property.
Standard	TimelineView.TimeScaleMaxCount	Specifies the maximum number of time scales displayed by the Scheduler. This is a dependency property.
Standard	TimelineView.ViewportInterval	Returns the interval currently visible in the client. This is a dependency property.
Standard	TimelineView.Zoom	Specifies the current zoom level. This is a dependency property.
Standard	TimelineView.ZoomRange	Allows you to limit the zoom level. This is a dependency property.
Both	SchedulerControl.GroupType	Gets or sets the type of grouping applied to the Scheduler. This is a dependency property.
Both	SchedulerViewBase.ShowResourceHeaders	Gets or sets whether to display resource headers. This is a dependency property.
Both	SchedulerViewBase.ShowDayHeaders	Gets or sets whether to display day headers. This is a dependency property.
Both	TimelineView.TimeScales	Gets or sets the time intervals displayed in the Timeline view.
Both	TimelineView.SnapToCellsMode	Gets or sets the method of snapping appointments to time cells. This is a dependency property.
Both	TimelineView.AppointmentMinHeight	Gets or sets the minimum height of appointments in the Timeline View. This is a dependency property.
Both	TimelineView.AppointmentMinWidth	Gets or sets the minimum width of appointments in the Timeline View. This is a dependency property.
Both	TimelineView.StretchAppointments	Gets or sets a value indicating whether appointments in the Timeline View should be stretched to fill the time cells. This is a dependency property.
Both	TimelineView.ResourceMinHeight	Gets or sets the resource row’s minimum height when the TimelineView.ResourceAutoHeight is true. This is a dependency property.
Both	SchedulerViewBase.NavigationButtonsVisibility	Gets or sets whether to display appointment navigation buttons. This is a dependency property.
Both	SchedulerViewBase.MoreButtonsVisibility	Gets or sets the visibility state of More buttons in the current View. This is a dependency property.
Both	TimelineView.TimeIndicatorVisibility	Gets or sets whether to display the time indicator. This is a dependency property.
Both	TimelineView.ShowTimeIndicatorOverAppointment	Gets or sets a value indicating whether the Time Indicator is displayed above the appointments. This is a dependency property.
Both	TimelineView.HorizontalScrollBarVisibility	Gets or sets the horizontal scrollbar visibility mode. This is a dependency property.
Both	TimelineView.VerticalScrollBarVisibility	Gets or sets the vertical scrollbar visibility mode. This is a dependency property.
Legacy	TimelineView.GroupSeparatorSize	Specifies the width of the line between groups when the scheduler is grouped by dates or resources.
Legacy	TimelineView.IntervalCount	Gets or sets the number of time intervals displayed in the timeline view. This is a dependency property.
Legacy	TimelineView.ResourceAutoHeight	Automatically adjust the resource row height to fit all appointments in a row. The scheduler should be grouped by resources or dates. This is a dependency property.
Legacy	SchedulerViewBase.ResourcesPerPage	Gets or sets the maximum number of simultaneously displayed resources. This is a dependency property.
Legacy	SchedulerViewBase.ShowResourceNavigator	Gets or sets whether to display the resource navigator. This is a dependency property.