Get Started with Scheduler

  • 8 minutes to read

Watch Video: Get Started with Scheduler

This tutorial describes how to build a simple Blazor application with a DevExpress Scheduler component. Follow the steps below to setup three different scheduler view types and then populate the control with different appointment types (including all-day and recurrent events).

Get Started with Scheduler - Result

Create an Application

Refer to the Create an application section for instructions.

If you use Microsoft project templates, do the following:

  1. Configure the application as described in this topic: Microsoft Templates (Visual Studio).
  2. Apply the DevExpress Blazing Berry theme as described in this topic: Apply a DevExpress Bootstrap Theme.

Create a Data Source

This tutorial shows you how to bind the Scheduler to runtime data.

Declare the following classes:

  • Appointment - An appointment that is rendered in the Scheduler.
  • AppointmentCollection - A data source for the Scheduler.
public class Appointment {
    public Appointment() {}

    public int AppointmentType { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Caption { get; set; }
    public string Description { get; set; }
    public string Location { get; set; }
    public int Label { get; set; }
    public int Status { get; set; }
    public bool AllDay { get; set; }
}
NOTE

You can also bind the Scheduler to a remote data source. Refer to the following example: Scheduler for Blazor - How to implement CRUD operations with a Web API Service.

Add a Scheduler and Bind It to Data

Add a Scheduler component (<DxScheduler>) with a Week view (<DxSchedulerWeekView>) to a page. Set the view’s ShowWorkTimeOnly property to true.

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

Follow the steps below to bind the Scheduler to data:

  1. In the Razor @code block, create a DxSchedulerDataStorage object. Use the constructor without parameters.
  2. Use the DxSchedulerDataStorage.AppointmentsSource property to fill the storage with a collection of data objects.
  3. Create a DxSchedulerAppointmentMappings object and map data source fields to appointment properties.
  4. Assign the newly created object to the DxSchedulerDataStorage.AppointmentMappings property.
  5. Assign the data source to the Scheduler’s DataStorage property.
<DxScheduler DataStorage="@DataStorage">
    <DxSchedulerWeekView ShowWorkTimeOnly="true" />
</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"
        }
    };
}

Get Started with Scheduler - Week view

Add Views

You can add multiple views to the Scheduler. The code below defines the Day, Week, and Work Week views.

<DxScheduler DataStorage="@DataStorage">
    <DxSchedulerDayView ShowWorkTimeOnly="true" />
    <DxSchedulerWeekView ShowWorkTimeOnly="true" />
    <DxSchedulerWorkWeekView ShowWorkTimeOnly="true" />
</DxScheduler>

The Scheduler now displays the Day view because it is defined first. The view selector allows users to switch between views.

Get Started with Scheduler - Day view

Customize Views

Each view has its customization settings. Specify the following settings for the Day view:

  • Display 3 days at a time.
  • Set the time scale interval to 1 hour.
  • Set work time to 9AM - 6PM.
  • Set the visible time interval to 8AM - 7PM. Time cells outside the work time interval have a gray background.
  • Hide the current time indicator.
<DxSchedulerDayView 
    DayCount="3"
    TimeScale="@(new TimeSpan(1,0,0))"
    WorkTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18))"
    VisibleTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19))"
    TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never">
</DxSchedulerDayView>

Get Started with Scheduler - Customize view

Create a Recurrent Appointment

To enable the Scheduler to manage recurrent appointments, declare a Recurrence field in the Appointment object and map this field to the appointment’s RecurrenceInfo property.

public class Appointment {
    // ...
    public string Recurrence { get; set; }
}

In the application, a user should follow the steps below to create a recurrent appointment.

  1. Click an empty cell in a view. This invokes the compact Appointment form.
  2. Specify the appointment caption (Daily Meeting), start and end time.

    Get Started with Scheduler - A new appointment

  3. Click the Expand Arrows button Get Started with Scheduler - The Expand Arrows icon to open the pop-up edit form.

  4. In the Repeat field, select Daily and specify the rule:

    Get Started with Scheduler - An Appointment form

    Get Started with Scheduler - A Recurrence rule

  5. Optionally. In the Label and Status field, specify the appointment label and status.

    Get Started with Scheduler - Label

  6. Click Save.

The newly created appointment is marked with the “recurrent” icon: recurrence icon.

Get Started with Scheduler - A recurring appointment

NOTE

The Scheduler is bound to data created at runtime. Newly created appointments do not persist when you close the application. To save changes, bind the Scheduler to a remote data source. Refer to the following example: Scheduler for Blazor - How to implement CRUD operations with a Web API Service.

To create the Daily Meeting recurrent appointment in code, add a new appointment to the data source and initialize the Recurrence field as shown below:

public static partial class AppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Today;
        var dataSource = new List<Appointment>() {
            // appointments
            // ...
            new Appointment {
                AppointmentType = 1,
                Caption = "Daily Meeting",
                StartDate = date + (new TimeSpan(0, 9, 00, 0)),
                EndDate = date + (new TimeSpan(0, 10, 00, 0)),
                Label = 10,
                Status = 1,
                Recurrence = string.Format("<RecurrenceInfo Type=\"0\" Start=\"{0}\" Range=\"1\"
                    OccurrenceCount=\"10\" Frequency =\"1\" Id=\"72e3db8f-cdb6-4aaa-afe1-e3c6b80ce995\"/>",
                    ToString(date + (new TimeSpan(0, 9, 00, 0))))
            }
        };
        return dataSource;
    }
}

Refer to DxSchedulerRecurrenceInfo for more information.

Complete Code

Show Complete Code
<DxScheduler DataStorage="@DataStorage">
   <DxSchedulerDayView DayCount="3"
                       TimeScale="@(new TimeSpan(1,0,0))"
                       WorkTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18))"
                       VisibleTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19))"
                       TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never">
   </DxSchedulerDayView>
   <DxSchedulerWeekView ShowWorkTimeOnly="true" />
   <DxSchedulerWorkWeekView ShowWorkTimeOnly="true" />
</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"
       }
   };
}