DxSchedulerWeekView Class

A calendar view that displays the entire week including non-working days.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DxSchedulerWeekView :
    DxSchedulerDayViewBase

Remarks

The Week view is a calendar view that displays days in a week, including non-working days.

To show the Week view with initilal settings, add the DxSchedulerWeekView component to the markup:

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerWeekView></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"
        }
    };
}

The scheduler with default settings is shown below.

Scheduler - Week view

Run Demo: Scheduler - Week View

You can change settings to adjust the view, as illustrated in the following code snippet:

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerWeekView ShowWorkTimeOnly="false"
                         TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never"
                         TimeScale="@(new TimeSpan(0,15,0))"
                         WorkTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18)))"
                         VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19)))">
    </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"
        }
    };
}

The code above applies the following changes:

  • The time scale (time row interval) is set to 15 minutes.

  • Work time starts at 9 AM and ends at 6 PM, Saturday and Sunday are non-working days (default setting).

  • The view’s visible interval is set from 8 AM to 7 PM. Time cells outside the working time interval has gray background.

  • The current time indicator (a straight line that indicates the current time) is hidden.

The picture below demonstrates how these settings affect the view.

Scheduler - Week view

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DevExpress.Blazor.Scheduler.Internal.ViewBase
DxSchedulerDayViewBase
DxSchedulerWeekView
See Also