Native Blazor Components powered by DevExpress

Scheduler - View Types

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.

Scheduler - Week View

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

	Sunday, January 19	Monday, January 20	Tuesday, January 21	Wednesday, January 22	Thursday, January 23	Friday, January 24	Saturday, January 25

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">
    <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"
        }
    };
}

Scheduler - Work Week View

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

	Monday, January 20	Tuesday, January 21	Wednesday, January 22	Thursday, January 23	Friday, January 24

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">
    <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"
        }
    };
}

Scheduler - Day View

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

	Sunday, January 19

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">
    <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"
        }
    };
}

Online Demos - DevExpress UI for Blazor

Scheduler - View Types

Scheduler - Week View

Scheduler - Work Week View

Scheduler - Day View