Silverlight Calendar Control

Represents a control that enables a user to select a date by using a visual calendar display.

Namespace:  System.Windows.Controls
Assembly:  System.Windows.Controls (in System.Windows.Controls.dll)

Remarks

A Calendar control can be used on its own, or as a drop-down part of a DatePicker control. For more information, see DatePicker.

A Calendar displays either the days of a month, the months of a year, or the years of a decade, depending on the value of the DisplayMode property. When displaying the days of a month, the user can select a date, a range of dates, or multiple ranges of dates. The kinds of selections that are allowed are controlled by the SelectionMode property.

The range of dates displayed is governed by the DisplayDateStart and DisplayDateEnd properties. If DisplayMode is Year or Decade, only months or years that contain displayable dates will be displayed. Setting the displayable range to a range that does not include the current DisplayDate will throw an ArgumentOutOfRangeException.

The BlackoutDates property can be used to specify dates that cannot be selected. These dates will be displayed as dimmed and disabled.

By default, Today is highlighted. This can be disabled by setting IsTodayHighlighted to false.

The Calendar control provides basic navigation using either the mouse or keyboard. The following table summarizes keyboard navigation.

Note: The Calendar control is available as part of the libraries in the Silverlight Software Development Kit (SDK). For more information, see the Silverlight Tools.

Customizing the Calendar Control

Note: Setting a visual property will only have an effect if that property is both present in Calendar control's default template and is set by using a TemplateBinding. You can find a list of visual properties in the "Changing the Visual Structure of a Control" section of Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Examples
The following code and XAML creates a page with two Calendar controls and two DatePicker controls. The Calendar and DatePicker controls are configured in a variety of ways.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace CalendarExample
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            //Sets a Calendar to display a range of dates from 1/10/2009 to
            //4/18/2009.  2/15/2009 is selected, but 3/2009 is initially
            //displayed.
            cal.SelectedDate = new DateTime(2009, 2, 15);
            cal.DisplayDate = new DateTime(2009, 3, 15); //if DisplayDate is not set, the Calendar displays
            //the SelectedDate.
            cal.DisplayDateStart = new DateTime(2009, 1, 10);
            cal.DisplayDateEnd = new DateTime(2009, 4, 18);

            //Sets a Calendar to allow multiple selections, and configures
            //some dates to be unselectable.
            cal3.SelectionMode = CalendarSelectionMode.MultipleRange;
            cal3.DisplayDate = new DateTime(2009, 1, 1);
            cal3.DisplayDateStart = new DateTime(2009, 1, 1);
            cal3.DisplayDateEnd = new DateTime(2009, 1, 31);
            cal3.BlackoutDates.Add(new CalendarDateRange(new DateTime(2009, 1, 2), new DateTime(2009, 1, 4)));
            cal3.BlackoutDates.Add(new CalendarDateRange(new DateTime(2009, 1, 9)));
            cal3.BlackoutDates.Add(new CalendarDateRange(new DateTime(2009, 1, 16)));
            cal3.BlackoutDates.Add(new CalendarDateRange(new DateTime(2009, 1, 23), new DateTime(2009, 1, 25)));
            cal3.BlackoutDates.Add(new CalendarDateRange(new DateTime(2009, 1, 30)));

            cal3.SelectedDates.Add(new DateTime(2009, 1, 5));
            cal3.SelectedDates.AddRange(new DateTime(2009, 1, 12), new DateTime(2009, 1, 15));
            cal3.SelectedDates.Add(new DateTime(2009, 1, 27));

            //Hook up events to event handlers.
            dp1.CalendarOpened += new RoutedEventHandler(dp1_CalendarOpened);
            dp1.CalendarClosed += new RoutedEventHandler(dp1_CalendarClosed);

            dp2.SelectedDateChanged += new EventHandler<SelectionChangedEventArgs>(dp2_SelectedDateChanged);
            cal2.DisplayDateChanged += new EventHandler<CalendarDateChangedEventArgs>(cal_DisplayDateChanged);
        }

        //Simple event handlers that updates a TextBlock when
        //the drop-down calendar is opened or closed.
        void dp1_CalendarOpened(object sender, RoutedEventArgs e)
        {
            text1.Text = "DatePicker Calendar opened!";
        }
        void dp1_CalendarClosed(object sender, RoutedEventArgs e)
        {
            text1.Text = "DatePicker Calendar closed!";
        }

        //Updates a TextBlock with information from the SelectedDateChanged event.
        void dp2_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
        {
            //RemovedItems will be null if this is the first time a date was selected.
            if (e.RemovedItems == null || e.RemovedItems.Count == 0)
            {
                text1.Text = "Changed SelectedDate from null to " + e.AddedItems[0] + "!";
            }
            else
            {
                text1.Text = "Changed SelectedDate from " + e.RemovedItems[0] + " to " + e.AddedItems[0] + "!";
            }
        }

        //Updates a TextBlock with information from the DisplayDateChanged event.
        //This will happen every time the visible month changes, whether triggered
        //by user input or by code.
        void cal_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
        {
            //This should never occur unless DisplayDate is explicitly set to null.
            if (e.RemovedDate == null)
            {
                text1.Text = "Changed DisplayDate from null to " + e.AddedDate + "!";
            }
            else
            {
                text1.Text = "Changed DisplayDate from " + e.RemovedDate + " to " + e.AddedDate + "!";
            }
        }
    }
}
 
XAML

<UserControl  xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="CalendarExample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="Trebuchet MS" FontSize="11"
    Width="600" Height="750">
    <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal" Margin="5" >
        <!-- A basic Calendar. -->
        <TextBlock  Width="100"
                   Text="Calendar with date ranges defined:" TextWrapping="Wrap" Margin="5" />
        <controls:Calendar x:Name="cal" />

        <!-- A Calendar does not highlight today's date. -->
            <TextBlock  Width="100"
                   Text="Calendar that does not highlight today's date:" TextWrapping="Wrap" Margin="5"/>
            <controls:Calendar x:Name="cal2" Canvas.Left="270" Canvas.Top="100"
                        IsTodayHighlighted="false" />
        </StackPanel>
        <!-- Two DatePicker controls, one using the default Short date format -->
        <!-- and the other using the Long date format. -->
        <StackPanel Orientation="Horizontal" >
        <TextBlock Width="200" Margin="5"
                   Text="DatePicker with Short date format and Calendar event handlers:" TextWrapping="Wrap" />
        <controls:DatePicker x:Name="dp1" Height="20" Width="200" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" >
        <TextBlock Width="200" Margin="5"
                   Text="DatePicker with Long date format and DateSelected event handler:" TextWrapping="Wrap" />
        <controls:DatePicker Height="20" x:Name="dp2" SelectedDateFormat="Long" Width="200"/>
        </StackPanel>
        <!-- Output TextBlock -->
        <TextBlock x:Name="text1" HorizontalAlignment="Left" Height="40" Width="350" Margin="5" />

        <!-- A Calendar to demonstrate multiple selection. -->
        <StackPanel Orientation="Horizontal" >
        <TextBlock  Width="200" Margin="5"
                   Text="Calendar with multiple selections and blackout dates:" TextWrapping="Wrap" />
        <controls:Calendar x:Name="cal3" />
        </StackPanel>
     </StackPanel>
</UserControl>

Two Calendar controls are shown, one with selections and blackout dates and one without.

Output :