Class SfCalendarDateRangePicker

Represents a control that allows user to browse, select one or more date in Month, Year, Decade and Century view.

Inheritance

System.Object

SfDropDownBase

SfCalendarDateRangePicker

Implements

System.IDisposable

Inherited Members

SfDropDownBase.ContentProperty

SfDropDownBase.ContentTemplateProperty

SfDropDownBase.DropDownButtonTemplateProperty

SfDropDownBase.DropDownHeightProperty

SfDropDownBase.DropDownModeProperty

SfDropDownBase.DropDownPlacementProperty

SfDropDownBase.ShowDropDownButtonProperty

SfDropDownBase.ShowSubmitButtonsProperty

SfDropDownBase.IsOpenProperty

SfDropDownBase.Dispose()

SfDropDownBase.OnPrimaryButtonClicked()

SfDropDownBase.OnDeclineButtonClicked()

SfDropDownBase.OnKeyDown(KeyRoutedEventArgs)

SfDropDownBase.OnKeyUp(KeyRoutedEventArgs)

SfDropDownBase.OpenDropDown()

SfDropDownBase.CloseDropDown()

SfDropDownBase.Dispose(Boolean)

SfDropDownBase.Content

SfDropDownBase.ContentTemplate

SfDropDownBase.DropDownButtonTemplate

SfDropDownBase.DropDownHeight

SfDropDownBase.DropDownMode

SfDropDownBase.DropDownPlacement

SfDropDownBase.IsOpen

SfDropDownBase.ShowDropDownButton

SfDropDownBase.ShowSubmitButtons

SfDropDownBase.DropDownOpened

SfDropDownBase.DropDownClosed

Namespace: Syncfusion.UI.Xaml.Calendar

Assembly: Syncfusion.Calendar.WinUI.dll

Syntax

public class SfCalendarDateRangePicker : SfDropDownBase, IDisposable

Examples

<calendar:SfCalendarDateRangePicker
    ShowSubmitButtons="False"
    PlaceHolderText="select a date range"
    FirstDayOfWeek="Sunday"/>

Constructors

SfCalendarDateRangePicker()

Initializes a new instance of the SfCalendarDateRangePicker class.

Declaration

public SfCalendarDateRangePicker()

Examples

<calendar:SfCalendarDateRangePicker
    ShowSubmitButtons="False"
    PlaceHolderText="select a date range"
    FirstDayOfWeek="Sunday"/>

Fields

BlackoutDatesProperty

Identifies BlackoutDates dependency property.

Declaration

public static readonly DependencyProperty BlackoutDatesProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the BlackoutDates dependency property.

CalendarIdentifierProperty

Identifies CalendarIdentifier dependency property.

Declaration

public static readonly DependencyProperty CalendarIdentifierProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the CalendarIdentifier dependency property.

DayFormatProperty

Identifies DayFormat dependency property.

Declaration

public static readonly DependencyProperty DayFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the DayFormat dependency property.

DayOfWeekFormatProperty

Identifies DayOfWeekFormat dependency property.

Declaration

public static readonly DependencyProperty DayOfWeekFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the DayOfWeekFormat dependency property.

DescriptionProperty

Identifies Description dependency property.

Declaration

public static readonly DependencyProperty DescriptionProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

DisplayDateFormatProperty

Identifies the DisplayDateFormat dependency property.

Declaration

public static readonly DependencyProperty DisplayDateFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the DisplayDateFormat dependency property.

FirstDayOfWeekProperty

Identifies FirstDayOfWeek dependency property.

Declaration

public static readonly DependencyProperty FirstDayOfWeekProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the FirstDayOfWeek dependency property.

HeaderProperty

Identifies Header dependency property.

Declaration

public static readonly DependencyProperty HeaderProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

HeaderTemplateProperty

Identifies HeaderTemplate dependency property.

Declaration

public static readonly DependencyProperty HeaderTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

MaxDateProperty

Identifies MaxDate dependency property.

Declaration

public static readonly DependencyProperty MaxDateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MaxDate dependency property.

MaxDatesCountInRangeProperty

Identifies the MaxDatesCountInRange dependency property.

