Views in Blazor Scheduler

Jan 08, 2026
2 minutes to read

The DevExpress Blazor Scheduler can display appointments in the following views:

DxSchedulerDayViewDisplays one or multiple days.DxSchedulerWeekViewDisplays one week at a time.DxSchedulerWorkWeekViewDisplays one work week at a time.DxSchedulerMonthViewDisplays one or multiple months.DxSchedulerTimelineViewDisplays appointments as horizontal bars along timescales.

Run Demo: View Types

You should add one or more views to the Scheduler component markup.

razor

<DxScheduler Id="scheduler"
             StartDate="@(DateTime.Today.AddDays(-1))"
             DataStorage="@DataStorage">
    <DxSchedulerDayView ShowWorkTimeOnly="false"
                        DayCount="3"
                        TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.TodayView"
                        TimeScale="@(new TimeSpan(0,15,0))"
                        WorkTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9),
                         TimeSpan.FromHours(18)))"
                        VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8),
                         TimeSpan.FromHours(19)))">
    </DxSchedulerDayView>
    <DxSchedulerWeekView></DxSchedulerWeekView>
    <DxSchedulerWorkWeekView></DxSchedulerWorkWeekView>    
    <DxSchedulerMonthView></DxSchedulerMonthView>
    <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>

When you define multiple views, the Scheduler displays a view selector that allows users to switch between views. The Scheduler initially shows the first defined view. You can also use the DxSchedulerBase.ActiveViewType property to specify the active view. To track view changes, handle the ActiveViewTypeChanged event.

When you create a custom appointment form (use the AppointmentFormLayout or the AppointmentCompactFormLayout property), you should explicitly declare the Views property and list available views there.

Add a Scrollbar

The Scheduler component automatically displays a scrollbar when the view area is larger than the specified component size.

The following code snippet applies a fixed height to the scheduler and makes the vertical scrollbar appear.

CSS
Razor

css

.my-scheduler {
    height: 500px;
}

razor

<DxScheduler StartDate="currentDate"
             DataStorage="@DataStorage"
             CssClass="my-scheduler">
    <DxSchedulerDayView DayCount="3" />
    <DxSchedulerWeekView />
    <DxSchedulerMonthView CellMinWidth="120" />
</DxScheduler>

Use ScrollTo method overloads to scroll to a specified appointment or time.