Skip to main content

DxSchedulerWorkWeekView Class

A calendar view that displays a work week.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerWorkWeekView :
    DxSchedulerDayViewBase

Remarks

The Work Week view is a calendar view that displays days in a work week.

To show the Work Week view with initial settings, add the DxSchedulerWorkWeekView component to the markup:

@using Data

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

The scheduler with default settings is shown below.

Scheduler - Work Week view

Run Demo: Scheduler - Work 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">
    <DxSchedulerWorkWeekView 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)))">
    </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"
        }
    };
}

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 -  Work Week view

Inheritance

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