Declaration

public static readonly DependencyProperty MaxDatesCountInRangeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MaxDatesCountInRange dependency property.

MaxDisplayModeProperty

Identifies MaxDisplayMode dependency property.

Declaration

public static readonly DependencyProperty MaxDisplayModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MaxDisplayMode dependency property.

MinDateProperty

Identifies MinDate dependency property.

Declaration

public static readonly DependencyProperty MinDateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MinDate dependency property.

MinDatesCountInRangeProperty

Identifies the MinDatesCountInRange dependency property.

Declaration

public static readonly DependencyProperty MinDatesCountInRangeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MinDatesCountInRange dependency property.

MinDisplayModeProperty

Identifies MinDisplayMode dependency property.

Declaration

public static readonly DependencyProperty MinDisplayModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

MonthFormatProperty

Identifies MonthFormat dependency property.

Declaration

public static readonly DependencyProperty MonthFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MonthFormat dependency property.

MonthHeaderFormatProperty

Identifies MonthHeaderFormat dependency property.

Declaration

public static readonly DependencyProperty MonthHeaderFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the MonthHeaderFormat dependency property.

PlaceholderTextProperty

Identifies the PlaceholderText dependency property.

Declaration

public static readonly DependencyProperty PlaceholderTextProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the PlaceholderText dependency property.

PresetPositionProperty

Identifies the PresetPosition dependency property.

Declaration

public static readonly DependencyProperty PresetPositionProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the PresetPosition dependency property.

PresetProperty

Identifies the Preset dependency property.

Declaration

public static readonly DependencyProperty PresetProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the Preset dependency property.

PresetTemplateProperty

Identifies the PresetTemplate dependency property.

Declaration

public static readonly DependencyProperty PresetTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the PresetTemplate dependency property.

SelectedRangeProperty

Identifies SelectedRange dependency property.

Declaration

public static readonly DependencyProperty SelectedRangeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectedRange dependency property.

ShowCalendarProperty

Identifies the ShowCalendar dependency property.

Declaration

public static readonly DependencyProperty ShowCalendarProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ShowCalendar dependency property.

ShowWeekNumbersProperty

Identifies ShowWeekNumbers dependency property.

Declaration

public static readonly DependencyProperty ShowWeekNumbersProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ShowWeekNumbers dependency property.

WeekNumberFormatProperty

Identifies WeekNumberFormat dependency property.

Declaration

public static readonly DependencyProperty WeekNumberFormatProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the WeekNumberFormat dependency property.

WeekNumberRuleProperty

Identifies WeekNumberRule dependency property.

Declaration

public static readonly DependencyProperty WeekNumberRuleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the WeekNumberRule dependency property.

Properties

BlackoutDates

Gets or sets the collection of restricted dates, that are not allowed to select.

Declaration

public DateTimeOffsetCollection BlackoutDates { get; set; }

Property Value

Type	Description
DateTimeOffsetCollection	The default value is null.

Remarks

SfCalendarDateRangePicker disables the date, if the date is present in blackout dates collection.

Examples

• XAML
• C#

Below example shows how to set blackout dates in SfCalendarDateRangePicker.

<Page.DataContext>
  <local:ViewModel x:Name="viewModel" />
 </Page.DataContext>
 <Grid>
     <calendar:SfCalendarDateRangePicker BlackoutDates = "{x:Bind viewModel.BlackOutDates}" FirstDayOfWeek="Sunday"/>
 </Grid>

CalendarIdentifier

Gets or sets the calendar system to use.

Declaration

public string CalendarIdentifier { get; set; }

Property Value

Type	Description
System.String	The default value is GregorianCalendar.

Remarks

All calendar types are supported except JapaneseCalendar and Lunar type calendars.

Examples

calendarDateRangePicker.CalendarIdentifier = Windows.Globalization.CalendarIdentifiers.Hebrew;

DayFormat

Gets or sets the date format in month view.

Declaration

public string DayFormat { get; set; }

Property Value

Type	Description
System.String	The default value is {day.integer}.

Examples

• XAML
• C#

