Skip to content
Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

Scheduler | Calendar View

A monthly calendar grid with swipe navigation and event dots/summaries per day cell. Tap a day to select it, swipe left/right to navigate months.

<scheduler:SchedulerCalendarView
Provider="{Binding Provider}"
SelectedDate="{Binding SelectedDate}"
DisplayMonth="{Binding DisplayMonth}"
MaxEventsPerCell="3"
FirstDayOfWeek="Sunday"
CalendarCellColor="White"
CalendarCellSelectedColor="LightBlue"
CurrentDayColor="DodgerBlue" />
Property Type Default Description
Provider ISchedulerEventProvider? null Event data source
SelectedDate DateOnly Today Two-way bound selected date
DisplayMonth DateOnly Today Two-way bound display month
MinDate DateOnly? null Earliest navigable date
MaxDate DateOnly? null Latest navigable date
ShowCalendarCellEventCountOnly bool false Show count badge instead of event items
EventItemTemplate DataTemplate? null Custom template for event items in cells
OverflowItemTemplate DataTemplate? null Custom template for “+N more” overflow
LoaderTemplate DataTemplate? null Custom loading indicator
MaxEventsPerCell int 3 Max events shown per cell before overflow
CalendarCellColor Color White Background color of day cells
CalendarCellSelectedColor Color LightBlue Background of selected day
CurrentDayColor Color DodgerBlue Accent color for today
FirstDayOfWeek DayOfWeek Sunday First day of the week
AllowPan bool true Enable swipe navigation between months
AllowZoom bool false Enable pinch-to-zoom on calendar grid
UseFeedback bool true Haptic click on day and event taps
  • Month navigation via arrow buttons and swipe left/right
  • Tap a day cell to select it — updates SelectedDate (two-way)
  • Events grouped by date with color indicators
  • When a cell has more events than MaxEventsPerCell, an overflow indicator appears (“+N more”)
  • All-day events sort to top within each cell
  • MinDate/MaxDate prevent navigation and selection outside bounds

The EventItemTemplate binds to SchedulerEvent. The default shows a colored bar with the event title.

CalendarView.EventItemTemplate = new DataTemplate(() =>
{
var label = new Label { FontSize = 10, LineBreakMode = LineBreakMode.TailTruncation };
label.SetBinding(Label.TextProperty, static (SchedulerEvent e) => e.Title);
label.SetBinding(Label.TextColorProperty, static (SchedulerEvent e) => e.Color);
return label;
});

The OverflowItemTemplate binds to CalendarOverflowContext:

public class CalendarOverflowContext
{
public int EventCount { get; set; }
public DateOnly Date { get; set; }
}
CalendarView.OverflowItemTemplate = new DataTemplate(() =>
{
var label = new Label { FontSize = 10, TextColor = Colors.Gray };
label.SetBinding(Label.TextProperty,
static (CalendarOverflowContext c) => c.EventCount,
converter: new FuncConverter<int, string>(count => $"+{count} more"));
return label;
});