A calendar control is used to create a visual calendar that lets 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 using XAML and C# in WPF.
Creating a Calendar
The Calendar element represents a calendar control in XAML as in the following:
The Calendar control is defined in the System.Windows.Controls namespace. When you drag and drop a Calendar control from the Toolbox to the page, the XAML code will look like the following code where you can see a Calendar XAML element has been added within the Grid element and its Width, Height, Name and VerticalAlignment and HorizontalAlignment attributes are set.
- <Calendar Height="170" HorizontalAlignment="Left" Margin="58,32,0,0"
- Name="calendar1" VerticalAlignment="Top" Width="180" />
The default view of the Calendar control looks as in 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, that 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.
- <Calendar Name=" MonthlyCalendar" Height="30" Width="100" >
The DisplayMode property of the Calendar class represents the format of the display of a Calendar, that can be a month, year, or decade. Month is the default mode. Setting the DisplayMode to Year and Decade generates Figure 2 and Figure 3 respectively.
The Month view that is also the default view looks as in Figure 4.
If you use an example of the Decade and click on the year 2008 in Figure 3, you will get another Calendar format with all the months in the 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.
- <Calendar DisplayMode="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.
|None||No selections are allowed.|
|SingleDate||Only a single date can be selected, either by setting SelectedDate or the first value in SelectedDates. AddRange cannot be used.|
|SingleRange||A single range of dates can be selected. Setting SelectedDate, adding a date individually to SelectedDates, or using AddRange will clear all previous values from SelectedDates.|
|MultipleRange||Multiple non-contiguous ranges 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 be added. Adding a range that includes some dates that are already selected or overlaps with another range results in the union of the ranges and does not cause an exception.|
The following code snippet sets the SelectionMode property to a single range.
- <Calendar SelectionMode="SingleRange">
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 the month of March of the year 2010, we would like to block the dates from Jan 1st to Jan 7th and then all Sundays and the final calendar should look as in Figure 5.
Part 2 Continuous..