Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxSchedulerTimelineView Class

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxSchedulerTimelineView :
    ViewBase,
    ISchedulerTimelineView,
    ISchedulerView,
    INestedSettingsOwner

#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. Note: If you set the view’s Duration property, its value should be greater than the result of multiplying Units by UnitCount (Units*UnitCount). Otherwise, an appointment’s duration may be displayed incorrectly.
@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
DxComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponent
DevExpress.Blazor.Scheduler.Internal.ViewBase
DxSchedulerTimelineView
See Also