Date-Selection in WPF Calendar (CalendarEdit)

18 Nov 201824 minutes to read

This section explains how to select a date and custom UI of the WPF CalendarEdit control.

Select a date

You can select a date in the CalendarEdit control by mouse click on the specific date. You can get the selected date by using the Date property.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" />
</Window>
using Syncfusion.Windows.Shared;

CalendarEdit calendarEdit = new CalendarEdit();

Date selected from the CalendarEdit

NOTE

View Sample in GitHub

Select a date programmatically

You can set selected date programmatically by setting the date value to the Date property.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Date="25/08/2020"
                         Name="calendarEdit"/>
</Window>
using Syncfusion.Windows.Shared;

//Selecting date programmatically
this.calendarEdit.Date = new DateTime(2020, 08, 25);

Date selected programmatically from the CalendarEdit

NOTE

View Sample in GitHub

Select multiple dates

You can select multiple dates by drag and move the mouse from required start date to end date.
You can get the selected dates from the SelectedDates property. You can restrict the multiple date selection by setting AllowMultiplySelection property as false. The default value of AllowMultiplySelection property is true.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                            AllowMultiplySelection="True"/>
</Window>
using Syncfusion.Windows.Shared;

//Selecting multiple dates
this.calendarEdit.AllowMultiplySelection = true;

CalendarEdit control displaying multiple selected dates

NOTE

View Sample in GitHub

Select specific multiple dates

You can select specific multiple dates by pressing the Ctrl key and select required dates using mouse click.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                            AllowMultiplySelection="True"/>
</Window>>
using Syncfusion.Windows.Shared;

//Selecting multiple dates
this.calendarEdit.AllowMultiplySelection = true;

CalendarEdit control displaying specifically selected multiple dates

NOTE

View Sample in GitHub

Select multiple dates programmatically

You can select a multiple dates programmatically by setting the dates to the SelectedDatesList property.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Date="08/25/2020" 
                         AllowMultiplySelection="True"
                         Name="calendarEdit">
</Window>
using Syncfusion.Windows.Shared;

//Selecting multiple date programmatically
this.calendarEdit.AllowMultiplySelection = true;
this.calendarEdit.SelectedDatesList = new List<Date>();
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 01));
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 05));
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 10));
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 15));
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 20));
this.calendarEdit.SelectedDatesList.Add(new Date(2020, 08, 29));

Multiple dates selected programmatically from the CalendarEdit

Select multiple dates using key navigation

You can select a multiple dates by pressing the Shift with Arrow keys. If you want to select multiple dates in forward direction, press the Shift + Down or Shift + Right keys. If you want to select a date in backward direction, press the Shift + UP or Shift + Left keys. You can get the selected dates from the SelectedDates property.

For example, if you start selecting the date from 18 Nov 2020 using key navigation, it will select the dates as follows,

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                         AllowMultiplySelection="True"/>
</Window>
using Syncfusion.Windows.Shared;

//Selecting multiple dates
this.calendarEdit.AllowMultiplySelection = true;

Multiple dates selected by key navigation in CalendarEdit

Select specific multiple dates using key navigation

You can select or unselect the specific multiple dates by using the Ctrl, Arrow keys and Space bar.

  • Ctrl + Arrow keys → To move the focus to the top, left, bottom and right cells with maintaining the old selection.
  • Space bar → To select the currently focused item.
  • Ctrl + Space bar → To remove an item from multiple selection that is already selected.
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                         AllowMultiplySelection="True"/>
</Window>
using Syncfusion.Windows.Shared;

//Selecting multiple dates
this.calendarEdit.AllowMultiplySelection = true;

CalendarEdit control displaying specifically selected multiple dates

NOTE

View Sample in GitHub

Highlight selected date

If you want to highlight the selected date, change its foreground, background or border brush by using the SelectionForeground, SelectedDayCellBackground and SelectedDayCellBorderBrush and properties. You can also change the mouse hover background and border brush for the selected day cell by using the SelectedDayCellHoverBackground and SelectionBorderBrush properties.

