A calendar and scheduler component.
public class DxScheduler : DxSchedulerBase
<DxScheduler> component displays and manages scheduled appointments.
To add the
<DxScheduler> component to an application, follow the steps below:
Create and configure the application as described in the Create a New Blazor Application document.
</DxScheduler>markup to your application.
Bind the Scheduler component to the data storage with the DxScheduler.DataStorage property.
Add markup to specify the view, as follows:
</DxSchedulerDayView>- the most detailed view of appointments for a particular day.
</DxSchedulerWeekView>- the view that displays appointments for a weekly period.
</DxSchedulerWorkWeekView>- the view that displays appointments for the working days in a particular week.
Online Demo: Scheduler - View Types
Bind to Data
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>
The views are required to display appointments. You can choose from the following views:
- DxSchedulerDayView - the most detailed view of appointments for a particular day.
- DxSchedulerWeekView - the view that displays appointments for a weekly period.
- DxSchedulerWeekView - the view that displays appointments for the working days in a particular week.
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.