This example shows how to set date format in XAML.

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker"  DateFormat="{}{day.integer(2)}" />

DayOfWeekFormat

Gets or sets the display format for the day name of the week headers in month view.

Declaration

public string DayOfWeekFormat { get; set; }

Property Value

Type	Description
System.String	The default value is {dayofweek.abbreviated(2)}.

Examples

• XAML
• C#

This example shows how to set days name format in XAML.

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker" DayOfWeekFormat="{}{dayofweek.abbreviated(3)}" />

Description

Gets or sets content that is shown below the control. The content should provide guidance about the input expected by the control.

Declaration

public object Description { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Examples

Set string as description.

<!-- String description -->
<calendar:SfCalendarDateRangePicker Description = "Date of birth" />

Set a control as description.

<!-- TextBlock as description -->
<calendar:SfCalendarDateRangePicker>
    <calendar:SfCalendarDateRangePicker.Description>
        <TextBlock Text = "Date of birth" FontWeight="Bold"/>
    </calendar:SfCalendarDateRangePicker.Description>
</calendar:SfCalendarDateRangePicker>

DisplayDateFormat

Gets or sets the format of the string displayed in SfCalendarDateRangePicker.

Declaration

public string DisplayDateFormat { get; set; }

Property Value

Type	Description
System.String	The default value is {0:d} - {1:d}.

Examples

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker"
                               FormatString="{}{0:MM/yyyy}-{1:MM/yyyy}"
                              />

public MainPage()
{
    this.InitializeComponent();
    SfCalendarDateRangePicker calendarDateRangePicker = new SfCalendarDateRangePicker();
    calendarDateRangePicker.FormatString = "{0:MM/yyyy}-{1:MM/yyyy}";
}

FirstDayOfWeek

Gets or sets a value that indicates which day is shown as the first day of the week.

Declaration

public FirstDayOfWeek FirstDayOfWeek { get; set; }

Property Value

Type	Description
FirstDayOfWeek	The default value is Auto.

Remarks

Auto will select the FirstDayOfWeek based on current culture.

Header

Gets or sets the content for the control's header.

Declaration

public object Header { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Examples

Set string as Header.

<!-- String header -->
<calendar:SfCalendarDateRangePicker Header = "Date of birth" />

Set a control as Header.

<!-- TextBlock as header -->
<calendar:SfCalendarDateRangePicker>
    <calendar:SfCalendarDateRangePicker.Header>
        <TextBlock Text = "Date of birth" FontWeight="Bold"/>
    </calendar:SfCalendarDateRangePicker.Header>
</calendar:SfCalendarDateRangePicker>

Apply a DataTemplate as Header.

<!-- Templated header -->
<calendar:SfCalendarDateRangePicker Header = "Date of birth">
    <calendar:SfCalendarDateRangePicker.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontWeight="Bold"/>
        </DataTemplate>
    </calendar:SfCalendarDateRangePicker.HeaderTemplate>
</calendar:SfCalendarDateRangePicker>

HeaderTemplate

Gets or sets the DataTemplate used to display the content of the control's header.

Declaration

public DataTemplate HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is null.

Examples

Set string as Header.

<!-- String header -->
<calendar:SfCalendarDateRangePicker Header = "Date of birth" />

Set a control as Header.

<!-- TextBlock as header -->
<calendar:SfCalendarDateRangePicker>
    <calendar:SfCalendarDateRangePicker.Header>
        <TextBlock Text = "Date of birth" FontWeight="Bold"/>
    </calendar:SfCalendarDateRangePicker.Header>
</calendar:SfCalendarDateRangePicker>

Apply a DataTemplate as Header.

<!-- Templated header -->
<calendar:SfCalendarDateRangePicker Header = "Date of birth">
    <calendar:SfCalendarDateRangePicker.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontWeight="Bold"/>
        </DataTemplate>
    </calendar:SfCalendarDateRangePicker.HeaderTemplate>
</calendar:SfCalendarDateRangePicker>

MaxDate

Gets or sets the last date to be displayed.

Declaration

public DateTimeOffset MaxDate { get; set; }

Property Value

Type	Description
System.DateTimeOffset	The default value is 12/31/2120.

Remarks

MaxDate value should be greater than MinDate.

Exceptions

Type	Condition
System.InvalidOperationException	MaxDate value should not be less than MinDate value.

MaxDatesCountInRange

Gets or sets the maximum span of days that can be allowed in date range selection.

Declaration

public Nullable<ulong> MaxDatesCountInRange { get; set; }

Property Value

Type	Description
System.Nullable<System.UInt64>	The default value is null.

Remarks

MaxDatesCountInRange should be greater than MinDatesCountInRange.

Exceptions

Type	Condition
System.InvalidOperationException	MaxDatesCountInRange value should not be less than MinDatesCountInRange value.

MaxDisplayMode

Gets or sets a value indicating the maximum view that can be navigated.

Declaration

public CalendarDisplayMode MaxDisplayMode { get; set; }

Property Value

Type	Description
CalendarDisplayMode	The default value is Century.

Remarks

MaxDisplayMode value should be greater than MinDisplayMode value.

MinDate

Gets or sets the first date to display.

Declaration

public DateTimeOffset MinDate { get; set; }

Property Value

Type	Description
System.DateTimeOffset	The default value is 1/1/1920.

Remarks

MinDate value should be less than MaxDate.

Exceptions

Type	Condition
System.InvalidOperationException	MinDate value should not be greater than MaxDate value.

MinDatesCountInRange

Gets or sets the minimum span of days that can be allowed in date range selection.

Declaration

public ulong MinDatesCountInRange { get; set; }

Property Value

Type	Description
System.UInt64	The default value is 0.

Remarks

MinDatesCountInRange should be less than MaxDatesCountInRange.

Exceptions

Type	Condition
System.InvalidOperationException	MinDatesCountInRange value should not be greater than MaxDatesCountInRange value.

MinDisplayMode

Gets or sets a value indicating the minimum view that can be navigated.

Declaration

public CalendarDisplayMode MinDisplayMode { get; set; }

Property Value

Type	Description
CalendarDisplayMode	The default value is Month.

Remarks

MinDisplayMode value should be less than MaxDisplayMode value.

MonthFormat

Gets or sets the month format in year view.

Declaration

public string MonthFormat { get; set; }

Property Value

Type	Description
System.String	The default value is {month.abbreviated}.

Examples

• XAML
• C#

This example shows how to set month format in XAML.

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker" MonthFormat="{}{month.full}" />

MonthHeaderFormat

Gets or sets header format in month view.

Declaration

public string MonthHeaderFormat { get; set; }

Property Value

Type	Description
System.String	The default value is month year.

Examples

• XAML
• C#

This example shows how to set days name format in XAML.

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker" MonthHeaderFormat="{}{month.abbreviated} {year.abbreviated}" />

PlaceholderText

Gets or sets the text displayed within the editor when the SfCalendarDateRangePicker value is null.

Declaration

public string PlaceholderText { get; set; }

Property Value

Type	Description
System.String	The default value is "select a date range".

Preset

Gets or sets the object that is used to display the predefined date ranges.

Declaration

public object Preset { get; set; }

Property Value

Type	Description
System.Object	The default value is null.

Remarks

Preset panel will be hidden if null value is assigned to Preset. Since the Preset property is of type object, there are no restrictions on the type of object assigned. The Preset is displayed using PresetTemplate. Actions of preset items are set in selectionchanged event of ListBox.

Examples

• MainPage.xaml
• ViewModel.cs
• MainPage.cs

Control added and preset collection is set.

<calendar:SfCalendarDateRangePicker x:Name="calendarDateRangePicker" Preset="{x:Bind viewModel.PresetCollection , Mode=TwoWay}" >
<calendar:SfCalendarDateRangePicker.PresetTemplate>
 <DataTemplate>
       <ListBox ItemsSource = "{Binding}" SelectionChanged="ListBox_SelectionChanged" />
       </DataTemplate>
   </calendar:SfCalendarDateRangePicker.PresetTemplate>
</calendar:SfCalendarDateRangePicker>

PresetPosition

Gets or sets a value that specifies the position of Preset.

Declaration

public PresetPosition PresetPosition { get; set; }

Property Value

Type	Description
PresetPosition	The default value is End.

PresetTemplate

Gets or sets the template that is used to display the predefined date ranges set in Preset.

Declaration

public DataTemplate PresetTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is null.

Remarks

DataContext of PresetTemplate is Preset.

SelectedRange

Gets or sets the selected date range.

Declaration

public DateTimeOffsetRange SelectedRange { get; set; }

Property Value

Type	Description
DateTimeOffsetRange	The default value is null.

Remarks

SelectedDateRangeChanged event occurs, when selected range is changed.

ShowCalendar

Gets or sets a value indicating whether calendar in dropdown is displayed or not.

Declaration

public bool ShowCalendar { get; set; }

Property Value

Type	Description
System.Boolean	The default value is true.

Remarks

Shows calendar when value is true.

ShowWeekNumbers

Gets or sets a value indicating whether to show the week numbers.

Declaration

public bool ShowWeekNumbers { get; set; }

Property Value

Type	Description
System.Boolean	true if the week numbers can be displayed; otherwise, false. The default value is false.

Remarks

The week number can be formatted using WeekNumberFormat The UI can be customized using the CalendarItem.ItemTempalateSelectorproperty.

See Also

WeekNumberRule

WeekNumberFormat

Gets or sets a value that specifies the format of the week number.

Declaration

public string WeekNumberFormat { get; set; }

Property Value

Type	Description
System.String	The default value is string.Empty.

Remarks

When the value is “W 0”, week numbers are shown as W 1, W 2, W 3, … When the value is “00”, week numbers are shown as 01, 02, 03, …, 10, 11, ….

See Also

https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings#character-literals

WeekNumberRule

Gets or sets a value that specifies the rule for the first week of the year.

Declaration

public CalendarWeekRule WeekNumberRule { get; set; }

Property Value

Type	Description
System.Globalization.CalendarWeekRule	The default value is System.Globalization.CalendarWeekRule.FirstDay.

Remarks

When the WeekNumberRule value is System.Globalization.CalendarWeekRule.FirstDay, then the first week of the year starts on the first day of the year. When the WeekNumberRule value is System.Globalization.CalendarWeekRule.FirstFourDayWeek, then the first week should have at least four days. When the WeekNumberRule value is System.Globalization.CalendarWeekRule.FirstFullWeek, then the first week should have all the seven days.

Methods

OnAcceptButtonClicked()

Called when Accept button is clicked.

Declaration

protected override void OnAcceptButtonClicked()

Overrides

SfDropDownBase.OnAcceptButtonClicked()

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

Overrides

SfDropDownBase.OnApplyTemplate()

OnPointerEntered(PointerRoutedEventArgs)

Declaration

protected override void OnPointerEntered(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerExited(PointerRoutedEventArgs)

Declaration

protected override void OnPointerExited(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Events

ItemPrepared

Occurs when calendar item is loading.

Declaration

public event EventHandler<CalendarItemPreparedEventArgs> ItemPrepared

Event Type

Type	Description
System.EventHandler<CalendarItemPreparedEventArgs>

Remarks

Allows to change the text of specific dates using DisplayText.

Examples

public MainPage()
{
    this.InitializeComponent();
    SfCalendarDateRangePicker calendarDateRangePicker = new SfCalendarDateRangePicker();
    calendarDateRangePicker.ItemPrepared += Blockout_ItemPrepared;
}
// Blackout all weekends when calender item is being prepared.
private void Blockout_ItemPrepared(object sender, CalendarItemPreparedEventArgs e)
{
    if (e.ItemInfo.ItemType == CalendarItemType.Day &&
        (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Saturday ||
        e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday))
    {
        e.ItemInfo.IsBlackout = true;
    }
}

SelectedDateRangeChanged

Occurs when SelectedRange is changes.

Declaration

public event EventHandler<SelectedDateRangeChangedEventArgs> SelectedDateRangeChanged

Event Type

Type	Description
System.EventHandler<SelectedDateRangeChangedEventArgs>

Implements

System.IDisposable