Getting Started with WinUI Calendar DateRange Picker

11 Aug 20218 minutes to read

This section explains the steps required to add the WinUI Calendar DateRange Picker control and its date range selection options.

Structure of Calendar DateRange Picker control

WinUI Calendar DateRange Picker Structure

Creating an application with WinUI Calendar DateRange Picker

In this walkthrough, you will create a WinUI application that contains the Calendar DateRange Picker control.

Adding control manually in XAML

To add Calendar DateRange Picker control manually in XAML , follow the below steps.

  1. Create a WinUI 3 desktop app for C# and .NET 5.
  2. Download and refer the following NuGet in the project.

  3. Import the control namespace Syncfusion.UI.Xaml.Calendar in XAML page.
  4. Initialize the Calendar DateRange Picker control.
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Name="grid">
        <!--Adding Calendar DateRange Picker control -->
        <calendar:SfCalendarDateRangePicker Name="sfCalendarDateRangePicker"/>
    </Grid>
</Page>

Adding control manually in C#

To add Calendar DateRange Picker control manually in C# , follow the below steps.

  1. Create a WinUI 3 desktop app for C# and .NET 5 or WinUI 3 app in UWP for C#.
  2. Download and refer the following NuGet in the project.

  3. Import the control namespace Syncfusion.UI.Xaml.Calendar in C# page.
  4. Initialize the Calendar DateRange Picker control.
namespace GettingStarted
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // Creating an instance of the Calendar control
            SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();

            grid.Children.Add(sfCalendarDateRangePicker);
        }
    }
}

WinUI Calendar DateRange Picker Application

NOTE

Download demo from Github

Select the date range programmatically

You can set or change the selected date range programmatically by using SelectedRange property. By default, the SelectedRange property value is null.

SfCalendarDateRangePicker sfCalendarDateRangePicker= new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.SelectedRange = new DateTimeOffsetRange(new DateTimeOffset(new DateTime(2021, 03,17)), new DateTimeOffset(new DateTime(2021, 03, 24)));

WinUI Calendar DateRange Picker Selected Range

NOTE

Download demo from Github

Select date range interactively

You can change the selected date range interactively by selecting from dropdown calendar. You can get the selected date range from the SelectedRange property.

<calendar:SfCalendarDateRangePicker Name="sfCalendarDateRangePicker" />
SfCalendarDateRangePicker sfCalendarDateRangePicker= new SfCalendarDateRangePicker();

WinUI Interactive Selected Date Range

Setting watermark text

You can prompt the user with any information by using the PlaceholderText property. This watermark text will be displayed only when the SelectedRange property value is null. The default value of PlaceholderText property is Select a date range.

<calendar:SfCalendarDateRangePicker PlaceholderText="Select the Date"
                               SelectedRange="{x:Null}"
                               Name="sfCalendarDateRangePicker" />
SfCalendarDateRangePicker sfCalendarDateRangePicker= new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.PlaceholderText = "Select the Date";
sfCalendarDateRangePicker.SelectedRange = null;

WinUI Calendar DateRange Picker Watermark Text

NOTE

Download demo from Github

Selection changed notification

You will be notified when selected range is changed in Calendar DateRange Picker by using SelectedDateRangeChanged event. The SelectedDateRangeChanged event contains the old and new start value of range in RangeStartNewValue and RangeStartOldValue properties and old and new end value of range in RangeEndNewValue and RangeEndOldValue properties.

  • RangeStartOldValue - Gets a date which is previously selected as start value in range.
  • RangeStartNewValue - Gets a date which is currently selected as start value in range.
  • RangeEndOldValue - Gets a date which is previously selected as end value in range.
  • RangeEndNewValue - Gets a date which is currently selected as end value in range.
<calendar:SfCalendarDateRangePicker SelectedDateChanged="SfCalendarDateRangePicker_SelectedDateChanged" 
                               Name="sfCalendarDateRangePicker"/>
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.SelectedDateChanged += SfCalendarDateRangePicker_SelectedDateChanged;

You can handle the event as shown below.

private void SfCalendarDateRangePicker_SelectedDateChanged(object sender, SelectedDateChangedEventArgs e)
{
    var StartOldValue = e.RangeStartOldValue;
    var StartNewValue = e.RangeStartNewValue;
    var EndOldValue = e.RangeEndOldValue;
    var EndNewValue = e.RangeEndNewValue;
}

Hide the dropdown button

You can hide the dropdown button in Calendar DateRange Picker by setting the ShowDropDownButton property value as false. The default value of ShowDropDownButton property is true.

NOTE

When the dropdown button is hidden, you can still open the dropdown calendar using ALT + down keyboard shortcut.

<calendar:SfCalendarDateRangePicker ShowDropDownButton="False" 
                               x:Name="sfCalendarDateRangePicker"/>
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ShowDropDownButton = false;

WinUI Calendar DateRange Picker Dropdown Button

NOTE

Download demo from Github

Show the submit buttons

You can show the submit buttons in dropdown of Calendar DateRange Picker by setting the ShowSubmitButtons property value as true. The default value of ShowSubmitButtons property is false.

NOTE

When the submit buttons are hidden, you can change the SelectedRange property value by simply selecting a date range.

<calendar:SfCalendarDateRangePicker ShowSubmitButtons="True" 
                               x:Name="sfCalendarDateRangePicker"/>
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ShowSubmitButtons = true;

WinUI Calendar DateRange Picker Submit Button

NOTE

Download demo from Github

Restrict date range selection

You can restrict users from:

  • Selecting date range within a specific minimum and maximum range using MinDate and MaxDate properties.
  • Selecting date range from blocked dates using BlackoutDates property.
  • Selecting date range from specifically blocked set of dates (example : blocking weekend dates) using ItemPrepared event.

For further details refer Restrict DateRange Selection.

  • You can navigate between month, year, decade and century views in Calendar DateRange Picker control.
  • You can also restrict the users to navigate between specific views only (month and year selection for credit card) using MinDisplayMode and MaxDisplayMode properties.

    WinUI Calendar DateRange Picker View Navigation

For further details refer Navigation.