WPF - SPLessons

WPF Calendar Control

Home > Lesson > Chapter 1
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

WPF Calendar Control

WPF Calendar Control

shape Introduction

WPF provides all the features for the calendar control. Calendar control has four features.They are:

DisplayedDate

 

shape Description

By default, the calendar control shows the current date but if wanted to change the current date into a different date that can be done by using displaydate property.

shape Syntax

[csharp]<calendar displaydate="10/16/2015"></calendar>[/csharp]

shape Example

Create a new window and take one stack pannel from the toolkit then drag and drop calendar control from the toolkit or write following xmal code. [csharp]<Window x:Class="WPFCalendercontrol.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Calender" Height="350" Width="525"> <Grid> <StackPanel> <Calendar DisplayDate="10/16/2015" Width="300" Height="300" ></Calendar> </StackPanel> </Grid> </Window> [/csharp] Now run the application.Then following screen appears.

shape More Info

Here three more properties are there. SelectedDate, DisplayDateStart, and DisplayDateEnd. By using these three properties one can select date from the calender, set the start date, and end date.

shape Syntax

[csharp] <Calendar SelectedDate="12/01/2016" DisplayDateEnd="1/1/2020" DisplayDateStart="12/1/2013" ></Calend>[/csharp]

shape Further

Here we can Switch the years and months by displaydate property like below screens:

Selection modes

shape Description

Here, Selectionmode property has four values they are:
1.None

shape Description

When the property value is set as None, then it is not possible to select any date in the calendar.

shape Syntax

[csharp]<Calendar SelectionMode="None"></Calendar>[/csharp]
2.SingleDate

shape Description

When the property value is set as SingleDate, then it is possible to select one particular date needed in the calendar like below screen:

shape Syntax

[csharp]  <Calendar SelectionMode="SingleDate"></Calendar>[/csharp]
3.SingleRange

shape Description

When the property value is set as SingleRange, then it is possible to select single range of dates only

shape Syntax

[csharp]  <Calendar SelectionMode="Singlerange"></Calendar>[/csharp]
4.MultRange

shape Description

When we set the property value as MultRange, then you can abele to select number of dates which you want in the calendar like below screen:

shape Syntax

[csharp]<Calendar SelectionMode="MultipleRange"></Calendar>[/csharp]