HTML Output
Styles for Telerik controls are defined using Cascading Style Sheet (CSS) syntax. Each style consists of a selector that identifies an HTML element to be styled, and property/value pairs that describe each of the style specifics, e.g. color, padding, margins, etc. For example, the table.RadCalendar_Default style defines the default width and font styles for the entire calendar control:
table.RadCalendar_Default
{
border-collapse:separate;
border:0;
font:11px arial,tahoma,sans-serif;
width:220px;
}
See CSS Skin Selectors for detailed information on the specific CSS selectors used for the ASP NET AJAX Calendar skins.
HTML Output of RadCalendar
The typical HTML output of a RadCalendar control is the following (some HTML attributes have been removed for simplicity):
<div id="RadCalendar1_wrapper">
<table id="RadCalendar1" class="RadCalendar RadCalendar_Windows7">
<thead>
<tr>
<td class="rcTitlebar">
<table>
<tr>
<td>
<a class="rcFastPrev"><<</a>
</td>
<td>
<a class="rcPrev"><</a>
</td>
<td class="rcTitle">
May 2010
</td>
<td>
<a class="rcNext">></a>
</td>
<td>
<a class="rcFastNext">>></a>
</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="rcMain">
<table class="rcMainTable">
<thead>
<tr class="rcWeek">
<th class="rcViewSel">
x
</th>
<th>
Su
</th>
<th>
Mo
</th>
<th>
Tu
</th>
<th>
We
</th>
<th>
Th
</th>
<th>
Fr
</th>
<th>
Sa
</th>
</tr>
</thead>
<tbody>
<tr class="rcRow">
<th>
18
</th>
<td>
<a>25</a>
</td>
.....
</tr>
<tr class="rcRow">
......</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="RadCalendar1_SD" id="RadCalendar1_SD" value="[]" />
<input type="hidden" name="RadCalendar1_AD" id="RadCalendar1_AD" value="[[1980,1,1],[2099,12,30],[2010,5,12]]" />
</div>
-
div#ClientID_wrapper - this element is not used for any styling, it only wraps the control
-
table.RadCalendar.RadCalendar_SkinName - this is the main control element, which holds the skin name. It has a <thead> child element, which contains the header area, and a <tbody> child element, which contains the date matrix.
-
td.rcTitlebar - the table cell, which wraps all elements in the header area. It contains another <table> and every cell of this table contains a specific element from the header (navigation arrows or title label). When month navigation is disabled (EnableNavigation="false"), the table cell has one more CSS class - rcNoNav.
-
a.rcFastPrev, a.rcPrev, a.Next, a.rcFastNext - the navigation buttons in the header area.
-
td.rcTitle - the table cell, which contains the control's title - the current month and year in the specified TitleFormat.
-
td.rcMain - the table cell, which wraps all elements in the date matrix. It contains another <table> and every cell of this table contains either a day number, or a weekday name, or a week number
-
table.rcMainTable - the table populated with the date matrix, mentioned in the previous list item. It has a <thead> child, which contains the column headers (usually the weekday names) and a <tbody> child, which contains the row headers (usually the week numbers) and the date cells
-
tr.rcWeek - the column header row, which contains the weekday names, each in a separate <th> element. Depends on the ShowColumnHeaders property. If you set Orientation="RenderInColumns", it will contain the week numbers
-
th.rcViewSel - the table header cell, which acts as a view selector - if the user clicks it, all dates will be (un)selected. Depends on the EnableViewSelector property
-
tr.rcRow - a date matrix table row, which contains day cells. The day cells can have several different CSS classes, depending on their state - rcToday, rcWeekend, rcOtherMonth, rcOutOfRange (used with RadDatePicker only). All states obtain the same CSS classes on hover and select - rcHover and rcSelected
-
each day cell contains an <a> element inside with the day number, while out-of-range day cells contain a <span> element. Of course, this does not apply in the case when special day templates are used
Notes on skinning
-
If you intend to use border styles for the RadCalendar table cells, then the border-collapse CSS style of all <table> elements in these controls must be set to separate.
-
The width of RadCalendar depends on the length of the titlebar content (i.e. the month name). In order to prevent resizing when navigating to another month, the control should have a default width (220px set in the Calendar base stylesheet).
-
The RadCalendar navigation buttons and the RadDateTimePicker popup buttons have the following styles by default. This way the buttons can use background images of a set size and no visible text (it is shifted to the left) - display:block; overflow:hidden; text-indent:-2222px; text-decoration:none;