RadControls for ASP.NET AJAX The RadCalendar controls come with a set of predefined styles, which are specified by the styles in the current skin CSS classes. If the Skin property is not set to an empty string, you can use a variety of style properties to further customize the appearance of the control.
Setting these properties will copy any non-blank elements of the specified style to the specific element of the rendered control, overwriting any existing style elements defined by the used skin.
 Caution |
|---|
Setting a style property does not always affect the appearance of a control, if the skin has a setting that applies to a more specific element. |
RadCalendar styles
The following table lists the styles that you can assign to a stand-alone RadCalendar control or the embedded RadCalendar control that acts as a popup to RadDatePicker and RadDateTimePicker:
Property | Default CSS Class | Description |
|---|
CalendarTableStyle | rcMainTable | The style for the day matrix in the main area of the calendar. |
DayStyle | | The style for the regular days in the displayed month (i.e. without selected days, special days, weekends, etc.). |
DayOverStyle | rcHover | The style that is applied when the mouse hovers over the calendar days. |
SelectedDayStyle | rcSelected | The style applied to the selected dates. |
WeekendDayStyle | rcWeekend | The style applied to the weekend dates. |
DisabledDayStyle | | The style applied to the disabled dates. |
OtherMonthDayStyle | rcOtherMonth | The style applied to the days on the Calendar control that are not in the current month. |
OutOfRangeDayStyle | rcOutOfRange | The style for the days on the Calendar control that are out of the predefined range. |
HeaderStyle | | The style for the row and column selectors. |
TitleStyle | | The style of the Calendar title. |
FastNavigationStyle | RadCalendarMonthView_[skin name] | The style applied to the Month/Year fast navigation popup. |
 Note |
|---|
In addition to the style properties listed above, if the calendar has any special days defined, you can set their ItemStyle property to customize the appearance of the special day.
|
RadTimeView Styles
The following table lists the styles that you can assign to the embedded RadTimeView control that acts as a popup to RadTimePicker and RadDateTimePicker:
Property | Default CSS Class | Description |
|---|
TimeStyle | | The style for the selectable time values. |
AlternatingTimeStyle | | The style for every other selectable time value. |
TimeOverStyle | rcHover | The style that is applied when the mouse hovers over a time value. |
HeaderStyle | rcHeader | The style for the header region. |
FooterStyle | rcFooter | The style for the footer region. |
RadInput Styles
The following table lists the styles that you can assign to the embedded RadInput control of RadDatePicker, RadTimePicker, and RadDateTimePicker:
Property | Default CSS class | Description |
|---|
EnabledStyle | riEnabled | The style for the enabled input control. |
DisabledStyle | riDisabled | The style that is applied for the disabled input control. |
EmptyMessageStyle | riEmpty | The style when the value is not set and the input control does not have focus. |
FocusedStyle | riFocused | The style when the input control has focus. |
HoveredStyle | riHover | The style when the mouse hovers over the input control. |
InvalidStyle | riError | The style when the value of the input control is invalid. |
| Note |
|---|
The CSS class definitions for the embedded RadInput control are found in the Input CSS skin file rather than the Calendar CSS file. |
| Note |
|---|
Since the Q1 2013 SP1 version of RadCalendar the hovered style(.rcHover) is appended to the selected style. Thus both styles will be applied when hovering over an element. |
See Also