Views in Blazor Scheduler

• Mar 10, 2025
• 2 minutes to read

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

DxSchedulerDayView

Displays one or multiple days.

DxSchedulerWeekView

Displays one week at a time.

DxSchedulerWorkWeekView

Displays one work week at a time.

DxSchedulerMonthView

Displays one or multiple months.

DxSchedulerTimelineView

Displays 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.

<style>
    .my-scheduler {
        height: 500px;
    }
</style>

<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.