Skip to main content
Version: 11.0.x


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

Useful Properties

You will probably use these properties most often:

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.


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 x:Name="calendar" SelectionMode="MultipleRange"/>
<TextBlock Margin="20"
Text="{Binding #calendar.SelectedDate}"/>

This example allows multiple range selections:

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

After clicking a start date you can extend a single range by holding the shift key and clicking on the end date. You can add extra dates and ranges by holding the control 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.

<StackPanel Margin="20">
<Calendar x:Name="calendar" SelectionMode="SingleDate"/>
public partial class MainWindow : Window
public MainWindow()
var today = DateTime.Today;
calendar.DisplayDateStart = today.AddDays(-25);
calendar.DisplayDateEnd = today.AddDays(25);
new CalendarDateRange( today.AddDays(5), today.AddDays(10)));

More Information

For the complete API documentation about this control, see here.

View the source code on GitHub Calendar.cs