Version: Beta
Copyright © 2006-2019 Developer Express Inc

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:

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

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 - Day View

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

Sunday, August 25
9 00
10 00
11 00
12 PM
1 00
2 00
3 00
4 00
5 00
Razor Appointment AppointmentCollection 

<DxScheduler Id="schedulerDayView"
        StartDate=@(DateTime.Today)
        DataStorage=@DataStorage>

    <DxSchedulerDayView ShowWorkTimeOnly="true" DayCount="1"></DxSchedulerDayView>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.DataSource,
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Id = "AppointmentId",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status"
        }
    };
}

Scheduler - Work Week View

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

Monday, August 26 Tuesday, August 27 Wednesday, August 28 Thursday, August 29 Friday, August 30
9 00
10 00
11 00
12 PM
1 00
2 00
3 00
4 00
5 00
Razor Appointment AppointmentCollection 

<DxScheduler Id="schedulerWorkWeekView"
        StartDate=@(DateTime.Today)
        DataStorage=@DataStorage>

    <DxSchedulerWorkWeekView ShowWorkTimeOnly="true"></DxSchedulerWorkWeekView>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.DataSource,
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Id = "AppointmentId",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status"
        }
    };
}

Scheduler - Week View

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

Sunday, August 25 		Monday, August 26 Tuesday, August 27 Wednesday, August 28 Thursday, August 29 Friday, August 30 Saturday, August 31
9 00
10 00
11 00
12 PM
1 00
2 00
3 00
4 00
5 00
Razor Appointment AppointmentCollection 

<DxScheduler Id="schedulerWeekView"
        StartDate=@(DateTime.Today)
        DataStorage=@DataStorage>

    <DxSchedulerWeekView ShowWorkTimeOnly="true"></DxSchedulerWeekView>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.DataSource,
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Id = "AppointmentId",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status"
        }
    };
}