Blocking Dates in UWP Calendar

SfCalendar allows blocking out dates so that a blocked date will look disabled, be skipped in key navigation, and unable to be selected.

Blocking out the Date Collection

The BlackOutDates property is used to specify the collection of DateTime that are to be blocked.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar"/>
</Page>
using Syncfusion.UI.Xaml.Controls.Input;

calendar.BlackOutDates.Add(new DateTime(2015, 12, 1));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 2));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 3));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 12));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 13));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 14));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 25));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 27));
Imports Syncfusion.UI.Xaml.Controls.Input;

calendar.BlackOutDates.Add(New Date(2015, 12, 1))

calendar.BlackOutDates.Add(New Date(2015, 12, 2))

calendar.BlackOutDates.Add(New Date(2015, 12, 3))

calendar.BlackOutDates.Add(New Date(2015, 12, 12))

calendar.BlackOutDates.Add(New Date(2015, 12, 13))

calendar.BlackOutDates.Add(New Date(2015, 12, 14))

calendar.BlackOutDates.Add(New Date(2015, 12, 25))

calendar.BlackOutDates.Add(New Date(2015, 12, 27))

SfCalendar-img7

Customize the Blocked Date Cell

The template of blocked cells can be customized using the BlackOutCellTemplate property.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar">

    <input:SfCalendar.BlackOutCellTemplate>

    <DataTemplate>

    <Grid>

    <TextBlock Text="&#xE106;" Foreground="Red"
               VerticalAlignment="Top" FontFamily="Segoe UI Symbol"
    		   Margin="3" HorizontalAlignment="Right"/>
    		   
    <TextBlock Text="{Binding Day}" Foreground="#FFA5A5A5"
               VerticalAlignment="Bottom" Margin="3"/>
    </Grid>

    </DataTemplate>

    </input:SfCalendar.BlackOutCellTemplate>

    </input:SfCalendar>
</Page>
using Syncfusion.UI.Xaml.Controls.Input;

calendar.BlackOutDates.Add(new DateTime(2015, 12, 1));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 2));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 3));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 12));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 13));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 14));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 25));

calendar.BlackOutDates.Add(new DateTime(2015, 12, 27));
Imports Syncfusion.UI.Xaml.Controls.Input;

calendar.BlackOutDates.Add(New Date(2015, 12, 1))

calendar.BlackOutDates.Add(New Date(2015, 12, 2))

calendar.BlackOutDates.Add(New Date(2015, 12, 3))

calendar.BlackOutDates.Add(New Date(2015, 12, 12))

calendar.BlackOutDates.Add(New Date(2015, 12, 13))

calendar.BlackOutDates.Add(New Date(2015, 12, 14))

calendar.BlackOutDates.Add(New Date(2015, 12, 25))

calendar.BlackOutDates.Add(New Date(2015, 12, 27))

SfCalendar-img8