Blazor: Scheduler-View Types

Overview

The DevExpress Scheduler for Blazor can display appointments in a Day, Work Week or Week View. This demo illustrates how to use and customize these views:

Week View (DxSchedulerWeekView) - Displays appointments for all the days in a specified week.
Work Week View (DxSchedulerWorkWeekView) - Displays appointments for work days in a week.
Day View (DxSchedulerDayView) - Displays appointments for specified days.

You can use the ActiveViewType property to specify the initial view, and the View Selector to switch between views.

Related API members:

DayCount - Specifies the number of days that are displayed within the view.
VisibleTime - Specifies the visible time interval of the view.
ShowWorkTimeOnly - Specifies a value that indicates if Scheduler should show its data only for the working hours in the view.
WorkTime - Specifies the work time interval for the view.

Week View

This module demonstrates how to configure the Week View (DxSchedulerWeekView).

	Sunday, May 2	Monday, May 3	Tuesday, May 4	Wednesday, May 5	Thursday, May 6	Friday, May 7	Saturday, May 8

9	00
9
10	00
10
11	00
11
12	PM
12
1	00
1
2	00
2
3	00
3
4	00
4
5	00
5

Razor Appointment AppointmentCollection

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             CssClass="mw-1100">
    <DxSchedulerWeekView ShowWorkTimeOnly="true"></DxSchedulerWeekView>
</DxScheduler>

@code {
    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"
        }
    };
}

Work Week View

This module demonstrates how to configure the Work Week View (DxSchedulerWorkWeekView).

	Monday, May 3	Tuesday, May 4	Wednesday, May 5	Thursday, May 6	Friday, May 7

9	00
9
10	00
10
11	00
11
12	PM
12
1	00
1
2	00
2
3	00
3
4	00
4
5	00
5

Razor Appointment AppointmentCollection

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             CssClass="mw-1100">
    <DxSchedulerWorkWeekView ShowWorkTimeOnly="true"></DxSchedulerWorkWeekView>
</DxScheduler>

@code {
    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"
        }
    };
}

Day View

This module demonstrates how to configure the Day View (DxSchedulerDayView).

	Friday, May 7

9	00
9
10	00
10
11	00
11
12	PM
12
1	00
1
2	00
2
3	00
3
4	00
4
5	00
5

Razor Appointment AppointmentCollection

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             CssClass="mw-1100">
    <DxSchedulerDayView ShowWorkTimeOnly="true" DayCount="1"></DxSchedulerDayView>
</DxScheduler>

@code {
    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"
        }
    };
}

View Types

Overview Week View Work Week View Day View