Restrict or limit date range selection in Calendar DateRange Picker

22 Jul 20269 minutes to read

Limit available dates

You can allow the users to select a date range within a particular range by specifying the MinDate and MaxDate properties. The default value of the MinDate property is 1/1/1920 and the MaxDate property is 12/31/2120.

NOTE

Dates that appear outside the minimum and maximum date range will be disabled (blackout).

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.MinDate = new DateTimeOffset(new DateTime(2021, 03, 06));
sfCalendarDateRangePicker.MaxDate = new DateTimeOffset(new DateTime(2021, 03, 24));

NOTE

When MinDisplayMode property value is Year and MinDate value is 15/01/2021, selecting the month of minimum date will set the starting date value from the minimum date, i.e., from January 15, 2021.

NOTE

The MinDate property value should not be greater than the MaxDate property value.

NOTE

Download demo from GitHub.

Disable dates using BlackoutDates

You can block particular dates from the date range selection using the BlackoutDates collection property. The default value of the BlackoutDates property is null.

ViewModel.cs

using Syncfusion.UI.Xaml.Calendar;

public class ViewModel
{
    public DateTimeOffsetCollection BlockedDates { get; set; }
    public ViewModel()
    {
        BlockedDates = new DateTimeOffsetCollection();
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 17)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 4)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 2, 5)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 2, 6)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 9)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 3, 11)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 3, 12)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 3, 23)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 3, 26)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 4, 14)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 18)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 5, 19)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 26)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 6, 29)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 31)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 27)));
    }
}

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker
                         BlackoutDates="{Binding BlockedDates}"
                         x:Name="sfCalendarDateRangePicker">
        <calendar:SfCalendarDateRangePicker.DataContext>
            <local:ViewModel/>
        </calendar:SfCalendarDateRangePicker.DataContext>
    </calendar:SfCalendarDateRangePicker>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

sfCalendarDateRangePicker.DataContext = new ViewModel();
sfCalendarDateRangePicker.BlackoutDates = (sfCalendarDateRangePicker.DataContext as ViewModel).BlockedDates;

Disable dates dynamically (All weekend days)

You can prevent the users from selecting any dates or days (example: all weekend days) by handling the ItemPrepared event and setting the ItemInfo.IsBlackout property value to true for those specific dates.

NOTE

You can also change the text to be displayed for specific days or dates in the drop-down calendar using the ItemInfo.DisplayText property.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                        ItemPrepared="SfCalendarDateRangePicker_ItemPrepared"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ItemPrepared += SfCalendarDateRangePicker_ItemPrepared;

You can handle the event as follows:

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

private void SfCalendarDateRangePicker_ItemPrepared(object sender, CalendarItemPreparedEventArgs e)
{
    //Block all weekend days
    if (e.ItemInfo.ItemType == CalendarItemType.Day &&
        (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Saturday ||
        e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday))
    {
        e.ItemInfo.IsBlackout = true;
    }
}

You can also change the text to be displayed for specific days or dates in the Calendar DateRange Picker using the ItemInfo.DisplayText property.

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

private void SfCalendarDateRangePicker_ItemPrepared(object sender, CalendarItemPreparedEventArgs e)
{
    //Block all weekend days
    if (e.ItemInfo.ItemType == CalendarItemType.Day &&
        (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Saturday ||
        e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday))
    {
        e.ItemInfo.IsBlackout = true;
        e.ItemInfo.DisplayText = "X";
    }
}

NOTE

Blackout dates will not be added in the SelectedRange property, even though it is highlighted in the drop-down calendar.

Limit duration of selected range

You can limit the duration of the selected range in the Calendar DateRange Picker value by using the MinDatesCountInRange and MaxDatesCountInRange properties. By default, the value of the MinDatesCountInRange property is 0 and the MaxDatesCountInRange property is null.

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.MaxDatesCountInRange = 10;
sfCalendarDateRangePicker.MinDatesCountInRange = 5;

When the MinDisplayMode value is Year, the MinDaysCountInRange value should be at most 28 in order to select a date range in the year view. The MinDaysCountInRange value should be updated based on the MinDisplayMode property value for range selection in respective views.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                        MinDisplayMode="Year" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

sfCalendarDateRangePicker.MinDisplayMode = CalendarDisplayMode.Year;
sfCalendarDateRangePicker.MinDatesCountInRange = 28;

NOTE

Download demo from GitHub.