Edit this page

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. To learn how to create a style that targets the RadCalendar control read here.

  • 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.

This topic will focus on the second approach.

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