Skip to main content

Timeline View

  • 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.

<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.

WPFScheduler_TimelineView

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:

<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 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.