How to add blackout dates in WinUI Calendar Date Range Picker(SfClendarDateRangePicker)
Using the WinUICalendarDateRangePicker (SfCalendarDateRangePicker), you can add the particular dates as blackout dates to disable the date interaction in the date range picker by using the BlackoutDates property.
CS
Create a ViewModel class and add the required dates as blackout dates.
public class ViewModel
{
public DateTimeOffsetCollection BlockedDates { get; set; }
public ViewModel()
{
BlockedDates = new DateTimeOffsetCollection();
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 17)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 4)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 2, 5)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 2, 6)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 9)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 3, 11)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 3, 12)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 3, 23)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 3, 26)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 4, 14)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 18)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 5, 19)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 26)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 6, 29)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2022, 1, 31)));
BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 27)));
}
}
XAML
Bind the BlockedDates property from the ViewModel class to the BlackoutDates property of the date range picker.
<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
VerticalAlignment="Top"
Height="30" Width="250"
BlackoutDates="{Binding BlockedDates}">
<calendar:SfCalendarDateRangePicker.DataContext>
<local:ViewModel/>
</calendar:SfCalendarDateRangePicker.DataContext>
</calendar:SfCalendarDateRangePicker>
