Change the theme of the RadCalendar inside the RadDatePicker and RadDateRangePicker

[Shawn]

Is it possible to have the RadCalendar inside the RadDatePicker and RadDateRangePicker to have a different theme than the RadDatePicker and the RadDateRangePicker?

I tried setting this within the RadDatePicker control's xaml:

<telerik:RadDateTimePicker.CalendarStyle>
    <Style TargetType="telerik:RadCalendar">
        <Setter Property="telerik:StyleManager.Theme"
                Value="Windows11" />
    </Style>
</telerik:RadDateTimePicker.CalendarStyle>

...but it has no effect.

[Stenly]

Hello Shawn,

It is possible for the RadCalendar instances to have a different theme than their parent controls, however, generally, when a child control needs to have a different theme, the approach with the Style will not work. That is because in this case, the theme is set in the C# code, using a local value setting, which has a higher priority than the Style Setter. Instead, the child control will have to be retrieved and the SetTheme method of the StyleManager will have to be utilized.

1. RadDatePicker

For the RadDatePicker control, an attached property could be introduced, which will subscribe to the Loaded event of the RadCalendar and it can be themed in the event handler. In this scenario, the attached property can be set on the Style set to the CalendarStyle property.

The following code snippets showcase this suggestion's implementation:

public class RadCalendarExtensions
{
    public static Theme GetTheme(DependencyObject obj)
    {
        return (Theme)obj.GetValue(ThemeProperty);
    }

    public static void SetTheme(DependencyObject obj, Theme value)
    {
        obj.SetValue(ThemeProperty, value);
    }

    public static readonly DependencyProperty ThemeProperty =
        DependencyProperty.RegisterAttached("Theme", typeof(Theme), typeof(RadCalendarExtensions), new PropertyMetadata(OnThemeChanged));

    private static void OnThemeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        RadCalendar radCalendar = (RadCalendar)d;

        radCalendar.Loaded += RadCalendar_Loaded;
    }

    private static void RadCalendar_Loaded(object sender, RoutedEventArgs e)
    {
        RadCalendar radCalendar = (RadCalendar)sender;

        Theme theme = GetTheme(radCalendar);

        StyleManager.SetTheme(radCalendar, theme);
    }
}

<telerik:RadDatePicker.CalendarStyle>
    <Style TargetType="telerik:RadCalendar">
        <Setter Property="local:RadCalendarExtensions.Theme" Value="Windows11"/>
    </Style>
</telerik:RadDatePicker.CalendarStyle>

The produced result is as follows:

2. RadDateRangePicker

The RadDateRangePicker control does not provide an API for styling the RadCalendar instances. For this part of the requirement, what I could suggest would be to extract the default ControlTemplate of the RadDateRangePicker control and customize it by setting the StyleManager.Theme property on the RadCalendar instances. 

With this being said, I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik