New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI Scheduler Special Slots Styling

The Scheduler for .NET MAUI control makes it easy to customize the look & feel of the special slots.

The Scheduler's ViewDefinitions (Day, Week, MultiDay and Month) provide a SpecialSlotStyleSelector (Telerik.Maui.Controls.IStyleSelector) property which conditionally applies different styles to special slots depending on some logic.

In the example special slots are used to distinguish the non-working hours. In addition, the custom SpecialSlotStyleSelector applies separate style non-working hours during the week day and the weekend.

1. Create a custom Style Selector class:

public class CustomSpecialSlotStyleSelector : IStyleSelector
    public Style NonWorkingStyle { get; set; }
    public Style WeekendStyle { get; set; }

    public Style SelectStyle(object item, BindableObject bindable)
        var slot = item as SlotNode;
        if (slot.Start.DayOfWeek == DayOfWeek.Friday && slot.End.DayOfWeek == DayOfWeek.Monday)
            return this.WeekendStyle;

        return this.NonWorkingStyle;

2. Add the style selector with the corresponding styles to the page resources:

<local:CustomSpecialSlotStyleSelector x:Key="CustomSpecialSlotStyleSelector">
        <Style TargetType="telerik:SchedulerBoxView">
            <Setter Property="BackgroundColor" Value="#99F2EFF9" />
        <Style TargetType="telerik:SchedulerBoxView">
            <Setter Property="BackgroundColor" Value="#99F9F2EF" />

3. Add the ViewModel class with the SpecialSlotsSource defined:

public class ViewModel
    public ViewModel()
        this.RestHours = new ObservableCollection<Slot>();

        var today = DateTime.Today;
        var dailyRecurrence = new RecurrencePattern()
            DaysOfWeekMask = RecurrenceDays.WeekDays,
            Frequency = RecurrenceFrequency.Weekly,
            MaxOccurrences = 30

        this.RestHours.Add(new Slot(today.AddHours(12), today.AddHours(13))
            RecurrencePattern = dailyRecurrence,
            IsReadOnly = true

        this.RestHours.Add(new Slot(today.AddHours(16), today.AddHours(16).AddMinutes(15))
            RecurrencePattern = dailyRecurrence

    public ObservableCollection<Slot> RestHours { get; set; }

4. Define the Scheduler with the SpecialSlotStyleSelector property applied to the view definitions:

<telerik:RadScheduler x:Name="scheduler" ActiveViewDefinitionIndex="1">
        <telerik:DayViewDefinition SpecialSlotsSource="{Binding NonWorkingHours}"
                                   SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" />
        <telerik:WeekViewDefinition SpecialSlotsSource="{Binding NonWorkingHours}"
                                    SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" />

Check the result on Windows below:

Scheduler Special Slots Styling

See Also

In this article