Styling the Calendar

To style the calendar in your RadDateTimePicker you can do the following:

  • Create a Style for it and set it to the CalendarStyle property of the RadDateTimePicker.

  • Modify the default resources for the RadCalendar, that are generated together with the RadDateTimePicker's Style.

To learn how to generate the default Style for the RadDateTimePicker read here. To learn how to modify the layout of the clock, look here.

Setting the CalendarStyle property

Example 1 demonstrates how the week names of the RadCalendar in the dropdown of the RadDateTimePicker can be removed:

Example 1: RadDateTimePicker with CalendarStyle

<Window.Resources> 
    <!-- If you are using the Xaml binaries, you do not have to set the BasedOn attribute--> 
    <Style x:Key="CalendarStyle" TargetType="telerik:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}"> 
        <Setter Property="AreWeekNamesVisible" Value="False" /> 
    </Style> 
</Window.Resources> 
<Grid> 
    <telerik:RadDateTimePicker VerticalAlignment="Center" HorizontalAlignment="Center" CalendarStyle="{StaticResource CalendarStyle}" /> 
</Grid> 

Figure 1: Result from Example 1 in the Office2016 theme

RadCalendar with week names removed

Modifying the default resources

In order to see these resources you have to first generate the default style for the RadDateTimePicker control. To learn how read this topic.

Modifying some of the resources generated for the RadDateTimePicker's style will allow you to change the appearance of the calendar. Here are some of the resources:

  • PickerForeground_Normal - is the foreground brush used in the RadDateTimePicker.

  • CalendarOuterBorder - is the calendar's content outer border brush which appears around the calendar view.

  • CalendarViewBackground - is the calendar view's background brush.

  • CalendarWeekHeaderVerticalOuterBorder - is the outer border brush used for the vertical line separating the week numbers from the dates in the calendar's month view.

  • CalendarWeekHeaderHorizontalOuterBorder - is the outer border brush used for the horizontal line separating the days' names from the dates in the calendar's month view.

  • CalendarWeekHeaderHorizontalBackground - is the background brush used in the calendar's month view, appearing behind the days of the week's names.

  • CalendarWeekHeaderVerticalBackground - is the background brush used in the calendar's month view, appearing behind the days of the week's names.

  • CalendarButtonButtonChromeMargin - is of type Thickness and allows you to change the calendar view element's margin.

  • RadCalendarDefaultStyleKey - defines the calendar's default style.

The following resources describe the RadDateTimePicker content's header:

  • HeaderOuterBorder - represents the RadDateTimePicker content's header outer border brush.

  • HeaderBackground - corresponds to the RadDateTimePicker content's header background.

  • HeaderInnerBorder - represents the RadDateTimePicker content's header inner border brush.

  • HeaderTextBackground - is the foreground brush applied to the RadDateTimePicker content's header.

  • MoveLeftButtonStyle - is the style applied to the header's left button.

  • MoveRightButtonStyle - is the style applied to the header's right button

  • CalendarHeaderButton - is the style applied to the header's main button.

In the Calendar view's header we can modify the default appearance of the left and right buttons. Each of them inherits a common HeaderButtonChrome style, defining the following visual states:

  • Normal - is the normal state of the corresponding element.

  • MouseOver - is active when the mouse is over the corresponding visual element.

  • Pressed - is active when you press the corresponding visual element.

Each of the left and right buttons' default templates contain the following elements:

  • ButtonChrome - a ButtonChrome which default style is HeaderButtonChrome style.

  • BackgroundIcon - the background arrow pointing left or right.

  • ForegroundIcon - the foreground arrow pointing left or right.

For each of the described above common visual states, the following brushes are defined:

  • HeaderButtonOuterBorder - is the element's outer border when it is in the corresponding state (from those described above).

  • HeaderButtonInnerBorder- is the element's inner border when it is in the corresponding state.

  • HeaderButtonBackground - is the element's background when it is in the corresponding state.

  • HeaderButtonIcon - defines the left and right icon's appearance through in the corresponding state (from those described above) including the Disabled state.

Here is an example of the above resources modified:

Here is the result:

See Also

In this article
Not finding the help you need? Improve this article