Client v5: BLE, BLE Hosting, HTTP, Jobs - Linux, MacOS, & Blazor Support! Full AOT, RX on BLE only & MANY other features! Check It Out

Scheduler | Blazor Usage

The Blazor Scheduler components mirror the MAUI controls. All three views — Calendar, Agenda, and Event List — are available with the same ISchedulerEventProvider interface.

Setup

Install the NuGet package:

dotnet add package Shiny.Blazor.Controls

Add the @using directives — typically in _Imports.razor:

@using Shiny.Blazor.Controls
@using Shiny.Blazor.Controls.Scheduler

Event Provider

The same ISchedulerEventProvider interface is used on both MAUI and Blazor:

public class MyEventProvider : ISchedulerEventProvider
{
    public async Task<IReadOnlyList<SchedulerEvent>> GetEvents(
        DateTimeOffset start, DateTimeOffset end)
    {
        return await myService.GetEventsAsync(start, end);
    }

    public void OnEventSelected(SchedulerEvent selectedEvent) { }
    public bool CanCalendarSelect(DateOnly selectedDate) => true;
    public void OnCalendarDateSelected(DateOnly selectedDate) { }
    public void OnAgendaTimeSelected(DateTimeOffset selectedTime) { }
    public bool CanSelectAgendaTime(DateTimeOffset selectedTime) => true;
}

Calendar View

<SchedulerCalendarView Provider="@provider"
                       SelectedDate="@selectedDate"
                       SelectedDateChanged="d => selectedDate = d"
                       CalendarCellColor="#FFFFFF"
                       CalendarCellSelectedColor="#DBEAFE"
                       CurrentDayColor="#3B82F6" />

@code {
    ISchedulerEventProvider provider = new MyEventProvider();
    DateOnly selectedDate = DateOnly.FromDateTime(DateTime.Today);
}

Agenda View

The Blazor agenda view has full feature parity with MAUI — multi-day columns, switchable date picker modes, additional timezone columns, overlap-aware side-by-side event layout, and an auto-updating current time marker (refreshes every minute without re-rendering the component).

<SchedulerAgendaView Provider="@provider"
                     @bind-SelectedDate="selectedDate"
                     DaysToShow="3"
                     DatePickerMode="AgendaDatePickerMode.Calendar"
                     ShowAdditionalTimezones="true"
                     AdditionalTimezones="additionalTimezones"
                     ShowCurrentTimeMarker="true"
                     CurrentTimeMarkerColor="#EF4444"
                     DefaultEventColor="#6366F1"
                     TimeSlotHeight="60"
                     Use24HourTime="false" />

@code {
    ISchedulerEventProvider provider = new MyEventProvider();
    DateOnly selectedDate = DateOnly.FromDateTime(DateTime.Today);
    List<TimeZoneInfo> additionalTimezones = new()
    {
        TimeZoneInfo.FindSystemTimeZoneById("America/New_York")
    };
}

Parameter	Type	Default	Description
`Provider`	`ISchedulerEventProvider?`	`null`	Event data source
`SelectedDate`	`DateOnly`	Today	Bindable via `@bind-SelectedDate`
`DaysToShow`	`int`	`1`	Number of day columns (1–7, clamped)
`ShowCarouselDatePicker`	`bool`	`true`	Master toggle for the date picker
`DatePickerMode`	`AgendaDatePickerMode`	`Carousel`	`Carousel` (horizontal day strip), `Calendar` (full month picker with ‹/› navigation and today highlight), or `None`
`ShowAdditionalTimezones`	`bool`	`false`	Toggle extra timezone columns
`AdditionalTimezones`	`IList<TimeZoneInfo>?`	`null`	Extra time columns with UTC offset labels (e.g. “UTC+05:30”)
`ShowCurrentTimeMarker`	`bool`	`true`	Live line at the current time
`CurrentTimeMarkerColor`	`string`	`#EF4444`	Time marker color
`DefaultEventColor`	`string`	`#6366F1`	Event color when the event has none
`TimeSlotHeight`	`double`	`60.0`	Pixels per hour slot
`MinDate` / `MaxDate`	`DateOnly?`	`null`	Selection / navigation bounds
`Use24HourTime`	`bool`	`true`	24-hour or AM/PM display

Event List View

<SchedulerCalendarListView Provider="@provider"
                           @bind-SelectedDate="selectedDate"
                           DaysPerPage="30"
                           DefaultEventColor="#6366F1"
                           DayHeaderBackgroundColor="#F9FAFB"
                           DayHeaderTextColor="#111827" />

@code {
    ISchedulerEventProvider provider = new MyEventProvider();
    DateOnly selectedDate = DateOnly.FromDateTime(DateTime.Today);
}