Scheduler Overview

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

To use a Telerik Scheduler for Blazor

  1. Add the TelerikScheduler tag.
  2. Populate its Data property with the collection of appointments/events the user needs to see. See the Data Binding article for details on the fields.
  3. Define the Views the user can toggle between in the SchedulerViews collection. Optionally, set their settings (such as days start and end) and choose a default View.

Scheduler first look and main features

@* Fewer settings are required to get the component running, but you will usually have to set some for better UX *@

<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
</TelerikScheduler>

@code {
    public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
    {
            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 11, 26, 11, 30, 0),
                End = new DateTime(2019, 11, 26, 12, 0, 0)
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 11, 25, 9, 30, 0),
                End = new DateTime(2019, 11, 25, 12, 45, 0)
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 07)
            }
    };

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

The result from the code snippet above

Component namespace and reference

The Scheduler is a generic component and its type is determined by the type of the appointments model you pass to it.

@* This is a bare bones example to show the relationship between the reference and the model *@

<TelerikScheduler Data="@Appointments" @ref="@SchedulerRef">
    <SchedulerViews>
        <SchedulerWeekView />
    </SchedulerViews>
</TelerikScheduler>

@code {
    Telerik.Blazor.Components.TelerikScheduler<SchedulerAppointment> SchedulerRef { get; set; }

    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>();

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

The Scheduler provides the following key features:

  • Extensive Navigation - both programmatic, and for the end user - includes the ability to change the currently shown time range, several views to choose from, and toggling business hours only display.

  • Appointment Editing - the user can edit, delete and create new appointments in their calendar, and the scheduler provides you with that information so you can store it.

  • Appointment Templates - you can customize what content the appointment renders and also style its element through the ItemRender event.

See Also

In this article
Not finding the help you need? Improve this article