MonthCalendar

The MonthCalendar control presents a calendar using several view levels. It includes smooth animations when navigating and is highly customizable.

Navigation

The current view presented by the MonthCalendar is controlled by the ActiveDate and ActiveViewMode properties. There are various methods of navigating through the control, which are described below.

Zooming In and Out

The MonthCalendar control supports four view modes: Month, Year, Decade, and Century. The various view modes make it easier to navigate from one date to another, by allowing the user to zoom out and then drill back into a specific date.

The MonthCalendar control showing the year, decade, and century views, repsectively

The end-user can zoom out by clicking the title bar text (e.g., "August 2014" for the month view). When an individual item is clicked, that item is zoomed in. So, clicking on August in the year view, will zoom in to the month view for August.

By default, the user can zoom out all the way out to the century view. This can be restricted by setting the MaxViewMode property.

Scrolling

Using the arrows in the title bar, the current view can be scrolled left or right. For the month view, scrolling left will move to the previous month and scrolling right will move to the next month. The other views move to their respective previous and next views (e.g., year, decade, century).

Keyboard/Item Navigation

When the MonthCalendar has focus, the arrow keys can be used to navigate through the current view. When moving onto an overflow item, which is an item that actually belongs to the next or previous view, then the next/previous view will be scrolled into view.

Today Button

A "today" command is available via the MonthCalendar.SelectTodayCommand property that can be bound to any button. When the button is tapped, the item that contains DateTime.Today will be selected and scrolled into view.

View Reset

The view presented by the MonthCalendar can be reset to the Month view when it loses focus, by setting the ViewResetMode property. This feature is useful when the calendar is being hosted in a Popup.

Selection

The MonthCalendar can be used to select one or more dates. The currently selected dates are available in the SelectedDates collection. Additionally, the first selected date can be retrieved using the SelectedDate property. The SelectedDate property supports two-way binding.

The SelectionChanged event is raised whenever the SelectedDate or SelectedDates properties change.

The number of selected dates can be restricted using the MaxSelectionCount property. When set to -1 (the default value), no limit is imposed.

The calendar supports several selection modes, each with a unique behavior. The selection mode is configured using the SelectionMode property.

The day of week header items and week number items can be used for selection, when the SelectionMode allows multiple dates to be selected. This feature can be disabled by setting IsDayOfWeekSelectionEnabled and/or IsWeekNumberSelectionEnabled properties to false.

A "clear" button can be included by setting IsClearButtonVisible to true. This button clears the current selection, which is useful when multiple date selection is enabled.

Disabled Dates

The Minimum and Maximum properties can be used to restrict the date range over which the user can navigate and select a date. Any dates falling outside of that range will appear disabled and won't be selectable.

Within the minimum and maximum range, other dates can be disabled as well. All instances of dates that fall over certain days of week can be disabled by setting the DisabledDaysOfWeek property, which accepts one or more values from the flags enumeration DaysOfWeek. This is useful for scenarios where you might not wish to allow weekend days to be selected.

Finally, for any dates that would normally be enabled within the Minimum and Maximum range, and aren't disabled by the DisabledDaysOfWeek property, a special IsDateDisabledFunc property can optionally supply a function that is passed a DateTime and returns true if the specified date should be disabled. This function is called for each day cell that is rendered.

This example code shows how to set the IsDateDisabledFunc property with a function that disables the first Tuesday of each month.

disabledDaysCalendar.IsDateDisabledFunc = d => (d.DayOfWeek == DayOfWeek.Tuesday) && (d.Day >= 8) && (d.Day <= 14);

Customization

MonthCalendar offers several properties that can be used to customize the look of the control.

General

There properties can be used to customize the overall look of the MonthCalendar, as described below.

Styles

The various items presented by the MonthCalendar can be customized using a DataTemplate or Style.