Scheduler | Agenda View

A day or multi-day timeline with hourly time slots, event positioning with overlap detection, and a live current time marker. Supports multiple timezone columns, 12/24-hour time format, and an Apple Calendar-style date picker carousel.

<scheduler:SchedulerAgendaView
    Provider="{Binding Provider}"
    SelectedDate="{Binding SelectedDate}"
    DaysToShow="{Binding DaysToShow}"
    ShowCarouselDatePicker="True"
    ShowCurrentTimeMarker="True"
    ShowAdditionalTimezones="{Binding ShowAdditionalTimezones}"
    Use24HourTime="False"
    CurrentTimeMarkerColor="Red"
    DefaultEventColor="CornflowerBlue"
    TimeSlotHeight="60" />

Properties

Property	Type	Default	Description
Provider	ISchedulerEventProvider?	null	Event data source
SelectedDate	DateOnly	Today	Two-way bound selected date
MinDate	DateOnly?	null	Earliest selectable date
MaxDate	DateOnly?	null	Latest selectable date
DaysToShow	int	1	Number of day columns (1–7)
ShowCarouselDatePicker	bool	true	Show horizontal date carousel
ShowCurrentTimeMarker	bool	true	Show red line at current time
Use24HourTime	bool	true	24-hour format (HH:mm) or 12-hour (h:mm tt)
EventItemTemplate	DataTemplate?	null	Custom template for events
LoaderTemplate	DataTemplate?	null	Custom loading indicator
DayPickerItemTemplate	DataTemplate?	null	Custom template for date carousel items
CurrentTimeMarkerColor	Color	Red	Color of the time marker line
TimezoneColor	Color	Gray	Color of time labels
SeparatorColor	Color	Light gray	Color of hourly separator lines
DefaultEventColor	Color	CornflowerBlue	Default event background color
TimeSlotHeight	double	60.0	Height in pixels per hour slot
AllowPan	bool	true	Enable scrolling the timeline
AllowZoom	bool	true	Enable pinch-to-zoom (adjusts TimeSlotHeight)
ShowAdditionalTimezones	bool	false	Toggle visibility of timezone columns
AdditionalTimezones	IList<TimeZoneInfo>	empty	Additional timezones to display

Behavior

• Single-day or multi-day — Set DaysToShow from 1 to 7 for multi-column layout
• Sticky date headers — Full date (e.g. “Monday, March 30, 2026”) appears above each day column
• Time labels — In multi-day view, time labels and timezone columns appear once on the left, not repeated per day
• Overlap detection — Overlapping events display side-by-side in columns within their time range
• All-day events — Shown in a separate section above the timeline
• Current time marker — Red line with exact time display, updates every minute
• Date carousel — Horizontal scrolling date picker (Apple Calendar-style by default)
• Tap time slots — Triggers Provider.OnAgendaTimeSelected() for creating new events
• Styleable separators — Hourly separator lines respect SeparatorColor

Time Format

The Use24HourTime property controls how all times are displayed:

• true (default) — Time labels show "HH:mm" (e.g. “14:00”), events show "HH:mm" (e.g. “14:30”)
• false — Time labels show "h tt" (e.g. “2 PM”), events show "h:mm tt" (e.g. “2:30 PM”)

This affects time labels on the left column, event time text, and the current time marker display.

Multiple Timezones

Add timezone columns to display times in different zones alongside local time. The timezone abbreviation and UTC offset appear in a sticky header.

// In code-behind or view setup
AgendaView.AdditionalTimezones.Add(
    TimeZoneInfo.FindSystemTimeZoneById("America/New_York")
);
AgendaView.ShowAdditionalTimezones = true;

Or bind ShowAdditionalTimezones to a ViewModel property for user toggle:

<scheduler:SchedulerAgendaView
    ShowAdditionalTimezones="{Binding ShowAdditionalTimezones}" />

Note

The local timezone label only appears in the header when additional timezones are visible. With a single timezone, the header space is kept clean.

Date Picker Carousel

The date picker uses DefaultTemplates.CreateAppleCalendarDayPickerTemplate() by default, which renders an Apple Calendar-style day picker with circle selection. Override it with DayPickerItemTemplate using DatePickerItemContext:

public class DatePickerItemContext
{
    public DateOnly Date { get; set; }
    public string DayNumber { get; set; }   // "30"
    public string DayName { get; set; }     // "MON"
    public string MonthName { get; set; }   // "MAR"
    public bool IsSelected { get; set; }
    public bool IsToday { get; set; }
}

AgendaView.DayPickerItemTemplate = new DataTemplate(() =>
{
    var stack = new VerticalStackLayout { Spacing = 2, Padding = 4 };

    var dayName = new Label { FontSize = 10, HorizontalTextAlignment = TextAlignment.Center };
    dayName.SetBinding(Label.TextProperty, static (DatePickerItemContext c) => c.DayName);

    var dayNumber = new Label { FontSize = 16, FontAttributes = FontAttributes.Bold,
        HorizontalTextAlignment = TextAlignment.Center };
    dayNumber.SetBinding(Label.TextProperty, static (DatePickerItemContext c) => c.DayNumber);

    stack.Children.Add(dayName);
    stack.Children.Add(dayNumber);
    return stack;
});