Scheduler component
This article demonstrates how to use RadzenScheduler.
Basic usage
RadzenScheduler can display appointments in three ways (a.k.a. views) - day view, week view and month view. The following properties configure the scheduler.
- Data - specifies the data source which contains the appointments - a collection of objects.
- StartProperty - the name of the property which contains the start date of an appointment. The property should be of
DateTime
type. - EndProperty - the name of the property which contains the end date of an appointment. The property should be of
DateTime
type. - 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.
Here is a minimal example.
<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 SlotSelect
and AppointmentSelect
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 newIEnumerable<T>
instance.
Customize appointment appearance
To customize the appointment appearance use the Template
setting of RadzenScheduler.
<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
).
Views
To add more views simply list them as child tags within RadzenScheduler.
<RadzenScheduler Data="@data" TItem="DataItem" StartProperty="Start" EndProperty="End" TextProperty="Text">
<RadzenDayView />
<RadzenWeekView />
<RadzenMonthView />
</RadzenScheduler>
To set the initially selected view use the SelectedIndex
property. By default RadzenScheduler displays the first view.
<RadzenScheduler SelectedIndex="1" Data="@data" TItem="DataItem" StartProperty="Start" EndProperty="End" TextProperty="Text">
<RadzenDayView />
<RadzenWeekView />
<RadzenMonthView />
</RadzenScheduler>
LoadData event
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);
}
}