.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">
<local:CustomSpecialSlotStyleSelector.NonWorkingStyle>
<Style TargetType="telerik:SchedulerBoxView">
<Setter Property="BackgroundColor" Value="#99F2EFF9" />
</Style>
</local:CustomSpecialSlotStyleSelector.NonWorkingStyle>
<local:CustomSpecialSlotStyleSelector.WeekendStyle>
<Style TargetType="telerik:SchedulerBoxView">
<Setter Property="BackgroundColor" Value="#99F9F2EF" />
</Style>
</local:CustomSpecialSlotStyleSelector.WeekendStyle>
</local:CustomSpecialSlotStyleSelector>
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:RadScheduler.ViewDefinitions>
<telerik:DayViewDefinition SpecialSlotsSource="{Binding NonWorkingHours}"
SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" />
<telerik:WeekViewDefinition SpecialSlotsSource="{Binding NonWorkingHours}"
SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" />
</telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>
Check the result on Windows below:
