Working with WPF Calendar

A Calendar control is used to create a visual calendar that let users pick a date and fire an event on the selection of the date. This article demonstrates how to create and use a Calendar control in WPF using XAML and C#.

Creating a Calendar

The Calendar element represents a WPF calendar control in XAML.

The Calendar control is defined in the System.Windows.Controls namespace. When you drag and drop a Calendar control from Toolbox to the page, the XAML code will look like following code where you can see a Calendar XAML element is added within the Grid element and its Width, Height, Name, and VerticalAlignment and HorizontalAlignment attributes are set.

The default view of the Calendar control looks like Figure 1.

Figure 1

The Width and Height attributes of the Calendar element represent the width and the height of a Calendar. The Content attribute represents the text of a Calendar. The Name attribute represents the name of the control, which is a unique identifier of a control.

The code snippet in Listing 1 creates a Calendar control and sets the name, height, and width properties of a Calendar control.

Listing 1

Display Modes

The DisplayMode property of the Calendar class represents the format of display of a Calendar, which can be a month, year, or decade. Month is the default mode. By setting the DisplayMode to Year and Decade generates Figure 2 and Figure 3 respectively.

Figure 2

Figure 3

The Month view that is also the default view looks like Figure 4.

Figure 4

If you take an example of the Decade, and click on year 2008 in Figure 3, you will get another Calendar format with all months in year 2008 and if you click on any month, you will eventually get the month view of the Calendar.

The following code snippet sets the DisplayMode property to Decade.

Selection Modes and Selection Dates

The SelectedDate property represents the currently selected date. If multiple dates selection is true, the SelectedDates property represents a collection of currently selected dates.

The SelectionMode of type CalendarSelectionMode enumeration represents the selection mode of calendar. Table 1 describes the CalendarSelectionMode enumeration and its members.

CalendarSelectionMode	Description
None	No selections are allowed.
SingleDate	Only a single date can beselected, either by setting SelectedDate or the first value in SelectedDates. AddRange cannot be used.
SingleRange	A single range of dates canbe selected. Setting SelectedDate, adding a date individually to SelectedDates, or using AddRange will clear allprevious values from SelectedDates.
MultipleRange	Multiple non-contiguousranges of dates can be selected. Adding a date individually to SelectedDates or using AddRange will not clear SelectedDates. Setting SelectedDate will still clear SelectedDates, but additional dates or range can then beadded. Adding a range that includes some dates that are already selected oroverlaps with another range results in the union of the ranges and does notcause an exception.

The following code snippet sets the SelectionMode property to single range.

BlackoutDates

The BlackoutDates property of the Calendar class represents a collection of dates that are not available for selection. All non selection dates are marked by a cross. For example, say in March month of year 2010, we would like to block dates from Jan 1^st to Jan 8^th and then all Mondays. The final calendar should look like Figure 5.

Figure 5

The following code snippet adds backout dates to a Calendar.

We can achieve this by adding code listed in Listing 2. As you can see from Listing 3, the BlackoutDates.Add method takes a CalendarDateRange object, which is a collection of two DateTime objects. The first date is the start date of the range and second date is the end date of the date range.

Listing 2

DisplayDateStart and DisplayDateEnd

The Calendar control allows you to set the start and end display dates by using the DisplayDateStart and DisplayDateEnd properties. If you see Figure 5 in the previous section, you may notice the March 2010 month calendar display start with March 01, 2010 date. But now what if you want to display dates for March 2010 month only? We can use the DisplayStartDate and DisplayEndDate properties to control the start and end dates of a month.

DisplayDate property represents the current date to display.

The following code snippet sets the DisplayDate, DisplayDateStart and DisplayDateEnd attributes of Calendar element in XAML.

The code listed in Listing 3 makes sure the start date is March 01, 2010 and end date is March 31, 2010. The current selected date is March 05.

Listing 3

The new calendar looks like Figure 6.

Figure 6

FirstDayOfWeek and IsTodayHighlighted

By default, Sunday is the first day of week. If you would like to change it, you use FirstDayOfWeek property. The IsTodayHightlighted property is used to make today highlighted.

The following code snippet sets the FirstDayOfWeek to Tuesday and makes today highlighted.