How to style the blackout dates in WPF Scheduler (Calendar)

1 min read

In SfScheduler, you can customize the blacked out dates (trailing, leading and normal days) by using the style of WPF SfScheduler.

XAML

Styling the blackout dates in Trailing, Leading and Normal days of month view.

<Window.Resources>
    <Style TargetType="syncfusion:MonthCell">
        <Style.Triggers>
            <Trigger Property="DayType" Value="BlackOutDay, NormalDay">
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Background" Value="LawnGreen"/>
            </Trigger>
            <Trigger Property="DayType" Value="BlackoutDay,LeadingDay">
                <Setter Property="Foreground" Value="DarkViolet"/>
                <Setter Property="Background" Value="Aqua"/>
            </Trigger>
            <Trigger Property="DayType" Value="BlackoutDay,TrailingDay">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Background" Value="Yellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <syncfusion:SfScheduler 
        x:Name="Schedule" 
        ViewType="Month" >
        <interactivity:Interaction.Behaviors>
            <local:SchedulerBehavior/>
        </interactivity:Interaction.Behaviors>
    </syncfusion:SfScheduler>
</Grid>

Disable the interaction for certain dates in the scheduler month view by adding those specific dates to the BlackoutDates collection property of MonthViewSettings in SfScheduler.

public class SchedulerBehavior : Behavior<SfScheduler>
{
    ObservableCollection<DateTime> blackOutDates = new ObservableCollection<DateTime>();
    protected override void OnAttached()
    {
        this.AssociatedObject.ViewChanged += AssociatedObject_ViewChanged;
    }
    private void AssociatedObject_ViewChanged(object sender, ViewChangedEventArgs e)
    {
        blackOutDates.Clear();
        for (int i = -2; i < 3; i++)
        {
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(2));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(3));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(4));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(5));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(6));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(7));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(8));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(9));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(10));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(11));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(12));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(13));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(14));
            blackOutDates.Add(DateTime.Now.Date.AddMonths(i).AddDays(15));
 
        }
 
        this.AssociatedObject.MonthViewSettings.BlackoutDates = blackOutDates;
    }
    protected override void OnDetaching()
    {
        this.AssociatedObject.ViewChanged -= AssociatedObject_ViewChanged;
        if (blackOutDates != null)
            blackOutDates = null;
    }
}

View sample in GitHub

Demo image for Blackoutdates

Did you find this information helpful?

Yes

Comments (0)

How to style the blackout dates in WPF Scheduler (Calendar)

Access denied