Back to Devexpress

DxScheduler.ScrollTo(DateTime) Method

blazor-devexpress-dot-blazor-dot-dxscheduler-dot-scrollto-x28-system-dot-datetime-x29.md

latest2.5 KB
Original Source

DxScheduler.ScrollTo(DateTime) Method

Scrolls the scheduler’s view to the specified date and time.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public void ScrollTo(
    DateTime date
)

Parameters

NameTypeDescription
dateDateTime

The target date and time.

|

Remarks

Use the ScrollTo method to scroll to the specified time point. The method tries to place the specified time cell to the top left corner of the view. If several time cells meet the specified criteria, the scheduler scrolls to the first found time cell.

Note that if the specified time point is not present in the displayed view, the method does nothing.

The following code snippet scrolls to May 9, 2024, 9:00 AM (beginning of the work day) on the first render:

razor
<DxScheduler @bind-StartDate="@StartDate"
             DataStorage="@DataStorage"
             @ref="Scheduler"
             CssClass="my-scheduler">
    <DxSchedulerWorkWeekView ShowWorkTimeOnly="ShowWorkTimeOnly"></DxSchedulerWorkWeekView>
</DxScheduler>

@code {
    DateTime StartDate { get; set; } = new DateTime(2024, 05, 09);
    bool ShowWorkTimeOnly { get; set; } = false;
    DxScheduler Scheduler { get; set; }

    protected override void OnAfterRender(bool firstRender) {
        base.OnAfterRender(firstRender);
        if(firstRender) {
            Scheduler.ScrollTo(new DateTime(2024, 05, 09, 09, 00, 00));
        }
    }

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}
css
.my-scheduler { 
    height: 600px; 
}

See Also

DxScheduler Class

DxScheduler Members

DevExpress.Blazor Namespace