Silverlight Calendar Control in VB.NET

In this article we will learn how to create and use Calendar control in Silverlight 4.

Calendar control

Calendar control is a control that allows the user to select a date.

Properties - These are the following properties of the Calendar control.

Figure 1.

DisplayMode - Gets or sets the value indicating whether calendar is displayed months, years and decades.

SelectionMode -Indicating that What kinds of selection is allowed such as singleDate,SingleRange, MultipleRange,None.

DisplayDateStart - Gets or sets the first date to be displayed.

DisplayDateEnd - Gets or sets the last date to be displayed.

BlackoutDates - property can be used to specify dates that cannot be selected.

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

SelectedDates - The SelectedDate property represents the currently selected date.

Creating a calendar in XAML

<sdk:Calendar Height="169" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Calendar1"VerticalAlignment="Top" Width="230" />

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 X:Name attribute represents the name of the control, which is a unique identifier of a control.

The default view of the Calendar control looks like this.

Figure 2.

DisplayMode
 

The DisplayMode property are used to 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 shows Figure 3 and Figure 4 respectively.

The default month view of the Calendar control looks like this.

Figure 3.
 

Figure 4.

Figure 5.

BlackoutDates

The BlackoutDates property of the Calendar are used to represents a collection of dates that are not available for selection. All non selection dates are marked by a cross. For example, say in dec month of year 2010, we would like to block dates from Dec 1st to Dec 4th the calendar should look like this.

Add the following code.

Public Sub New()

 InitializeComponent()

Calendar1.BlackoutDates.Add(New CalendarDateRange(New DateTime(2010, 12, 1), NewDateTime(2010, 12, 4)))

    End Sub

Now run the application.

Figure 6.

DisplayDateStart and DisplayDateEnd

The Calendar control allows you to set the start and end display dates by using the DisplayDateStart and DisplayDateEnd properties.

For example we want to display the date only for December 1 to 31. that means starting date is 1 and ending 

date is 31 in the calendar.

Now selecting both the property.

DisplayDateStart - 12/1/2010

DisplayDateEnd - 12/31/2010

The form looks like this.

Figure 7.
 

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.

Select calendar control on the form and press F4 to property window and set these property. such as 

Figure 8.

The form looks like this.

Figure 9.

Calendar by default Event

On the SelectedDateChanged event handler, we set the TextBox. Text property to the SelectedDate property of the Calendar control.

Private Sub Calendar1_SelectedDatesChanged(ByVal sender As System.Object, ByVal e AsSystem.Windows.Controls.SelectionChangedEventArgs) Handles Calendar1.SelectedDatesChanged

        TextBox1.Text = Calendar1.SelectedDate.ToString()

    End Sub

Now run the application and select date from the calendar it will be display on the Textbox control.

Figure 10.
 

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.

XAML Code:

<sdk:Calendar.Background>

                <ImageBrush ImageSource="/SilverlightApplication27;component/Images/flowers-image.jpg" />

            </sdk:Calendar.Background>

The form looks like this.

Figure 11.