New to Telerik UI for WPF? Download free 30-day trial

How to Customize the Calendar Buttons

Customizing the buttons in RadCalendar could easily be achieved by creating a custom StyleSelector and setting it to the DayButtonStyleSelector property of the control.

This tutorial will go through on how to:

  • Create a custom DayButtonStyleSelector

  • Customize the CalendarButton Style

  • Set the DayButtonStyleSelector of RadCalendar

The next example shows how to create a custom DayButtonStyleSelector in order to change the Background color of every Monday in the calendar.

  1. First you will need to create a DayButtonStyleSelector that inherits StyleSelector class:

        public class DayButtonStyleSelector : StyleSelector 
        { 
        } 
    
  2. Create a property of type Style:

        public class DayButtonStyleSelector : StyleSelector 
        { 
            public Style SpecialStyleMonday { get; set; } 
        } 
    
  3. Override the SelectStyle() method:

        public class DayButtonStyleSelector : StyleSelector 
        { 
            public Style SpecialStyleMonday { get; set; } 
     
            public override Style SelectStyle(object item, DependencyObject container) 
            { 
                CalendarButtonContent content = item as CalendarButtonContent; 
                if (content != null) 
                { 
                    if (content.Date.DayOfWeek == DayOfWeek.Monday && content.ButtonType == CalendarButtonType.Date) 
                    { 
                        return SpecialStyleMonday; 
                    } 
                } 
                return base.SelectStyle(item, container); 
            } 
        } 
    
  4. Add the following namespaces in the xaml:

        <UserControl xmlns:local="clr-namespace:WpfApplication1" 
                     xmlns:calendar="clr-namespace:Telerik.Windows.Controls.Calendar;assembly=Telerik.Windows.Controls.Input"> 
        </UserControl> 
    
  5. Create a StaticResource for the DayButtonStyleSelector and the SpecialStyleMonday Style:

        <local:DayButtonStyleSelector x:Key="CustomStyleSelector"> 
            <local:DayButtonStyleSelector.SpecialStyleMonday> 
                <Style TargetType="calendar:CalendarButton"> 
                    <Setter Property="Background"> 
                        <Setter.Value> 
                            <SolidColorBrush Color="Orange" Opacity="0.6"/> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 
            </local:DayButtonStyleSelector.SpecialStyleMonday> 
        </local:DayButtonStyleSelector> 
    
  6. Set the DayButtonStyleSelector property of the control:

        <telerik:RadCalendar DayButtonStyleSelector="{StaticResource CustomStyleSelector}"/> 
    
  7. The last step is to set the DayButtonStyle to null in order for the custom DayButtonStyleSelector to be used:

        <telerik:RadCalendar DayButtonStyleSelector="{StaticResource CustomStyleSelector}" 
                     DayButtonStyle="{x:Null}"/> 
    
    The next screenshot shows the final result:

radcalendar-styling-and-appearance-daybuttonstyleselector-1

In this article