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
AllowEventDrag	bool	false	Drag events to a new time — see Drag & Drop Editing
AllowEventResize	bool	false	Drag an event’s top/bottom grip to change its duration
DragSnapMinutes	int	15	Snap granularity while dragging (1–60)
MinEventDuration	TimeSpan	15 min	Resize floor
DragActivationDelay	TimeSpan	350 ms	Long-press arming delay for touch/pen; mouse never waits
AllowCrossDayDrag	bool	true	Allow dragging between day columns when DaysToShow > 1
DragSnapGuideColor	string?	null	CSS colour of the guide line at the snapped position
DragValidationMode	AgendaDragValidationMode	OnCommit	PerPosition calls CanChangeEventTo on every snap boundary for live rejection feedback (slower on WASM)
EventChangeFailed	EventCallback<SchedulerEventChangeFailure>	—	Raised when OnEventChanged throws; the change is already reverted

Drag/resize is off by default: with both flags unset the JS module is never imported and the rendered markup is unchanged. See Drag & Drop Editing for the provider members, the DST rules, and the Identifier uniqueness requirement.

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.