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.

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

Download Free 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.

Navigation

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

• Bind the Scheduler to data
• Configure Scheduler views
• Enable Scheduler editing

See Also

• Live Demo: Scheduler
• Scheduler API Reference