Calendar control in WPF using VB.NET

In this article we will learn how to create and use Calendar control and also defines the important properties of the Calendar control in WPF.
  • 1147

In this article we will learn how to create and use Calendar control and also defines the important properties of the Calendar control in WPF.

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.

cal1.gif
 

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

<Calendar Height="170" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Calendar1"VerticalAlignment="Top" Width="180" />

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 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.


 

cal2.gif
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.


 

cal3.gif
 

Figure 3.

 

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


 

cal2.gif
 

Figure 4.

 

Now select DisplayMode year view of the Calendar control looks like this.


 

cal5.gif 

Figure 5

 

Now sets the DisplayMode property to Decade. 
 


 

cal6.gif 

Figure 6.

 

Suppose we set the property on decade and run the application and click on the 2014 then 2014 calendar will be display.
 

XAML code

 

<Calendar Height="170" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Calendar1"VerticalAlignment="Top" Width="180" 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.


 

cal7.gif 

Figure 7.

 

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

cal8.gif
 

Figure 8.

The form looks like this.

cal9.gif
 

Figure 9.

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 
 

cal10.gif
 

Figure 10.

The form looks like this.

cal11.gif
 

Figure 11.

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.ObjectByVal e AsSystem.Windows.Controls.SelectionChangedEventArgsHandles 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.


 

cal12.gif 

Figure 12.

 

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:

<Calendar.Background>

 <ImageBrush ImageSource="/WpfApplication5;component/Images/imagec26.jpg" />

     </Calendar.Background>

 

The form looks like this.


 

cal13.gif 

Figure 13. 

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.