Class SfCalendarDateRangePicker
Represents a control that allows user to browse, select one or more date in Month, Year, Decade and Century view.
Implements
Inherited Members
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
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 |
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 |
Examples
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 |
Examples
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 |
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 |
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 |
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 |
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 |
Remarks
Exceptions
Type | Condition |
---|---|
System.InvalidOperationException |
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 |
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 |
Remarks
Exceptions
Type | Condition |
---|---|
System.InvalidOperationException |
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 |
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 |
Examples
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 |
Examples
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 |
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
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 |
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 |
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 |
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.ItemTempalateSelector
property.
See Also
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 |
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
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
OnApplyTemplate()
Declaration
protected override void OnApplyTemplate()
Overrides
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 |
OnPointerPressed(PointerRoutedEventArgs)
Declaration
protected override void OnPointerPressed(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> |