Changed selected date appearance

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit SelectedDayCellBackground="Yellow" 
                         SelectedDayCellBorderBrush="Blue"
                         SelectionForeground="Red"
                         SelectedDayCellHoverBackground="Green"
                         SelectionBorderBrush="Red"
                         Name="calendarEdit" />
</Window>
using Syncfusion.Windows.Shared;

this.calendarEdit.SelectedDayCellBackground = Brushes.Yellow;
this.calendarEdit.SelectedDayCellBorderBrush = Brushes.Blue;
this.calendarEdit.SelectionForeground = Brushes.Red;
this.calendarEdit.SelectedDayCellHoverBackground = Brushes.Green;
this.calendarEdit.SelectionBorderBrush = Brushes.Red;

Selected date background and foreground changed in CalendarEdit

NOTE

View Sample in GitHub

Get today date

If you want to know the today date, use the TodayDate property. It contains the today date of the CalendarEdit control.

using Syncfusion.Windows.Shared;

CalendarEdit calendarEdit = new CalendarEdit();

//get the today date
 var today_Date= calendarEdit.TodayDate;

Display today date

If you want to display the today date in the CalendarEdit control, use the TodayRowIsVisible property value as true. It will display the today date in the bottom-left corner of the CalendarEdit control. The default value of TodayRowIsVisible property is false.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <syncfusion:CalendarEdit TodayRowIsVisible="True"
                         Name="calendarEdit" />
</Window>
using Syncfusion.Windows.Shared;

//Enable the today row
this.calendarEdit.TodayRowIsVisible = true;

Display today date

NOTE

View Sample in GitHub

Highlight today date

If you want to highlight the today date, change its foreground, background or border brush by using TodayCellForeground, TodayCellBackground and TodayCellBorderBrush properties. You can also change the selected border brush and background of the today date by using the TodayCellSelectedBorderBrush and TodayCellSelectedBackground properties.

Changing today dates foreground and background to highlight

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <syncfusion:CalendarEdit TodayCellSelectedBorderBrush="Red" 
                         TodayCellSelectedBackground="Green"
                         TodayCellForeground="Yellow"
                         Name="calendarEdit" />
</Window>
using Syncfusion.Windows.Shared;

this.calendarEdit.TodayCellSelectedBorderBrush = Brushes.Red;
this.calendarEdit.TodayCellSelectedBackground = Brushes.Green;
this.calendarEdit.TodayCellForeground = Brushes.Yellow;

Changing today dates selected foreground and background to highlight

NOTE

View Sample in GitHub

Differentiate current month days from other days

If you want to differentiate currently selected month days from previous or next month days, change the previous and next month days foreground by using the NotCurrentMonthForeground property. The default value of NotCurrentMonthForeground property is Gray.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit NotCurrentMonthForeground="Red"
                            Name="calendarEdit" />
</Window>
using Syncfusion.Windows.Shared;

this.calendarEdit.NotCurrentMonthForeground = Brushes.Red;

Changing previous and next month days foreground to differentiate current month days

NOTE

View Sample in GitHub

Change default view (Month, Year, Decade)

By default, the days are displayed in the CalendarEdit.
You can change the default calendar view as week numbers, month, years or years range mode by setting the respective value to the VisualMode property. The default value of VisualMode property is Days.

Various initial display mode for CalendarEdit

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                         VisualMode="YearsRange"/>
</Window>
using Syncfusion.Windows.Shared;

this.calendarEdit.VisualMode = CalendarVisualMode.YearsRange;

Changed initial display mode as years range

NOTE

View Sample in GitHub

Display week numbers

If you want to know the week number of the currently displayed dates, use the ShowWeekNumbers property as true. It will display the respective week numbers in the left side of the CalendarEdit control.The default value of ShowWeekNumbers property is false.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                         ShowWeekNumbers="True"/>
</Window>
using Syncfusion.Windows.Shared;

//Shows week numbers
this.calendarEdit.ShowWeekNumbers = true;

wpf calendar control shows week numbers

NOTE

View Sample in GitHub

Highlight week numbers

