Edit this page

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:

    C#

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

    C#

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

    C#

    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:

    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:

    XAML

    <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:

    XAML

    <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:

    XAML

    <telerik:RadCalendar DayButtonStyleSelector="{StaticResource CustomStyleSelector}"
                 DayButtonStyle="{x:Null}"/>
    

The next screenshot shows the final result:

radcalendar-styling-and-appearance-daybuttonstyleselector-1