Scheduler

This article demonstrates how to use the Radzen Blazor Scheduler component. Check also the component guide and API reference.

Using in Radzen

The easiest way to start with the Radzen Blazor Scheduler is to use the Scheduler CRUD pages template.

You need to pick an existing schema (e.g. a Table from an existing data source) and specify the properties (DB columns) that correspond to the ID, Start, End and Title of the scheduler appointments.

Radzen will generate three pages - one that contains the scheduler, one for adding appointments and one for editing appointments (with all required additional code).

Using from code

The Radzen Blazor Scheduler can display appointments in three ways (a.k.a. views) - day view, week view and month view. The following properties configure the scheduler

• IEnumerable<T> Data

Specifies the data source which contains the appointments.

• string StartProperty

The name of the property which contains the start date of an appointment. The property should be of DateTime type.

• string EndProperty

The name of the property which contains the end date of an appointment. The property should be of DateTime type.

• string TextProperty

The name of the property which contains the text of an appointment - this is the message that the scheduler will display. The property should be of String type.

Basic usage

Here is a very basic example that creates a scheduler with minimal configuration.

<RadzenScheduler Data="@data" TItem="DataItem" StartProperty="Start" EndProperty="End" TextProperty="Text">
  <RadzenMonthView />
</RadzenScheduler>
@code {
  class DataItem
  {
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public string Text { get; set; }
  }

  DataItem[] data = new DataItem[]
  {
      new DataItem
      {
        Start = DateTime.Today,
        End = DateTime.Today.AddDays(1),
        Text = "Birthday"
      },
  };
}

The RadzenMonthView tag is used to specify that the scheduler will display appointments in month view. The Data property specifies the data source. The scheduler will render an appointment for every DataItem instance from the data array and will display its Text property.

CRUD

To support adding and editing of appointments you can handle the SchedulerSlotSelect and SchedulerAppointmentSelect events. Check the online example for a complete implementation.

Important! To make the scheduler display the latest changes you should do one of the following:

• invoke the Reload() method of the scheduler
• Reassign its Data property to a new IEnumerable<T> instance.

Customize appointment appearance

To customize the appointment appearance use the Template setting of the Scheduler

<RadzenScheduler Data="@data" TItem="DataItem" StartProperty="Start" EndProperty="End" TextProperty="Text">
  <Template Context="data">
    <strong>@data.Text</strong>
  </Template>
  <ChildContent>
    <RadzenMonthView />
  </ChildContent>
</RadzenScheduler>

The template context is the data item (of type TItem).

Data-binding

If you set the Data property of the scheduler to IQueryable<T> it will use expression trees that entity framework core will automatically convert to SQL. This will ensure that only the appointments required for the time period displayed by the current view are fetched from the database.

For custom implementations you can use the LoadData event. It provides the Start and End of the current period.

<RadzenScheduler LoadData="@OnLoadData" Data="@data" TItem="DataItem" StartProperty="Start" EndProperty="End" TextProperty="Text">
  <RadzenMonthView />
</RadzenScheduler>
@code {
  IEnumerable<DataItem> data;

  async Task OnLoadData(SchedulerLoadDataEventArgs args)
  {
    // Get the appointments for between the Start and End
    data = await MyAppointmentService.GetData(args.Start, args.End);
  }
}

API

RadzenScheduler<TItem>

RadzenDayView

RadzenWeekView

RadzenMonthView