The following code snippet adds blackout dates to a Calendar.
<Calendar.BlackoutDates>
<CalendarDateRange Start="3/1/2010" End="3/7/2010"/>
<CalendarDateRange Start="3/8/2010" End="3/8/2010"/>
<CalendarDateRange Start="3/15/2010" End="3/15/2010"/>
<CalendarDateRange Start="3/22/2010" End="3/22/2010"/>
<CalendarDateRange Start="3/29/2010" End="3/29/2010"/>
</Calendar.BlackoutDates>
We can do this by adding the code listed in Listing 2. As you can see from Listing 3, the BlackoutDates.Add method takes a CalendarDateRange object, that is a collection of two DateTime objects. The first date is the start date of the range and the second date is the end date of the date range.
private void SetBlackOutDates()
{
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
new DateTime(2010, 3, 1),
new DateTime(2010, 3, 7)
));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
new DateTime(2010, 3, 8),
new DateTime(2010, 3, 8)
));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
new DateTime(2010, 3, 15),
new DateTime(2010, 3, 15)
));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
new DateTime(2010, 3, 22),
new DateTime(2010, 3, 22)
));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(
new DateTime(2010, 3, 29),
new DateTime(2010, 3, 29)
));
}
Listing 2
DisplayDateStart and DisplayDateEnd
The Calendar control allows you to set the start and end display dates using the DisplayDateStart and DisplayDateEnd properties. If you see Figure 5 in the previous section, you may notice the March 2010 month calendar display starts with the March 01, 2010 date. But now, what if you want to display the dates for only the month of March 2010? 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 the Calendar element in XAML.
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/1/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
/>
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.
private void SetDisplayDates()
{
MonthlyCalendar.DisplayDate = new DateTime(2010, 3, 5);
MonthlyCalendar.DisplayDateStart = new DateTime(2010, 3, 1);
MonthlyCalendar.DisplayDateEnd = new DateTime(2010, 3, 31);
}
Listing 3
The new calendar looks as in Figure 6.
Figure 6
FirstDayOfWeek and IsTodayHighlighted
By default, Sunday is the first day of the week. If you would like to change it, you use the FirstDayOfWeek property. The IsTodayHightlighted property is used to highlight today.
The following code snippet sets the FirstDayOfWeek to Tuesday and makes today highlighted.
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/5/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
FirstDayOfWeek="Tuesday"
IsTodayHighlighted="True"
xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">
The following code snippet sets the FirstDayOfWeek to Tuesday and makes today highlighted in WPF.
MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Tuesday;
MonthlyCalendar.IsTodayHighlighted = true;
The new calendar looks as in Figure 7, where you can see the start day of the week is Tuesday.
Figure 7
Selected Date and Selected Dates
The SelectedDate property represents the current selected date. If multiple date selection is true then the SelectedDates property represents all the selected dates in a Calendar. The following code snippet sets the SelectedDates in XAML at design-time.
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/5/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
FirstDayOfWeek="Tuesday"
IsTodayHighlighted="True"
xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">
<Calendar.SelectedDates>
<sys:DateTime>3/5/2010</sys:DateTime>
<sys:DateTime>3/15/2010</sys:DateTime>
<sys:DateTime>3/25/2010</sys:DateTime>
</Calendar.SelectedDates>
</Calendar>
The selected dates in a Calendar looks as in Figure 8 where you can see March 5th, 15th and 25th have a light blue background and represents the selected dates.
Figure 8
The following code snippet sets the SelectedDates property in WPF at run-time.
private void AddSelectedDates()
{
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 5));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 15));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 25));
}
Note: If you have set the selected dates to any of the blackout dates, you will see the parser in XAML will throw an error as in Figure 9.
Figure 9