Exploring WinUI Calendar Date Picker and Calendar DateRange Picker
Tags: winui, csharp, dotnet
Published: 2022-02-11 13:30:30

---
title: Exploring WinUI Calendar Date Picker and Calendar DateRange Picker
published: true
date: 2022-02-11 11:30:31 UTC
tags: winui, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/exploring-winui-calendar-date-picker-and-calendar-daterange-picker.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Exploring-WinUI-Calendar-Date-Picker-and-Calendar-DateRange-Picker-672x372.png
---

[WinUI Calendar Date Picker](https://www.syncfusion.com/winui-controls/calendar-date-picker "WinUI Calendar Date Picker") allows users to select a date from a dropdown calendar or enter a date in an editor and clear the selected date on demand. It supports editing with validation and watermark text display. You can also customize the input format and calendar UI in the dropdown.

[WinUI Calendar DateRange Picker](https://www.syncfusion.com/winui-controls/calendar-daterange-picker "WinUI Calendar DateRange Picker") allows users to select a range of dates from a dropdown calendar or enter a date range in an editor and clear the selected date range on demand. Also, it supports built-in watermarks and predefined date ranges.

Let’s explore the features of the WinUI Calendar Date Picker and Calendar DateRange Picker controls and the steps to get started with them!

## Getting started with the WinUI Calendar Date Picker

Follow these steps to add the Calendar Date Picker to the XAML page of your WinUI application:

1. Create a [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Documentation to create a WinUI 3 app").
2. Download and install the [Syncfusion.Calendar.WinUI](https://www.nuget.org/packages/Syncfusion.Calendar.WinUI "Syncfusion.Calendar.WinUI NuGet Package") NuGet package in the project.
3. Import the control namespace **Syncfusion.UI.Xaml.Calendar** on the XAML page.
4. Finally, initialize the WinUI Calendar Date Picker control.Refer to the following code example.
```html
<Window
    x:Class="WinUI_Calendar.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_Calendar "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
    mc:Ignorable="d">
    <Grid>
        <calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      x:Name="calendarDatePicker"
                                     />
</Grid>
</Window>
```

![WinUI Calendar Date Picker Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/WinUI-Calendar-Date-Picker-Control.png)
<figcaption>WinUI Calendar Date Picker Control</figcaption>

### Interactive date selection

The WinUI Calendar Date Picker supports entering a date value in the editor and selecting a date from the dropdown calendar.

Refer to the following GIF image.

![Interactively Selecting a Date Value in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Interactively-Selecting-a-Date-Value-in-WinUI-Calendar-Date-Picker.gif)
<figcaption>Interactively Selecting a Date Value in WinUI Calendar Date Picker</figcaption>

### Assign empty value

By default, the WinUI Calendar Date Picker allows us to assign an empty value if no date value is selected or entered. You can change it to always show a date value by setting the value of the [AllowNull](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DateTimePickerBase.html#Syncfusion_UI_Xaml_Editors_DateTimePickerBase_AllowNull "AllowNull property of WinUI Calendar Date Picker") property as **false**. When the value of the [SelectedDate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_SelectedDate "SelectedDate property of WinUI Calendar Date Picker") property is **null** and the value of **AllowNull** is **false** , today’s date will be assigned as the value of the **SelectedDate** property.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               AllowNull="False"
                               />
```

![Disabling AllowNull Property in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Disabling-AllowNull-Property-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Disabling AllowNull Property in WinUI Calendar Date Picker</figcaption>

### Show watermark

You can display hints using the [PlaceHolderText](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_PlaceholderText "PlaceholderText property of WinUI Calendar Date Picker") property when no date value is selected or when the value of the **SelectedDate** property is **null**.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               PlaceholderText="Enter input here..."
                               />
```

![Watermark Hint in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Watermark-Hint-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Watermark Hint in WinUI Calendar Date Picker</figcaption>

### Notify on selected date change and cancel the change on demand

You will be notified by the [SelectedDateChanged](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_SelectedDateChanged "SelectedDateChanged event of WinUI Calendar Date Picker") event whenever you select a date in the dropdown calendar or assign a new date value to the **SelectedDate** property. In addition, if you consider that the currently selected date is invalid, you can cancel updating the value of the **SelectedDate** property with ease using the [SelectedDateChanging](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_SelectedDateChanging "SelectedDateChanging event of WinUI Calendar Date Picker") event. The **SelectedDateChanging** event contains the following properties:

- OldDate: Gets a date that is previously selected.
- NewDate: Gets a date that is currently selected.
- Cancel: Gets or sets whether to cancel the selected date value update.

Refer to the following code example.

```csharp
private void calendarDatePicker_SelectedDateChanging(object sender, DateChangingEventArgs e)
{
    var oldDate = e.OldDate;
    var newDate = e.NewDate;

    if (oldDate > newDate)
    {
        //Cancels the selected date update.
        e.Cancel = true;
    }
}

private void calendarDatePicker_SelectedDateChanged(object sender, SelectedDateChangedEventArgs e)
{
    var oldDate = e.OldDate;
    var newDate = e.NewDate;
}
```

### Selection and restriction

Using the WinUI Calendar Date Picker control, we can easily limit dates, block specific dates, and highlight selected dates. Let’s see how to do them!

#### Limit available dates

Restrict users to select a date value within a minimum and maximum range by using the [MinDate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MinDate "MinDate property of WinUI Calendar Date Picker") and [MaxDate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MaxDate "MaxDate property of WinUI Calendar Date Picker") properties. By default, the value of **MinDate** is **1/1/1921** and the value of **MaxDate** is **12/31/2121**. This feature is useful when you want to allow only users of a specific age range to use your application.

Refer to the following code example.

```csharp
SfCalendarDatePicker calendarDatePicker = new SfCalendarDatePicker();
calendarDatePicker.HorizontalAlignment = HorizontalAlignment.Center;
calendarDatePicker.VerticalAlignment = VerticalAlignment.Top;
calendarDatePicker.MaxDate = new DateTimeOffset(DateTime.Today.AddMonths(1));
calendarDatePicker.MinDate = new DateTimeOffset(DateTime.Today.AddMonths(-1));
```

![Setting Minimum and Maximum Dates in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Setting-Minimum-and-Maximum-Dates-in-WinUI-Calendar-Date-Picker.gif)
<figcaption>Setting Minimum and Maximum Dates in WinUI Calendar Date Picker</figcaption>

#### Disable specific dates

Also, we can prevent users from selecting specific dates from the dropdown calendar using the [BlackoutDates](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_BlackoutDates "BlackoutDates property of WinUI Calendar Date Picker") collection property. The value of the **BlackoutDates** field is **null** by default. We can use this feature in an _e__-procurement_ app to indicate that there will be no product delivery available on specific dates.

Refer to the following code example.

```csharp
public sealed partial class MainWindow : Window
{
    public DateTimeOffsetCollection BlackOutDates { get; set; }
    public MainWindow()
    {
        this.InitializeComponent();

        SfCalendarDatePicker calendarDatePicker = new SfCalendarDatePicker();
        calendarDatePicker.HorizontalAlignment = HorizontalAlignment.Center;
        calendarDatePicker.VerticalAlignment = VerticalAlignment.Top;
        calendarDatePicker.BlackoutDates = GetBlackOutDates();
        this.Content = calendarDatePicker;
    }

    private DateTimeOffsetCollection GetBlackOutDates()
    {
        BlackOutDates = new DateTimeOffsetCollection();
        BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 03)));
        BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 07)));
        BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 24)));
        BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 07)));
        BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 13)));

        return BlackOutDates;
    }
}
```

![Setting a Blackout Date in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Setting-a-Blackout-Date-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Setting a Blackout Date in WinUI Calendar Date Picker</figcaption>

##### Disable dates dynamically

Using the [CalendarItemPrepared](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_CalendarItemPrepared "CalendarItemPrepared event of WinUI Calendar Date Picker") event, you can dynamically restrict the set of dates in the dropdown calendar when the calendar is preparing the items. Use this feature in your app for scenarios such as restricting the delivery date of goods to a specific day.

Refer to the following code example.

```csharp
private void SfCalendarDatePicker_CalendarItemPrepared(object sender, CalendarItemPreparedEventArgs e)
{
    if (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday)
    {
        e.ItemInfo.IsBlackout = true;
        e.ItemInfo.DisplayText = "X";
    }
}
```

![Dynamically Disabling a Specific Day in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Dynamically-Disabling-a-Specific-Day-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Dynamically Disabling a Specific Day in WinUI Calendar Date Picker</figcaption>

#### Highlight and change the shape of the selected dates

You can highlight the current date and selected dates using the [SelectionHighlightMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_SelectionHighlightMode "SelectionHighlightMode property of WinUI Calendar Date Picker") property and change their shapes using the [SelectionShape](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_SelectionShape "SelectionShape property of WinUI Calendar Date Picker") property.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               PlaceholderText="Enter input here..."
                               SelectionHighlightMode="Outline"
                               SelectionShape="Rectangle"
                               />
```

| ![Outline Selection Highlight Mode and Rectangle Selection Shape in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Outline-Selection-Highlight-Mode-and-Rectangle-Selection-Shape-in-WinUI-Calendar-Date-Picker.png) | ![Filled Selection Highlight Mode and Circular Selection Shape in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Filled-Selection-Highlight-Mode-and-Circular-Selection-Shape-in-WinUI-Calendar-Date-Picker.png) |

Highlighting and Custom Selection Shape Features in the WinUI Calendar Date Picker

### Navigation restriction

The Calendar Date Picker control provides support to switch between the month and year views by default. You can also use the [MinDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MinDisplayMode "MinDisplayMode property of WinUI Calendar Date Picker") and [MaxDisplayMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MaxDisplayMode "MaxDisplayMode property of WinUI Calendar Date Picker") properties to limit users from switching between specific views.

The following example allows customers to select only the month and year values to enter the validity period for their credit or debit cards.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               MinDisplayMode="Year"
                               MaxDisplayMode="Decade" />
```

![Restricting Specific Views in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Restricting-Specific-Views-in-WinUI-Calendar-Date-Picker.gif)
<figcaption>Restricting Specific Views in WinUI Calendar Date Picker</figcaption>

### Formatting

We can change the dropdown calendar type and apply various custom formats to the editor and dropdown calendar within the WinUI Calendar Date Picker control.

#### Different calendar types and languages

The Calendar Date Picker control supports a variety of calendars, including Hebrew, Persian, and others. Use the [CalendarIdentifier](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_CalendarIdentifier "CalendarIdentifier property of WinUI Calendar Date Picker") property to modify the dropdown calendar type and the **Language** property to change the language. The editor will update the value in it based on the calendar type and the language applied.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               Language="fr-FR"
                               />
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="sfCalendarDatePicker"
                               CalendarIdentifier="PersianCalendar"
                               />
```

| ![Setting Persian Calendar in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Setting-Persian-Calendar-in-WinUI-Calendar-Date-Picker.png) | ![Setting French Language in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Setting-French-Language-in-WinUI-Calendar-Date-Picker.png) |

Different Calendar Types and Languages Supported in WinUI Calendar Date Picker

#### Calendar and editor display formats

Apply various [custom formats](https://help.syncfusion.com/winui/calendar-date-picker/localization-and-formatting#change-calendar-display-format "Change calendar display format of WinUI Calendar Date Picker documentation") to the dropdown calendar using the [DayFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_DayFormat "DayFormat property of WinUI Calendar Date Picker"), [MonthFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MonthFormat "MonthFormat property of WinUI Calendar Date Picker"), [DayOfWeekFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_DayOfWeekFormat "DayOfWeekFormat property of WinUI Calendar Date Picker"), and [MonthHeaderFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_MonthHeaderFormat "MonthHeaderFormat property of WinUI Calendar Date Picker") properties and to the editor using the [DisplayDateFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_DisplayDateFormat "DisplayDateFormat property of WinUI Calendar Date Picker") property. These features are best suited for showing the validity period for credit or debit cards.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               DisplayDateFormat="M"
                               />
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="SfCalendarDatePicker"
                               DayFormat="{}{day.integer(2)}"
                               MonthFormat="{}{month.full}"
                               DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
                               MonthHeaderFormat="{}{month.abbreviated} {year.abbreviated}‎"
                               />
```

| ![Customizing the Calendar Display Format in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Calendar-Display-Format-in-WinUI-Calendar-Date-Picker.png) | ![Customizing the Editor Display Format in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Editor-Display-Format-in-WinUI-Calendar-Date-Picker.png) |

Customizing the Editor and Dropdown Calendar Formats in WinUI Calendar Date Picker

### Show week numbers

We can show week numbers in the dropdown calendar using the [ShowWeekNumbers](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_ShowWeekNumbers "ShowWeekNumbers property of WinUI Calendar Date Picker") property. The week numbers are collapsed in the dropdown calendar by default.

#### Number of weeks in view

Use the [NumberOfWeeksInView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_NumberOfWeeksInView "NumberOfWeeksInView property of WinUI Calendar Date Picker") property to change the number of weeks shown in the dropdown calendar. Use the [WeekNumberRule](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_WeekNumberRule "WeekNumberRule property of WinUI Calendar Date Picker") property to change the [rule](https://help.syncfusion.com/winui/calendar-date-picker/week-numbers#week-rule "Week rule of WinUI Calendar Date Picker documentation") for determining the first week of the year.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               ShowWeekNumbers="True"
                               WeekNumberRule="FirstFullWeek"
                               />
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="SfCalendarDatePicker"
                               NumberOfWeeksInView="4"
                               />
```

 

| ![Customizing the Number of Weeks in View in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Number-of-Weeks-in-View-in-WinUI-Calendar-Date-Picker.png) | ![Changing the Week Rule in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Changing-the-Week-Rule-in-WinUI-Calendar-Date-Picker.png) |

Week Number and Week Rule Features in WinUI Calendar Date Picker

#### Customize week number and day names

Customize the week number format shown in the dropdown calendar using the [WeekNumberFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_WeekNumberFormat "WeekNumberFormat property of WinUI Calendar Date Picker") property.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               ShowWeekNumbers="True"
                               WeekNumberFormat="W #"
                               />
```

![Custom Week Number Format in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Custom-Week-Number-Format-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Custom Week Number Format in WinUI Calendar Date Picker</figcaption>

Also, we can further customize the template of the week numbers and day names of a week in the dropdown calendar. To do so, use the [WeekNumberTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.CalendarItemTemplateSelector.html#Syncfusion_UI_Xaml_Calendar_CalendarItemTemplateSelector_WeekNumberTemplate "WeekNumberTemplate property of WinUI Calendar Date Picker") and [WeekNameTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.CalendarItemTemplateSelector.html#Syncfusion_UI_Xaml_Calendar_CalendarItemTemplateSelector_WeekNameTemplate "WeekNameTemplate property of WinUI Calendar Date Picker") properties, respectively.

![Customizing Weekday Name and Number Templates in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-Weekday-Name-and-Number-Templates-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Customizing Weekday Name and Number Templates in WinUI Calendar Date Picker</figcaption>

### Customize calendar UI

We can easily customize the dropdown calendar UI as needed using the [DropDownPlacement](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfDropDownBase.html#Syncfusion_UI_Xaml_Editors_SfDropDownBase_DropDownPlacement "DropDownPlacement property of WinUI Calendar Date Picker") and [DropDownHeight](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfDropDownBase.html#Syncfusion_UI_Xaml_Editors_SfDropDownBase_DropDownHeight "DropDownHeight property of WinUI Calendar Date Picker") properties.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               DropDownPlacement="RightEdgeAlignedBottom"
                               DropDownHeight="270"
                               />
```

![Customizing the Dropdown Placement and Height in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Dropdown-Placement-and-Height-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Customizing the Dropdown Placement and Height in WinUI Calendar Date Picker</figcaption>

### Hide days that are out of scope

By default, the Calendar Date Picker displays days that are out of scope in the dropdown calendar, i.e. the days of the previous and next month in the current month view. Use the [OutOfScopeVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDatePicker_OutOfScopeVisibility "OutOfScopeVisibility property of WinUI Calendar Date Picker") property to hide those days in the current view.

Refer to the following code example.

```html
<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Top"
                               x:Name="calendarDatePicker"
                               OutOfScopeVisibility="Hidden"
                               />
```

![Hiding the Previous and Next Month Days in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Hiding-the-Previous-and-Next-Month-Days-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Hiding the Previous and Next Month Days in WinUI Calendar Date Picker</figcaption>

### Calendar item customization

[Customize the appearance](https://help.syncfusion.com/winui/calendar-date-picker/calendar-ui-customization#customize-individual-items-in-calendar "Customize individual items in Calendar documentation") of the date cells in the dropdown calendar based on your requirements using the **FlyoutBase.AttachedFlyout** property and [DropdownFlyout](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownFlyout.html "DropDownFlyout class of WinUI Calendar Date Picker") control.

![Customizing the Date Cells in WinUI Calendar Date Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Customizing-the-Date-Cells-in-WinUI-Calendar-Date-Picker.png)
<figcaption>Customizing the Date Cells in WinUI Calendar Date Picker</figcaption>

**Note:** For more details, refer to the [WinUI Calendar Date Picker documentation](https://help.syncfusion.com/winui/calendar-date-picker/getting-started "Getting Started with WinUI Calendar Date Picker documentation") and our [GitHub demos](https://github.com/SyncfusionExamples/syncfusion-winui-tools-calendardatepicker-examples/blob/main/Samples/CustomUI "WinUI Calendar Date Picker GitHub demos").

## Getting started with the WinUI Calendar DateRange Picker

Now, let’s see the steps to add the WinUI Calendar DateRange Picker in the XAML page of your app:

1. Create a [WinUI 3 desktop app for C# and .NET 5](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Create a WinUI 3 app documentation").
2. Download and install [Syncfusion.Calendar.WinUI](https://www.nuget.org/packages/Syncfusion.Calendar.WinUI "Syncfusion.Calendar.WinUI NuGet package") NuGet package in the project.
3. Import the control namespace **Syncfusion.UI.Xaml.Calendar** on the XAML page.
4. Finally, initialize the WinUI Calendar DateRange Picker control.

Refer to the following code example.

```
<Window
    x:Class="WinUI_Calendar.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_Calendar "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
    mc:Ignorable="d">
    <Grid>
      <calendar:SfCalendarDateRangePicker HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          x:Name="calendarDateRangePicker"
                                          />
    </Grid>
</Window>
```

### Select a date range

The WinUI Calendar Date Picker control allows you to select multiple dates when they are not consecutive, but on the other hand, the WinUI Calendar DateRange Picker lets us pick consecutive dates that can be specified using the [SelectedRange](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDateRangePicker_SelectedRange "SelectedRange property of WinUI Calendar DateRange Picker") property.

Refer to the following code example.

```
SfCalendarDateRangePicker dateRangePicker = new SfCalendarDateRangePicker();
dateRangePicker.SelectedRange = new DateTimeOffsetRange(
					new DateTimeOffset(new DateTime(2021, 08, 8)), 
					new DateTimeOffset(new DateTime(2021, 08, 15)));
```

![Selecting a Date Range in WinUI Calendar DateRange Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Selecting-a-Date-Range-in-WinUI-Calendar-DateRange-Picker.png)
<figcaption>Selecting a Date Range in WinUI Calendar DateRange Picker</figcaption>

### Limit the selection range

In the WinUI Calendar DateRange Picker, you can limit the date range selection using the [MinDatesCountInRange](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDateRangePicker_MinDatesCountInRange "MinDatesCountInRange property of WinUI Calendar DateRange Picker") and [MaxDatesCountInRange](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDateRangePicker_MaxDatesCountInRange "MaxDatesCountInRange property of WinUI Calendar DateRange Picker") properties. We can use this feature to restrict users from selecting the shortest delivery date range in an e-procurement app.

Refer to the following code example.

```csharp
SfCalendarDateRangePicker dateRangePicker = new SfCalendarDateRangePicker();
dateRangePicker.HorizontalAlignment = HorizontalAlignment.Center;
dateRangePicker.VerticalAlignment = VerticalAlignment.Top;
dateRangePicker.MinDatesCountInRange = 5;
dateRangePicker.MaxDatesCountInRange = 7;
```

![Restricting Specific Date Range Selection in WinUI Calendar DateRange Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Restricting-Specific-Date-Range-Selection-in-WinUI-Calendar-DateRange-Picker.png)
<figcaption>Restricting Specific Date Range Selection in WinUI Calendar DateRange Picker</figcaption>

### Show preset items

With the [Preset](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDateRangePicker_Preset "Preset property of WinUI Calendar DateRange Picker") and [PresetTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html#Syncfusion_UI_Xaml_Calendar_SfCalendarDateRangePicker_PresetTemplate "PresetTemplate property of WinUI Calendar DateRange Picker") properties, we can show a collection of [preset items](https://help.syncfusion.com/winui/calendar-daterange-picker/show-preset-items "Show preset items in dropdown calendar of Calendar DateRange Picker documentation") for choosing predefined date ranges within the dropdown calendar of the WinUI Calendar DateRange Picker.

Refer to the following code example.

```csharp
//ViewModel class.
class ViewModel
    {
        public ObservableCollection<string> PresetCollection { get; set; }
        public ViewModel()
        {
            PresetCollection = new ObservableCollection<string>();
            PresetCollection.Add("This Week");
            PresetCollection.Add("This Month");
            PresetCollection.Add("Last Month");
            PresetCollection.Add("This Year");
            PresetCollection.Add("Custom Range");
        }
    }

<Grid>
        <Grid.DataContext>
            <local:ViewModel x:Name="viewModel" />
        </Grid.DataContext>
        <calendar:SfCalendarDateRangePicker x:Name="sfCalendar" Height="35" Width="200"
                                            Preset="{x:Bind viewModel.PresetCollection, Mode=TwoWay}" >
            <calendar:SfCalendarDateRangePicker.PresetTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding}" SelectionChanged="ListBox_SelectionChanged" />
                </DataTemplate>
            </calendar:SfCalendarDateRangePicker.PresetTemplate>
        </calendar:SfCalendarDateRangePicker>
</Grid>

privateprivate void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ListBox listBox = sender as ListBox;
    sfCalendarDateRangePicker.ShowCalendar = false;
    DateTimeOffset todayDate = DateTimeOffset.Now;

    if (listBox.SelectedItem.ToString() == "This Week")
    {
        DateTimeOffset startdate = todayDate.AddDays(-(todayDate.DayOfWeek - sfCalendarDateRangePicker.FirstDayOfWeek));
        sfCalendarDateRangePicker.SelectedRange = new DateTimeOffsetRange(startdate, startdate.AddDays(6));
    }
    else if (listBox.SelectedItem.ToString() == "This Month")
    {
    …
    }
    else
    {
        sfCalendarDateRangePicker.SelectedRange = null;
        sfCalendarDateRangePicker.ShowCalendar = true;
    }
}
```

![WinUI Calendar DateRange Picker Showing Preset Items](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/WinUI-Calendar-DateRange-Picker-Showing-Preset-Items.png)
<figcaption>WinUI Calendar DateRange Picker Showing Preset Items</figcaption>

### Other features

The WinUI DateRange Picker also supports impressive features like watermarks, localization and formatting, calendar UI customization, and more.

**Note:** For more details, refer to the [WinUI Calendar DateRange Picker documentation](https://help.syncfusion.com/winui/calendar-daterange-picker/overview "WinUI Calendar DateRange Picker documentation") and our [GitHub demos](https://github.com/SyncfusionExamples/syncfusion-winui-tools-calendar-daterange-picker-examples/tree/main/Samples "WinUI Calendar DateRange Picker GitHub demos").

## Conclusion

Thanks for reading! With these splendid features, the [WinUI Calendar Date Picker](https://www.syncfusion.com/winui-controls/calendar-date-picker "WinUI Calendar Date Picker") and [Calendar DateRange Picker](https://www.syncfusion.com/winui-controls/calendar-daterange-picker "WinUI Calendar DateRange Picker") controls will meet and exceed your expectations and requirements for choosing a date and date range values. Try them out and leave your feedback in the comments section below!

Also, try out our WinUI control demos available in the [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Syncfusion WinUI Controls Gallery on the Microsoft Store").

For existing customers, the newest version of Essential Studio is available for download from the [license and downloads page](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio"). If you are not yet a customer, you can try a 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out these new features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion support portal"). We are always happy to assist you!

## Related blogs

- [Multiple Selection Made Easy Using the WinUI 3 ComboBox Control](https://www.syncfusion.com/blogs/post/multiple-selection-winui-3-combobox-control.aspx "Multiple Selection Made Easy Using the WinUI 3 ComboBox Control blog")
- [Easily Schedule Recurring Events in WinUI Scheduler](https://www.syncfusion.com/blogs/post/easily-schedule-recurring-events-in-winui-scheduler.aspx "Easily Schedule Recurring Events in WinUI Scheduler blog")
- [10 Features of WinUI Circular Charts That Make It Appealing](https://www.syncfusion.com/blogs/post/10-features-of-winui-circular-charts-that-make-it-appealing.aspx "10 Features of WinUI Circular Charts That Make It Appealing blog")
- [Everything You Need to Know About The WinUI Badge Control](https://www.syncfusion.com/blogs/post/everything-you-need-to-know-about-winui-badge-control.aspx "Everything You Need to Know About The WinUI Badge Control blog")