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 switchable date picker modes — a horizontal carousel, a collapsible calendar sheet, or no picker at all.

<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 the date picker (works with DatePickerMode)
DatePickerMode	AgendaDatePickerMode	Carousel	Date picker style: Carousel, Calendar, or None
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	false	Enable pinch-to-zoom (adjusts TimeSlotHeight)
ShowAdditionalTimezones	bool	false	Toggle visibility of timezone columns
AdditionalTimezones	IList<TimeZoneInfo>	empty	Additional timezones to display
UseFeedback	bool	true	Haptic click on event and time slot taps

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 picker modes — DatePickerMode controls which picker is shown: Carousel (default), Calendar (collapsible month sheet), or None
• Calendar sheet picker — When DatePickerMode="Calendar", shows a compact calendar that starts collapsed to the selected week. Pull the handle or tap it to expand to a full month view with month navigation arrows. Tapping a date selects it and updates the agenda.
• Date carousel — When DatePickerMode="Carousel", shows a 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 Modes

The DatePickerMode property controls which date picker appears above the timeline:

Mode	Description
Carousel	Horizontal scrolling day picker (Apple Calendar-style). This is the default. Override with DayPickerItemTemplate.
Calendar	Collapsible month calendar sheet. Starts collapsed showing the selected week. Pull or tap the handle to expand to full month view with forward/back navigation.
None	No picker is shown. Control the selected date entirely from your ViewModel.

<!-- Calendar picker mode -->
<scheduler:SchedulerAgendaView
    Provider="{Binding Provider}"
    SelectedDate="{Binding SelectedDate}"
    DatePickerMode="Calendar"
    ShowCarouselDatePicker="True" />

Note

ShowCarouselDatePicker must be True for either Carousel or Calendar mode to appear. Setting it to False hides both pickers regardless of DatePickerMode.

Carousel Mode

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

Calendar Mode

When DatePickerMode="Calendar", a compact month calendar replaces the carousel. It features:

• Collapsed state — Shows only the row containing the selected date, saving vertical space
• Expanded state — Full month grid with forward/back navigation arrows
• Pull handle — Drag down to expand, drag up to collapse; or tap to toggle
• Today indicator — Small dot below today’s date number
• Selected date highlight — Blue circle on the selected date
• Auto-navigation — Selecting a date outside the displayed month automatically navigates to that month
• Locale-aware — Day-of-week headers use abbreviated names from the current culture