Skip to main content

DxSchedulerTimelineView Class

A calendar view that displays appointments as horizontal bars along timescales.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerTimelineView :
    ViewBase,
    ISchedulerTimelineView,
    ISchedulerView

Remarks

The Timeline view is a calendar view that displays appointments as horizontal bars along timescales.

Follow the steps below to create the Timeline view:

  1. Add the DxSchedulerTimelineView component to a page. Specify the Duration and CellMinWidth properties.
  2. Add <Scales>...</Scales> to the component’s markup to define the Scales collection.
  3. Add DxSchedulerTimeScale objects to the Scales collection. Specify the Unit and UnitCount properties for them.
@using Data

<DxScheduler StartDate="@(DateTime.Today + TimeSpan.FromHours(8))"
             DataStorage="@DataStorage"
             ResourceNavigatorVisible="false">
    <DxSchedulerTimelineView Duration="@(TimeSpan.FromHours(36))" CellMinWidth="100">
        <Scales>
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Day" UnitCount="1"></DxSchedulerTimeScale>
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Hour" UnitCount="6"></DxSchedulerTimeScale>
        </Scales>
    </DxSchedulerTimelineView>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };
}

Scheduler - Timeline view

Run Demo: Scheduler — Timeline View

The Timeline view also allows you to group appointments by resources. To do this, set the GroupType property to Resource.

<DxScheduler StartDate="@(DateTime.Today + TimeSpan.FromHours(8))"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Resource">
    <DxSchedulerTimelineView Duration="@(TimeSpan.FromHours(36))" CellMinWidth="100">
        <Scales>
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Day" UnitCount="1"></DxSchedulerTimeScale>
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Hour" UnitCount="6"></DxSchedulerTimeScale>
        </Scales>
    </DxSchedulerTimelineView>
</DxScheduler>

Scheduler - Timeline view with grouped appointments

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DevExpress.Blazor.Scheduler.Internal.ViewBase
DxSchedulerTimelineView
See Also