The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxScheduler Class

A calendar and scheduler component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxScheduler :
    DxSchedulerBase

Remarks

The <DxScheduler> component displays and manages scheduled appointments.

Blazor-Scheduler-Overview

To add the <DxScheduler> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxScheduler>...</DxScheduler> markup to your application.

  3. Bind the Scheduler component to the data storage with the DxScheduler.DataStorage property.

  4. Add markup to specify the view, as follows:

    • <DxSchedulerDayView>...</DxSchedulerDayView> - the most detailed view of appointments for a particular day.
    • <DxSchedulerWeekView>...</DxSchedulerWeekView> - the view that displays appointments for a weekly period.
    • <DxSchedulerWorkWeekView>...</DxSchedulerWorkWeekView> - the view that displays appointments for the working days in a particular week.
Note

Online Demo: Scheduler - View Types

Bind to Data

Create the DxSchedulerDataStorage object and assign it to the DxScheduler.DataStorage property.

You have to fill the data storage with appointments. To do this, provide a collection of objects and map object properties to the standard appointment properties.

Assign a collection of objects to the DxSchedulerDataStorage.AppointmentsSource property. To create mappings, instantiate and configure the DxSchedulerAppointmentMappings object. Assign it to the DxSchedulerDataStorage.AppointmentMappings property.

<DxScheduler DataStorage=@DataStorage>
  <DxSchedulerDayView> 
  </DxSchedulerDayView>
</DxScheduler> 

Views

The views are required to display appointments. You can choose from the following views:

Each view can have its own settings. The following code demonstrates a Day view that displays two days simultaneously. The time of day is restricted to working hours. The resulting scheduler is shown in the picture above that starts the topic.

<DxSchedulerDayView 
                    WorkTime=@(new DxSchedulerTimeSpanRange(new TimeSpan(9,0,9),
                                new TimeSpan(18,0,0)))
                    ShowWorkTimeOnly="true"
                    DayCount="2">
</DxSchedulerDayView>

When several views are defined in the markup, as in the following code snippet, the scheduler displays the view which is defined first or you should specify the view explicitly.

<DxScheduler Id="scheduler"
             StartDate=@(DateTime.Today.AddDays(-1))
             DataStorage=@DataStorage>
    <DxSchedulerDayView ShowWorkTimeOnly="false"
                        DayCount="3"
                        TimeIndicatorVisibility=@SchedulerTimeIndicatorVisibility.TodayView
                        TimeScale=@(new TimeSpan(0,15,0))
                        WorkTime=@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9),
                         TimeSpan.FromHours(18)))
                        VisibleTime=@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8),
                         TimeSpan.FromHours(19)))>
    </DxSchedulerDayView>
    <DxSchedulerWeekView></DxSchedulerWeekView>
    <DxSchedulerWorkWeekView></DxSchedulerWorkWeekView>
</DxScheduler>

Multiple defined views invoke the View Selector. This is a visual element that allows the end-user to switch between views, as illustrated in the following image:

You can use the DxSchedulerBase.ActiveViewType property to specify the view for display.

Inheritance

Object
Microsoft.AspNetCore.Components.ComponentBase
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.SchedulerJSInteropProxy>
DxSchedulerBase
DxScheduler

Implements

Microsoft.AspNetCore.Components.IComponent
Microsoft.AspNetCore.Components.IHandleEvent
Microsoft.AspNetCore.Components.IHandleAfterRender
See Also