Progress Telerik UI for Blazor

Scheduler

Blazor Scheduler Overview

The Telerik Blazor Scheduler component displays a set of events and resources over time so you can manage (edit) bookings, agendas, your workday and shared resources such as meeting rooms in both WebAssembly (WASM) and Server-side Blazor apps.
Blazor Scheduler Data Binding

To set up a scheduler, just provide it with a collection of your appointments as a data source and it will render them.
Blazor Multiple Scheduler Views
The Scheduler provides several modes of presenting the current time and events to match the particular needs. The more granular a view is, the finer precision you can see, but you will see fewer events and a shorter time period:
- A single Day
- Multiple Days
- Week
- Month View
You can customize the views with a variety of settings.
Scheduler Edit Appointments

Not only can you see the current events, you can also let your users edit, delete and create new appointments. You can control these operations separately so certain users can, for example, only create events, but not edit or delete (for example, your intern taking bookings should not be able to delete existing ones by accident).

The CRUD operations in the Telerik Scheduler for Blazor are managed through a set of dedicated events and parameters so you can plug your business logic and services seamlessly.
Scheduler Resize Appointments

Hovering over an appointment will show you resize handles that you can use to change its duration without having to open the full edit form and fiddle with the date-time pickers. Easier user experience, but the same events and API for the developer.

See it in action in the Appointment Editing demo
Scheduler Drag and Drop Appointments

A single drag-and-drop with a swipe lets you move events around as an alternative for editing them through the default edit form. Check it out in the Appointment Editing demo. Fires the same Update events so you do not need to handle it in any special way.
Conditional Formatting of Appointments

The Scheduler will fire the OnItemRender event once when each appointment is about to be rendered. The event’s handler is best used to modify the CSS classes of that specific item depending on some value in the appointment. For example, coloring all appointments based on the day on which they occur.
Appointment Templates
Control how appointments are rendered in the Scheduler component by specifying a template for them. Templates allow you to override the visual of each appointment, but you still get to keep all standard interactions – dragging and resizing, the delete icon, etc. The Scheduler supports two types of templates:
- ItemTemplate is used for regular appointments within the limits of a single day
- AllDayItemTemplate is used for events which take the entire day.
See the detailed docs on implementing a custom template.
Scheduler Event Resources

Events can be associated with a resource (such as a tool, a meeting room or a person) and the Telerik Scheduler lets you color the appointments accordingly so that you can see at a glance who they are assigned to, or where they will take place.
Scheduler Recurring Appointments

The daily team meeting or the monthly check-in with your manager can be created once and the Telerik Scheduler will expand them as a repeating series, just like Outlook. You can then edit the entire series at once, or a specific instance, called an exception.

See them in action in the Recurring Events demo.
Scheduler Globalization and Localization

The Telerik Blazor Scheduler component reacts automatically to the current user culture. The date formats and the first day of the week will change automatically, and you can easily translate button texts and labels. Check it out in the Scheduler Globalization Demo.
Blazor Scheduler Theming

The Telerik Blazor Scheduler has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.