Calendar Control in Silverlight

MonthlyCalendar.DisplayDateEnd = new DateTime(2009, 1, 31);

}

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 Monday and makes today hightlited.

MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Monday;

MonthlyCalendar.IsTodayHighlighted = true;

The new calendar looks like Figure 7, where you can see the start day of the week us Sunday.

Figure 7

Calendar Events

Besides the normal control events, the Calendar control has three events calendar related events. These events are the DisplayDateChanged, DisplayModeChanged, and SelectedDatesChanged. The DisplayDateChanged event is fired where the DisplayDate property is changed. The DisplayModeChanged event is fired when the DisplayMode property is changed. The SelectedDatesChanged event is fired when the SelectedDate or SelectedDates properties are changed. The following code snippet sets these three events attributes.

<basics:Calendar SelectionMode="SingleRange"

x:Name="MonthlyCalendar"

SelectedDatesChanged="MonthlyCalendar_SelectedDatesChanged"

DisplayDateChanged="MonthlyCalendar_DisplayDateChanged"

DisplayModeChanged="MonthlyCalendar_DisplayModeChanged"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Margin="10,10,0,0">

</basics:Calendar>

The code behind for these events looks like Listing 4.

private void MonthlyCalendar_SelectedDatesChanged(object sender,

SelectionChangedEventArgs e)

{

}

private void MonthlyCalendar_DisplayDateChanged(object sender,

CalendarDateChangedEventArgs e)

{

}

private void MonthlyCalendar_DisplayModeChanged(object sender,

CalendarModeChangedEventArgs e)

{

}

Listing 4

Normally, on a date selection, you may want to capture that event and know what the current selected date is. Now how about we add a TextBox control to the page and on the date selection, we are going to set the text of the TextBox to the currently selected date.

We add the following code to the XAML just below the Calendar control.

<TextBox Width="200" Height="50"

VerticalAlignment="Bottom"

HorizontalAlignment="Left"

Margin="10,10,10,10"

x:Name="SelectedDateTextBox">

</TextBox>

On the SelectedDateChanged event handler, we set the TextBox.Text property to the SelectedDate property of the Calendar control as you can see from code in Listing 5.

private void MonthlyCalendar_SelectedDatesChanged(object sender,

SelectionChangedEventArgs e)

{

SelectedDateTextBox.Text = MonthlyCalendar.SelectedDate.ToString();

}

Listing 5

Now when you run the application, you will see output looks like Figure 8. When you select a date in the Calendar, it will be displayed in the textbox.

Figure 8

Formatting a Calendar

How about we create a Calendar control with a border formatting, background, and foreground of the Calendar?

The BorderBrush property of the Calendar sets a brush to draw the border of a Calendar. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.

<basics:Calendar.BorderBrush>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

<GradientStop Color="Blue" Offset="0" />

<GradientStop Color="Red" Offset="1.0" />

</LinearGradientBrush>

</basics:Calendar.BorderBrush>

The Background and Foreground properties of the Calendar set the background and foreground colors of a Calendar. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a Calendar.

<basics:Calendar.Background>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

<GradientStop Color="Blue" Offset="0.1" />

<GradientStop Color="Orange" Offset="0.25" />

<GradientStop Color="Green" Offset="0.75" />

<GradientStop Color="Red" Offset="1.0" />

</LinearGradientBrush>

</basics:Calendar.Background>

<basics:Calendar.Foreground>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

<GradientStop Color="Black" Offset="0.25" />

<GradientStop Color="Green" Offset="1.0" />

</LinearGradientBrush>

</basics:Calendar.Foreground>

The new Calendar looks like Figure 9.

Figure 9

Setting Image as Background of a Calendar

To set an image as background of a Calendar, we can set an image as the Background of the Calendar. The following code snippet sets the background of a Calendar to an image. The code also sets the opacity of the image.

<basics:Calendar.Background>

<ImageBrush ImageSource="Garden.jpg" Opacity="0.3"/>

</basics:Calendar.Background>

The new output looks like Figure 10.

Figure 10

Creating a Calendar Dynamically

The code listed in Listing 6 creates a Calendar control programmatically. First, it creates a Calendar object and sets its DisplayMode and SelectedMode properties and later the Calendar is added to the LayoutRoot.

private void CreateDynamicCalendar()

{

Calendar cal = new Calendar();

cal.DisplayMode = CalendarMode.Year;

cal.SelectionMode = CalendarSelectionMode.SingleDate;

LayoutRoot.Children.Add(cal);

}

Listing 6

Summary

In this article, I discussed how we can create a Calendar control in Silverlight and C#. We also saw how to set display modes, selection modes, blackout dates, selected dates, border, background, and foreground properties. After that, we saw you to set an image as the background of a Calendar. In the end of this article, we saw how to create a Calendar dynamically.