Scheduler header navigation style

[n]

Hi,

how can I change the style of the navigation header? the days an all that month dropdown, I don't see any documentation for this.

 

[n]

thank you for your answers, the last one seems like I made it work, but I'm only missing one thing, is there a way to change the first day of the week in that dropdown? already try with the setter but does not work

[Yana]

First day of the week can be set in the same way as the date formats through the Culture.DateTimeFormat, here is an example:

appCulture.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Wednesday;

[Yana]

Hello,

Thank you for sending the image, it's of great help. 

The Scheduler navigation header can be customized through the Scheduler ControlTemplate, the approach is described here: Customizing Header Settings in RadScheduler for .NET MAUI.

As to the dropdown for navigating to a different date - this is actually a Calendar control used internally inside the Scheduler.

You can style the Calendar days in Month View through the DayStyleSelector property - in the style selector you can define separate styles for selected and Today days, please check the detailed example here: 

Calendar: Applying Style Selector

You can easily apply the created custom Style Selector to the Calendar inside Scheduler with implicit style like this:

<Style TargetType="telerik:RadCalendar">
    <Setter Property="DayStyleSelector" Value="{StaticResource DayStyleSelector}" />
</Style>

Please give this a try and let me know if you have any additional questions on it.

Regards,
Yana
Progress Telerik

[n]

Hi!

Thank you for your answer.

I was talking about the dropdown for navigating to a different date, so it can not be customized? only removed?

[Yana]

Hi,

The dropdown for selecting a date contains a RadCalendar control. You can customize it through implicit style, for example like this:

<telerik:RadScheduler AutomationId="scheduler" CurrentDate="10/18/2023">
    <telerik:RadScheduler.Resources>
        <Style TargetType="Label" x:Key="DayNameLabelStyle">
            <Setter Property="TextColor" Value="#8660C5" />
            <Setter Property="FontSize" Value="16" />
        </Style>
        <Style TargetType="telerik:RadCalendar">
            <Setter Property="DayNameLabelStyle" Value="{StaticResource DayNameLabelStyle}" />
        </Style>
    </telerik:RadScheduler.Resources>
    <telerik:RadScheduler.ViewDefinitions>
        <telerik:WeekViewDefinition />
        <telerik:WeekViewDefinition IsWeekendVisible="False" Title="Work Week" />
        <telerik:MultidayViewDefinition VisibleDays="3" Title="3 Day" />
        <telerik:DayViewDefinition />
        <telerik:MonthViewDefinition />
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

The example above shows how you can modify the DayNameLabelStyle property of the Calendar.  In a similar way you can set other styling properties of the Calendar such as the days (through the DayStyleSelector) and other. For more details on the Calendar styling, go to Calendar Styling section.

[n]

oh thank you, did not see that :)

another question, how can I change the format of the day label in there?

[Yana]

The format of the day names comes from the target device culture settings.  You can explicitly modify it through the Culture property of the Scheduler and more specifically, set its DateTimeFormat.ShortestDayNames property. Here is a quick example:

  var appCulture = Thread.CurrentThread.CurrentUICulture;
  appCulture.DateTimeFormat.ShortestDayNames = new String[] { "Su", "M", "Tu", "W", "Th", "F", "Sat" };

 this.scheduler.Culture = appCulture;

[n]

also is there a way to add tasks to that calendar and show a dot in those days? I'm doing that but the template does not updates for the days that have tasks, only when I click on the day it updates, can you help me with that please?

[Yana]

Currently there isn't such built-in functionality, as the Calendar control does not provide appointments support. Please open a support ticket and send us the custom implementation you have so far, so we can take a look and try to help with the approach.

[n]

Thank you!