Skip to main content

Calendar

The calendar is a control for users to select dates or date ranges.

An animation of a calendar switching between year, month and day views.

Useful properties​

You will probably use these properties most often:

PropertyDescription
SelectionModeIndicates what kind of selections are allowed. Choose from: single date, single range, multiple ranges and none.
DisplayModeDefines where the calendar starts in its drill-down levels. Choose from: decade, year and month (default).
SelectedDateThe currently selected date.
SelectedDatesA collection of selected dates, includes the dates in single and multiple ranges.
DisplayDateThe date to display when the control first shows.
DisplayDateStartThe first date to be displayed.
DisplayDateEndThe last date to be displayed.
BlackoutDatesA collection of dates that are displayed as unavailable, and cannot be selected.
AllowTapRangeSelectionWhen true (the default), allows selecting a date range by tapping a start date and then tapping an end date. Works in SingleRange and MultipleRange selection modes.

Examples​

This is a basic calendar allowing a single date selection. The calendar's selected date is shown in the text block below.

<StackPanel Margin="20">
  <Calendar SelectionMode="SingleDate"/>
  <TextBlock Margin="20" 
             Text="{Binding #calendar.SelectedDate}"/>
</StackPanel>

This example allows multiple range selections:

  <StackPanel Margin="20">
    <Calendar SelectionMode="MultipleRange"/>
  </StackPanel>

To select a range, tap or click a start date and then tap or click on the end date. This tap-to-select behavior is controlled by the AllowTapRangeSelection property, which is enabled by default. Alternatively, hold the Shift key and click on the end date to extend a range. You can add extra dates and ranges by holding the Ctrl key and clicking on other dates.

This example has custom start and end dates, and some dates unavailable. This uses C# code behind the window.

<UserControl xmlns="https://github.org/avaloniaui">
<StackPanel Margin="20">
  <Calendar x:Name="calendar" SelectionMode="SingleDate"/>
</StackPanel>
</UserControl>
C#
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        var today = DateTime.Today;
        calendar.DisplayDateStart = today.AddDays(-25);
        calendar.DisplayDateEnd = today.AddDays(25);
        calendar.BlackoutDates.Add(
            new CalendarDateRange( today.AddDays(5), today.AddDays(10)));
    } 
}

See also​

On this page