Change RadDateTimePicker colors

[BrunoVT]

Hello,

How can I change the header button text color and the week number text color (see attachment)?

Kind regards

 

[Stenly]

Hello BrunoVT,

There are two approaches that can be used to achieve this requirement.

1. The first one is to modify the value of the MaterialPalette.Palette.PrimaryNormalColor property. With this approach, each element that uses the value of this property will also be affected.
   

   public partial class MainWindow : Window
   {
       public MainWindow()
       {
           MaterialPalette.Palette.PrimaryNormalColor = MaterialPalette.Palette.AccentNormalColor;
   
           InitializeComponent();
       }
   }

   This will produce the following result:
   
   
   
   
2.  The second approach would be to modify the styles and control templates of the elements specifically of the header button and the weeks. This way, only these elements will be affected.
   
   With this in mind, extract the default Style of the CalendarButton with x:Name="CalendarButtonStyle" and locate the Trigger for the ButtonType property when its value is WeekNumber. In it, modify the Setter for the ContentPresenter's Foreground property:
   

   <Trigger Property="ButtonType" Value="WeekNumber">
       <Setter Property="mat:MaterialAssist.IsShadowDisabled" Value="True"/>
       <Setter TargetName="Material" Property="IsEnabled" Value="False"/>
       <!--Modify the following Setter's Value-->
       <Setter TargetName="Content" Property="Foreground" Value="{telerik:MaterialResource ResourceKey=AccentNormalBrush}"/>
       <Setter TargetName="BorderVisual" Property="Visibility" Value="Collapsed"/>
   </Trigger>
   

   After that, create a new Style that targets the RadCalendarButton and set the modified Style to the DayButtonStyle property:
   

   <Style x:Key="CustomRadCalendarStyle" TargetType="telerik:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}">
       <Setter Property="DayButtonStyle" Value="{StaticResource CustomCalendarButtonStyle}"/>
   </Style>

   To change the header button's color, create a new Style with TargetType="Button" and base it on the Style with x:Name="CalendarHeaderButton". Then, set the Foreground property to the desired value:
   

   <Style x:Key="CustomCalendarHeaderButtonStyle" TargetType="Button" BasedOn="{StaticResource CalendarHeaderButton}">
       <Setter Property="Foreground" Value="{telerik:MaterialResource ResourceKey=AccentNormalBrush}"/>
   </Style>
   

   After that, extract the default ControlTemplate of the RadCalendar control and locate the Button element with x:Name="Header". On it, set the newly created Style (from the above code snippet) on its Style property. Set the customized ControlTemplate to the Template property of the RadCalendar via a Style. Finally, set the custom RadCalendarStyle to the CalendarStyle property of the RadDateTimePicker control:

   <telerik:RadDateTimePicker CalendarStyle="{StaticResource CustomRadCalendarStyle}""/>

   This approach will only modify the week numbers and the header button's foreground color as shown in the below image:
   
   

With this being said, I have attached a sample project, which contains the second approach's full implementation. Please note that it is built with NoXaml assemblies in mind, as it allows for easier customizations of the default Styles and ControlTemplates.

Regards,
Stenly
Progress Telerik

[BrunoVT]

I went for the second approach and worked perfectly. Thank you for the help.