Styling Weekend Days in the Scheduler Month View
Environment
Version | Product | Author |
---|---|---|
7.0.0 | Telerik UI for .NET MAUI Scheduler | Dobrinka Yordanova |
Description
When using the Telerik UI RadScheduler
in a .NET MAUI application, I want to style the weekend days differently from the weekdays in the MonthView
. Initially, I wanted to use the SpecialSlotStyleSelector
for the MonthViewDefinition
from Telerik Xamarin Scheduler, but it's not available in the Telerik UI for .NET MAUI Scheduler. How can I style my weekend days differently in the month view?
This KB article also answers the following questions:
- How can I apply custom styling to weekend days in the Scheduler
MonthView
? - Is there a way to differentiate weekend and weekday styles in .NET MAUI Scheduler?
- What property should be used for day styling in
MonthViewDefinition
ofRadScheduler
? - How to preserve the special weekend day styling when migrating the
RadScheduler
from Xamarin to MAUI? - How to replace the
SpecialSlotStyleSelector
property when migrating theRadScheduler
from Xamarin to MAUI?
Solution
To style days differently in the MonthView
of RadScheduler
for .NET MAUI, instead of using SpecialSlotStyleSelector
, you should utilize the DayStyleSelector
. This allows for custom styling of days, including differentiating weekends from weekdays.
First, ensure the Scheduler is set to use the MonthView
:
<telerik:RadScheduler x:Name="scheduler" ActiveViewDefinitionIndex="1">
<telerik:RadScheduler.ViewDefinitions>
<telerik:MonthViewDefinition DayStyleSelector="{StaticResource CustomDayStyleSelector}" />
</telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>
Next, to specifically style the weekends, you can define a WeekendLabelStyle
within your CustomDayStyleSelector
. Here's how you can set the background color for weekend days:
<local:CustomDayStyleSelector.WeekendLabelStyle>
<Style TargetType="Label">
<Setter Property="TextColor" Value="#707070" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="Center" />
</Style>
</local:CustomDayStyleSelector.WeekendLabelStyle>
This approach allows for a high degree of customization for day styling within the MonthView
of RadScheduler
.
For more details and examples on how to further customize the Scheduler, refer to the RadScheduler Day Styling and explore the Scheduler examples in the SDK Browser application and Controls Samples application.