If you want to highlight the week numbers, change it’s foreground, background or border brush by using the WeekNumberBackground, WeekNumberForeground and WeekNumberBorderBrush properties. You can also change the mouse hover background, foreground and border brush for the selected day cell by using the WeekNumberHoverBackground, WeekNumberHoverForeground and WeekNumberHoverBorderBrush properties.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit"                   
                         WeekNumberBackground="Green" 
                         WeekNumberBorderBrush="Red"
                         WeekNumberForeground="Yellow"
                         WeekNumberHoverBackground="Yellow"
                         WeekNumberHoverBorderBrush="Blue"
                         WeekNumberHoverForeground="Green"
                         ShowWeekNumbers="True"
                         VisualMode="WeekNumbers" />
</Window>
using Syncfusion.Windows.Shared;

this.calendarEdit.WeekNumberBackground = Brushes.Green;
this.calendarEdit.WeekNumberBorderBrush = Brushes.Red;
this.calendarEdit.WeekNumberForeground = Brushes.Yellow;
this.calendarEdit.WeekNumberHoverBackground = Brushes.Yellow;
this.calendarEdit.WeekNumberHoverBorderBrush = Brushes.Blue;
this.calendarEdit.WeekNumberHoverForeground = Brushes.Green;
this.calendarEdit.ShowWeekNumbers = true;
this.calendarEdit.VisualMode = CalendarVisualMode.WeekNumbers;

Week number cells background and foreground changed in CalendarEdit

NOTE

View Sample in GitHub

Special days

You can differentiate the special day from other days by setting that date value to the SpecialDate.Date property and adding SpecialDate.Date into the SpecialDates collection. You can use the SpecialDate.CellTemplate property to customize the SpecialDate day cell appearance.

using Syncfusion.Windows.Shared;

//ViewModel.cs
public class ViewModel {
	private SpecialDatesCollection specialDates;
	public SpecialDatesCollection SpecialDates {
		get { return specialDates; }
		set { specialDates = value; }
	}
	public ViewModel() {
		SpecialDates = new SpecialDatesCollection();
	}
}
<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Window.Resources>
        <DataTemplate x:Key="WorldEnvironmentDay" >
            <Image Source="Resources\Icon_Environmental day.png" />
        </DataTemplate>
        <DataTemplate x:Key="EngineersDay" >
            <Image Source="Resources\Icon_Engineer day.png" />
        </DataTemplate>
        <DataTemplate x:Key="PollutionPreventionDay" >
            <Image Source="Resources\Icon_Pollution day.png" />
        </DataTemplate>
        <DataTemplate x:Key="NationalMathematicsDay" >
            <Image Source="Resources\Icon_Mathematics day.png" />
        </DataTemplate>
        <DataTemplate x:Key="Christmas" >
            <Image Source="Resources\Christmas.png" />
        </DataTemplate>

        <local:ViewModel x:Key="viewModel">
            <local:ViewModel.SpecialDates>
                <syncfusion:SpecialDate Date="06/05/2020" CellTemplate="{StaticResource WorldEnvironmentDay }"/>
                <syncfusion:SpecialDate Date="09/15/2020" CellTemplate="{StaticResource EngineersDay }"/>
                <syncfusion:SpecialDate Date="12/02/2020" CellTemplate="{StaticResource PollutionPreventionDay }"/>
                <syncfusion:SpecialDate Date="12/22/2020" CellTemplate="{StaticResource NationalMathematicsDay }"/>
                <syncfusion:SpecialDate Date="12/25/2020" CellTemplate="{StaticResource Christmas }"/>
            </local:ViewModel.SpecialDates>
        </local:ViewModel>
    </Window.Resources>
    
    <Grid>
        <syncfusion:CalendarEdit DataContext="{StaticResource viewModel}"                         
                                 SpecialDates="{Binding SpecialDates}"
                                 Name="calendarEdit" />
    </Grid>
</Window>

Custom appearance for the special Day cell

NOTE

View Sample in GitHub

Setting Culture

You can change the culture for CalendarEdit control by setting the required culture to the Culture property.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Name="calendarEdit" 
                         Culture="fr-FR"/>
</Window>
using Syncfusion.Windows.Shared;

//Setting french culture
this.calendarEdit.Culture = new CultureInfo("fr-FR");

wpf calendar control with french culture

Show full month and week name

