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);
}

Note

On Blazor, colors are CSS strings (e.g. "#3B82F6"). Date selection uses @bind-SelectedDate / SelectedDateChanged callbacks instead of two-way BindableProperty. The ISchedulerEventProvider interface is identical across MAUI and Blazor.