Shiny .NET v4 is here with BLE Windows Support, Improved GPS, & More! 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

<SchedulerAgendaView Provider="@provider"
                     SelectedDate="@selectedDate"
                     SelectedDateChanged="d => selectedDate = d"
                     HoursToShow="10"
                     StartHour="8"
                     SlotDuration="30"
                     HeaderBackgroundColor="#F3F4F6"
                     CurrentTimeMarkerColor="#EF4444" />

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

Event List View

<SchedulerEventListView Provider="@provider"
                        GroupHeaderBackgroundColor="#F9FAFB"
                        GroupHeaderTextColor="#374151" />

@code {
    ISchedulerEventProvider provider = new MyEventProvider();
}