.NET MAUI Scheduler Lines Styling

The Scheduler for .NET MAUI provides styling options for the lines across the views.

For the day views (Day, Week and Multiday views) you can style the lines defined by their MinorTickLength and MajorTickLength, and for all the views you can style horizontal and vertical lines which divide different parts of the control.

Here is a list of the available styling properties you can apply to the corresponding views:

• MajorTickLineStyle—Applies style to the line defined by the time ruler major tick; available for Day, Week and Multiday views.
• MinorTickLineStyle—Applies style to the line defined by the time ruler minor tick; available for Day, Week and Multiday views.
• VerticalLineStyle—Applies style to the vertical lines across the views, for example the line that divides the week days in week view.
• HorizontalLineStyle—Applies style to the horizontal lines across the views, for example the line between the week days and the appointments view area in WeekView, or the horizontal lines between the weeks in month view.

Here is a quick example on how the listed properties can be used:

1. Define the Scheduler:

<telerik:RadScheduler x:Name="scheduler" ActiveViewDefinitionIndex="1">
    <telerik:RadScheduler.ViewDefinitions>
        <telerik:DayViewDefinition MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
                                   MinorTickLineStyle="{StaticResource MinorTickLineStyle}"
                                   VerticalLineStyle="{StaticResource VerticalLineStyle}"
                                   HorizontalLineStyle="{StaticResource HorizontalLineStyle}" />
        <telerik:WeekViewDefinition MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
                                    MinorTickLineStyle="{StaticResource MinorTickLineStyle}"
                                    VerticalLineStyle="{StaticResource VerticalLineStyle}"
                                    HorizontalLineStyle="{StaticResource HorizontalLineStyle}" />
        <telerik:MonthViewDefinition VerticalLineStyle="{StaticResource MonthVerticalLineStyle}"
                                     HorizontalLineStyle="{StaticResource MonthHorizontalLineStyle}"/>
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

2. Add the custom styles to the page's resources:

<Style TargetType="telerik:SchedulerBoxView" x:Key="MajorTickLineStyle">
    <Setter Property="BackgroundColor" Value="#7C59B6" />
</Style>
<Style TargetType="telerik:SchedulerBoxView" x:Key="MinorTickLineStyle">
    <Setter Property="BackgroundColor" Value="#D8CDEA" />
</Style>
<Style TargetType="telerik:SchedulerBoxView" x:Key="VerticalLineStyle">
    <Setter Property="BackgroundColor" Value="#7C59B6" />
</Style>
<Style TargetType="telerik:SchedulerBoxView" x:Key="HorizontalLineStyle">
    <Setter Property="BackgroundColor" Value="#D8CDEA" />
</Style>
<Style TargetType="telerik:SchedulerBoxView" x:Key="MonthVerticalLineStyle">
    <Setter Property="BackgroundColor" Value="#7C59B6" />
</Style>
<Style TargetType="telerik:SchedulerBoxView" x:Key="MonthHorizontalLineStyle">
    <Setter Property="BackgroundColor" Value="#D8CDEA" />
</Style>

Here is the result:

See Also

• Time Ruler
• Views
• Day Styling