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.
.gif)
Figure 3.
Figure 4.
Figure 5.
Suppose we set the property on decade and run the application and click on the 2014 then 2014 calendar will be display.
The following code sets the DisplayMode property to Decade.
<sdk:Calendar Height="169" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Calendar1"VerticalAlignment="Top" Width="230" DisplayMode="Decade" />
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.