You can display full month names and week day names by setting the ShowAbbreviatedDayNames and ShowAbbreviatedDayNames properties as false. The default value of ShowAbbreviatedDayNames and ShowAbbreviatedDayNames property is true.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <syncfusion:CalendarEdit ShowAbbreviatedDayNames="False"
                         ShowAbbreviatedMonthNames="False"
                         Name="calendarEdit"/>
</Window>
using Syncfusion.Windows.Shared;

this.CalendarEdit calendarEdit = new CalendarEdit();
this.calendarEdit.ShowAbbreviatedDayNames = false;
this.calendarEdit.ShowAbbreviatedMonthNames = false;

CalendarEdit shows full month and week name

NOTE

View Sample in GitHub

Tooltip for particular days

You can set tooltip for particular days in the CalendarEdit control by using the SetToolTip(Date,ToolTip) method. You can pass the specific date and tooltip to the SetToolTip(Date,ToolTip) method.

Date yesterday = new Date(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day-1);
Date today = new Date(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
CalendarEdit calendarEdit = new CalendarEdit();

//Setting tooltip for yesterday and today dates
calendarEdit.SetToolTip(yesterday, new ToolTip() { Content = "Yesterday" });
calendarEdit.SetToolTip(today, new ToolTip() { Content = "Today" });

Tooltip for today and yesterday

Custom appearance of day cell

You can customize the appearance of day cell by using styles and templates in the CalendarEdit control.

Custom UI for day cell using style

You can customize the appearance of day cell by using the DayCellsStyle property. The DataContext of the DayCellsStyle is DayCell.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <Window.Resources>    
        <!-- day cell style -->
        <Style x:Key="dayCell" 
            TargetType="{x:Type syncfusion:DayCell}">
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="Background" Value="Pink"/>
        </Style>
    </Window.Resources>
    <Grid>
        <syncfusion:CalendarEdit DayCellsStyle="{StaticResource dayCell}" 
                                Name="calendarEdit" />
    </Grid>
</Window>

Custom UI for the day cell by using DayCellsStyle

NOTE

View Sample in GitHub

Custom UI for day cell using template

You can customize the appearance of day cell by using the DayCellsDataTemplate property. The DataContext of the DayCellsDataTemplate is DayCell.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <Window.Resources>    
        <!-- day cell template -->
        <DataTemplate x:Key="dayCelltemplate"
                    DataType="syncfusion:DayCell">
            <TextBlock TextAlignment="Center"
                    Foreground="Yellow"
                    Background="Green"
                    FontFamily="Tahoma"
                    FontStyle="Normal"
                    Text="{Binding Day}"/>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <syncfusion:CalendarEdit DayCellsDataTemplate="{StaticResource dayCelltemplate}"  
                                Name="calendarEdit" />
    </Grid>
</Window>

Custom UI for the day cell by using DayCellsStyle

NOTE

View Sample in GitHub

Custom UI for day name cell using style

You can customize the appearance of day name cell by using the DayNameCellsStyle property. The DataContext of the DayNameCellsStyle is DayNameCell.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Window.Resources>    
        <!-- day name cell style -->
        <Style x:Key="daynameCellStyle" 
            TargetType="{x:Type syncfusion:DayNameCell}">
            <Setter Property="Background" Value="Yellow"/>
            <Setter Property="Foreground" Value="Yellow"/>
        </Style>
    </Window.Resources>
    <Grid>
        <syncfusion:CalendarEdit DayNameCellsStyle="{StaticResource daynameCellStyle}" 
                                Name="calendarEdit" />
    </Grid>
</Window>

Custom UI for the day name cell by using DayNameCellsStyle

NOTE

View Sample in GitHub

Selected date changed notification

The selected date changed in CalendarEdit can be examined using DateChanged event. The DateChanged event contains the old and newly selected date time values in the OldValue and NewValue properties.

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
   <syncfusion:CalendarEdit DateChanged="CalendarEdit_DateChanged" 
                          Name="calendarEdit"/>
</Window>
using Syncfusion.Windows.Shared;

this.CalendarEdit calendarEdit = new CalendarEdit();
this.calendarEdit.DateChanged += CalendarEdit_DateChanged;

You can handle the event as follows,

private void CalendarEdit_DateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    //Get old and new selected date values
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}