Home > DeveloperSection > Beginner > Calendar Control in WPF

Calendar Control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 8464  View(s)
Rate this:

Calendar Control in WPF

A Calendar control in WPF is used to create a visual calendar in WPF through which users can pick date and raise an event on the selection of date. The XAML <Calendar /> elements is used to create a calendar control in WPF. In this demonstration I will show you how to use calendar control in WPF.

The following code snippet represents use of Calendar control in WPF

<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" />

 

Width property is used to set Width of the calendar control while Height property is used to set Height of the calendar control.

Output of the following code snippet is as follows

Calendar Control in WPF

The default view of the calendar control is show in figure. This is also known as Month view.

DisplayMode of a Calendar control

The DisplayMode property of a calendar control represents the format of display of calendar which can be month, year or decade. Month is default mode. In next to figure I will show you the year and decade mode of the calendar control.

Calendar Control in WPF

Year view of the calendar control.

Calendar Control in WPF

Decade view of the calendar control.

SelectionMode property in Calendar control

The SelectionMode property of Calendar control represents way in which we select dates in Calendar control. There are 4 possible values of SelectionMode property.

Property:

Ø  None— Means no selection are allowed.

Ø  SingleDate— Means only a single date can be selected.

Ø  SingleRange— Means single range of date can be selected.

Ø  MultipleRange—Means non-contiguous range of date can be selected.

The following code snippet represents the SelectionMode property to Single Range.

<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange" />

 

Output of the following code snippet is as follows

Calendar Control in WPF

BlackoutDates property in Calendar control

The Blackout Dates property in calendar control represents such types of dates which cannot be selected by users. All non selection dates are marked by cross.

The following code snippet represents use of BlackoutDates property in Calendar control

<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange">

            <Calendar.BlackoutDates>

                <CalendarDateRange Start="2/1/2011" End="3/7/2011"/>

                <CalendarDateRange Start="2/8/2011" End="3/8/2011"/>

            </Calendar.BlackoutDates>

</Calendar>

The output of the following code snippet values are as follows

Calendar Control in WPF

Retrieving selected date from Calendar control

The following code snippet represents that how to retrieve Current date from Calendar control

<Calendar Height="170" HorizontalAlignment="Left" Margin="150,12,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange">

            <Calendar.BlackoutDates>

            </Calendar.BlackoutDates>

        </Calendar>

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="103,188,0,0" x:Name="txtSelectedDate" VerticalAlignment="Top" Width="337" />

        <Button Content="Display Selected Date" Height="23" HorizontalAlignment="Left" Margin="103,228,0,0" x:Name="btnSelectedDate" VerticalAlignment="Top" Width="254" Click="btnSelectedDate_Click" />

 

Business logic to retrieve date from Calendar control

private void btnSelectedDate_Click(object sender, RoutedEventArgs e)

{

            DateTime date = (DateTime) calendar1.SelectedDate;

            txtSelectedDate.Text = "Selected Date From Calendar Control  :  " + date.ToString();

}

Output of above code snippet is as follows

Calendar Control in WPF

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick