DxSchedulerTimelineView.Duration Property

Specifies the time interval displayed in the Timeline view.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public TimeSpan Duration { get; set; }

Property Value

Type	Description
TimeSpan	Specifies the time interval displayed in the Timeline view.

Remarks

The default time interval is 24 hours.

Set the Duration property to a value greater than the result of multiplying Units by UnitCount (Units*UnitCount). Otherwise, an appointment’s duration may be displayed incorrectly.

Index.razor

@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() {
            Id = "Id",
            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"
        }
    };
}

Resource.cs

namespace Scheduler.Data {

    public class Resource {
        public int Id { get; set; }
        public int? GroupId { get; set; }
        public string Name { get; set; }
        public bool IsGroup { get; set; }
        public string TextCss { get; set; }
        public string BackgroundCss { get; set; }
        public override bool Equals(object obj) {
            Resource resource = obj as Resource;
            return resource != null && resource.Id == Id;
        }
        public override int GetHashCode() {
            return Id;
        }
    }
}

ResourceAppointment.cs

using System;

namespace Scheduler.Data {

    public static partial class ResourceAppointmentCollection {
        public class ResourceAppointment {
            public ResourceAppointment() { }
            public bool Accepted { get; set; }
            public int AppointmentType { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public string Caption { get; set; }
            public string Description { get; set; }
            public string Location { get; set; }
            public int? Label { get; set; }
            public int Status { get; set; }
            public bool AllDay { get; set; }
            public string Recurrence { get; set; }
            public int? ResourceId { get; set; }
        }
    }
}

ResourceAppointmentCollection.cs

public static partial class ResourceAppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Now.Date;
        var dataSource = new List<Appointment>() {
            new Appointment {
                Id = 0,
                Accepted = true,
                Caption = "Install New Router in Dev Room",
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Status = 1,
                ResourceId = 0
            },
            new Appointment {
                Id = 1,
                Caption = "Upgrade Personal Computers",
                Accepted = false,
                StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                Status = 2,
                ResourceId = 0
            },
            new Appointment {
                Id = 2,
                Caption = "Website Redesign Plan",
                Accepted = false,
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Status = 3,
                ResourceId = 0
            },
            new Appointment {
                Id = 3,
                Caption = "New Brochures",
                Accepted = true,
                StartDate = date + (new TimeSpan(1, 13, 30, 0)),
                EndDate = date + (new TimeSpan(1, 15, 15, 0)),
                Status = 4,
                ResourceId = 0
            },
            new Appointment {
                Id = 4,
                Caption = "Book Flights to San Fran for Sales Trip",
                Accepted = false,
                StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                AllDay = true,
                Status = 1,
                ResourceId = 0
            },
            new Appointment {
                Id = 5,
                Caption = "Approve Personal Computer Upgrade Plan",
                Accepted = true,
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Status = 2
            },
            new Appointment {
                Id = 6,
                Caption = "Final Budget Review",
                Accepted = true,
                StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 3,
                ResourceId = 1
            },
            new Appointment {
                Id = 7,
                Caption = "Install New Database",
                Accepted = false,
                StartDate = date + (new TimeSpan(0, 9, 45, 0)),
                EndDate = date + (new TimeSpan(1, 11, 15, 0)),
                Status = 4,
                ResourceId = 1
            },
            new Appointment {
                Id = 8,
                Accepted = true,
                Caption = "Approve New Online Marketing Strategy",
                StartDate = date + (new TimeSpan(1,  12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                Status = 1,
                ResourceId = 1
            },
            new Appointment {
                Id = 9,
                Accepted = true,
                Caption = "Customer Workshop",
                StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                AllDay = true,
                Status = 2,
                ResourceId = 2
            },
            new Appointment {
                Id = 10,
                Accepted = true,
                Caption = "Prepare 2021 Marketing Plan",
                StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                EndDate = date + (new TimeSpan(0, 13, 30, 0)),
                Status = 3,
                ResourceId = 2
            },
            new Appointment {
                Id = 11,
                Accepted = false,
                Caption = "Brochure Design Review",
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 30, 0)),
                Status = 4,
                ResourceId = 2
            },
            new Appointment {
                Id = 12,
                Accepted = true,
                Caption = "Create Icons for Website",
                StartDate = date + (new TimeSpan(1, 10, 0, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Status = 1,
                ResourceId = 1
            },
            new Appointment {
                Id = 13,
                Accepted = true,
                Caption = "Launch New Website",
                StartDate = date + (new TimeSpan(1, 12, 20, 0)),
                EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                Status = 1,
                ResourceId = 2
            },
            new Appointment {
                Id = 14,
                Accepted = false,
                Caption = "Upgrade Server Hardware",
                StartDate = date + (new TimeSpan(1, 9, 0, 0)),
                EndDate = date + (new TimeSpan(1, 12, 0, 0)),
                Status = 2,
                ResourceId = 2
            },
            new Appointment {
                Id = 15,
                Accepted = true,
                Caption = "Book Flights to San Fran for Sales Trip",
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 17, 0, 0)),
                Status = 1,
                ResourceId = 3
            },
            new Appointment {
                Id = 16,
                Accepted = true,
                Caption = "Approve New Online Marketing Strategy",
                StartDate = date + (new TimeSpan(0,  12, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 3,
                ResourceId = 4
            }
        };
        return dataSource;
    }
}

ResourceCollection.cs

public static partial class ResourceCollection {
    public static List<Resource> GetResourcesForGrouping() {
        return GetResources().Take(3).ToList();
    }

    public static List<Resource> GetResources() {
        return new List<Resource>() {
            new Resource() { Id=0 , Name="Nancy Davolio", GroupId=100, BackgroundCss="dxbl-green-color", TextCss="dxbl-white-font-color" },
            new Resource() { Id=1 , Name="Andrew Fuller", GroupId=101, BackgroundCss="dxbl-orange-color", TextCss="dxbl-white-font-color" },
            new Resource() { Id=2 , Name="Janet Leverling", GroupId=100, BackgroundCss="dxbl-purple-color", TextCss="dxbl-white-font-color" },
            new Resource() { Id=3 , Name="Margaret Peacock", GroupId=101, BackgroundCss="dxbl-indigo-color", TextCss="dxbl-white-font-color" },
            new Resource() { Id=4 , Name="Steven Buchanan", GroupId=100, BackgroundCss="dxbl-red-color", TextCss="dxbl-white-font-color" }
        };
    }

    public static List<Resource> GetResourceGroups() {
        return new List<Resource>() {
            new Resource() { Id=100, Name="Sales and Marketing", IsGroup=true },
            new Resource() { Id=101, Name="Engineering", IsGroup=true }
        };
    }
}

Run Demo: Scheduler — Timeline View