BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Date Controls - Calendar

The sixty-fifth part of the Windows Presentation Foundation Fundamentals tutorial starts to look at the date controls provided by WPF. The first of these controls is Calendar, which allows the user to browse and select dates.

Calendar

The Calendar control is one of the two date

The Calendar control is one of the two date selection controls provided by Windows Presentation Foundation (WPF). It shows dates using familiar layouts, similar to real world calendars, and allows the user to select a date with a click of the mouse.

provided by Windows Presentation Foundation (WPF). It shows dates using familiar layouts, similar to real world calendars, and allows the user to select a date with a click of the mouse.

In this article we'll look at the basics of displaying calendars and selecting dates. To do so, we need a sample solution. Create a new WPF application project in Visual Studio, naming the project, "CalendarDemo". Once ready, replace the XAML of the main window with the code shown below:

<Window x:Class="CalendarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Calendar Demo"
        Height="230"
        Width="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Calendar Name="Cal"/>
        <TextBlock Name="Info" Grid.Row="1"/>
    </Grid>
</Window>

This creates a window containing a Calendar and a TextBlock. The window appears as shown below:

WPF Calendar control demo window

Run the program to see the control in action. You should see that the current date is highlighted to make it easier to see. You can also click the dates in the main area of the control to select one. Clicking the two triangles to the sides of the month at the top of the control skips forwards and backwards through months.

The image above shows the Calendar in month mode. If you click the month name at the top of the control, it switched to year mode, showing all of the months in the current year. Clicking one of the months returns to month mode, displaying that month's dates. Whilst in year mode, clicking the year in the top bar changes the control to decade mode, where a number of years are shown for selection.

The Display Date

The Calendar class includes the concept of a display date. This is a date that is within the visible date range but is not necessarily selected. By setting the DisplayDate property you can change which month, year or decade is visible, according to the display mode. You can also read the property and use it along with the Calendar's mode details to work out which dates are currently visible.

There are several ways to define a date in XAML. For the purposes of this article we'll use the yyyy-MM-dd format, where the year is defined before the month, followed by the date. All are described as integers.

Try changing the XAML for the control to the code below. This sets the display date to 31 December 1999.

<Calendar Name="Cal" DisplayDate="1999-12-31" />

Run the program again and you will see that the month of December 1999 is visible.

Detecting Display Date Changes

When you need to immediately detect a change in the displayed dates you can attach to the DisplayDateChanged event. To demonstrate, we'll capture the event and show the display date in the TextBlock. Modify the XAML for the control first:

<Calendar Name="Cal"
          DisplayDate="1999-12-31" 
          DisplayDateChanged="Calendar_DisplayDateChanged"/>

Add the following method to the code behind the window to react to the new event:

private void Calendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
    if (Info != null)
        Info.Text = Cal.DisplayDate.ToString("yyyy-MM-dd");
}

Run the program and try changing the visible dates in the Calendar to see the results.

Limit Dates

If you need to restrict the range of dates that can be displayed in a Calendar you can apply limit dates. To do so, set the earliest permissible date using the DisplayDateStart property. The end of the date range is set in DisplayDateEnd.

The following XAML restricts the Calendar's date range. You can see that dates outside of the range are hidden.

<Calendar Name="Cal"
          DisplayDate="1999-12-31" 
          DisplayDateStart="1999-11-20"
          DisplayDateEnd="2000-01-20"
          DisplayDateChanged="Calendar_DisplayDateChanged"/>
26 May 2014