Blazor Scheduler Overview

The Blazor Scheduler component lets users see, edit and add appointments, so they can plan their agenda. The Scheduler offers different views, control over the workday start and end, resource grouping and various other features and settings.

Telerik UI for Blazor Ninja image

The Scheduler component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Scheduler

  1. Use the <TelerikScheduler> tag.
  2. Set its Data parameter to IEnumerable<TItem> to define the collection of appointments (events). The Scheduler can detect and use some property names in the model, such as Title, Description, Start, End and others. Alternatively, you can use different property names and configure them explicitly. See Data Binding for more details.
  3. Define the available views that users can toggle. Each view will be a child tag inside <SchedulerViews>.
  4. (optional) Set StartTime and EndTime for the views, unless users should see the full 24 hours. Only the time portion of these DateTime objects will matter.
  5. (optional) Set the Scheduler's Date and View parameters. By default, users will see today's date and the first view. Both parameters support two-way binding.

Basic Scheduler

<TelerikScheduler Data="@Appointments"
                  @bind-Date="@SchedulerStartDate"
                  @bind-View="@SchedulerCurrentView"
                  Height="600px">
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" />
        <SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" />
        <SchedulerMonthView />
        <SchedulerTimelineView StartTime="@DayStart" EndTime="@DayEnd" />
    </SchedulerViews>
</TelerikScheduler>

@code {
    private DateTime SchedulerStartDate { get; set; } = new DateTime(2022, 7, 25);

    private SchedulerView SchedulerCurrentView { get; set; } = SchedulerView.Week;

    // only the time portion matters
    private DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 6, 0, 0);
    private DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 19, 0, 0);

    private List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
    {
        new SchedulerAppointment
        {
            Title = "Planning meeting",
            Start = new DateTime(2022, 7, 25, 9, 30, 0),
            End = new DateTime(2022, 7, 25, 12, 45, 0)
        },
        new SchedulerAppointment
        {
            Title = "Vet visit",
            Start = new DateTime(2022, 7, 26, 7, 0, 0),
            End = new DateTime(2022, 7, 26, 7, 30, 0)
        },
        new SchedulerAppointment
        {
            Title = "Trip to Hawaii",
            IsAllDay = true,
            Start = new DateTime(2022, 7, 27),
            End = new DateTime(2022, 8, 07)
        }
    };

    public class SchedulerAppointment
    {
        public string Title { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
    }
}

Data Binding

As a data-driven component, the Scheduler needs a collection of appointments to work with. Learn how to data bind the Scheduler and configure model property names.

Views

The Scheduler offers different views that are suitable for different user needs:

  • Day view
  • Multiday view
  • Week view
  • Month view
  • Timeline (agenda) view

Editing

Users can create, edit and delete Scheduler appointments. The component provides you with the new information so you can store it to the underlying data source.

The Scheduler features extensive navigation, which can be both programmatic and managed by the end user. The component can change the currently visible time range, the current view, and toggle business hours only display.

Templates

You can customize the appointment appearance and content via Scheduler templates. Another option is to use the Scheduler OnItemRender event.

Resources and Grouping

Scheduler resources provide a way to associate and group appointments by certain criteria, such as a meeting room, a participating person, or used equipment.

Events

The Scheduler component fires events related to CRUD operations, item (appointment) clicks and user navigation. Use them to gain more information about user actions and enhance the component behavior.

Scheduler Parameters

The following table lists Scheduler parameters, which are not discussed elsewhere in the component documentation. Also check the Scheduler API Reference for a full list of parameters, events and methods.

Parameter Type and Default Value Description
Class string A custom CSS class for the <div class="k-scheduler"> element. Use it to override theme styles.
EnableLoaderContainer bool
(true)
Determines if the Scheduler will display a loading animation for operations that take longer than 600 ms.
Height string A height style in any supported unit.
Width string A width style in any supported unit.

Next Steps

See Also

In this article