RadControls for ASP.NET AJAX The RadCalendar controls use skins to control their overall look-and-feel. A skin is
a set of images and a CSS stylesheet that can be applied to the control elements (date cells, buttons, etc.) and defines their look and feel.
To apply a skin to a RadCalendar, RadDatePicker, RadTimePicker,
or RadDateTimePicker control, set its Skin property, either using the properties pane or
the control's Smart Tag.
On RadDatePicker, RadTimePicker, and RadDateTimePicker, the
Skin property value is always propagated to the child controls (the embedded RadDateInput
and popup RadCalendar and/or RadTimeView controls).
The RadCalendar controls are installed with a number of preset skins. These are shown below:
 Note |
|---|
With Q2 2011 release of RadControls for ASP.NET AJAX RadCalendar has four new skins (Transparent + Office2010 variations). To use them you should add the Telerik.Web.UI.Skins
assembly to your Bin folder. For more information, refer to this blog post.
Since Q3 2011 all the built-in skins (except the Default one) have been relocated to the Telerik.Web.UI.Skins.dll assembly.
Also new Metro skin has been added for RadCalendar.
|
Not using skins
If you do not set the Skin property, the RadCalendar controls automatically use the "Default" skin. If you do not want to use a skin with your control, set its Skin property to an empty string. If you also want to prevent the control's base stylesheet from registering, please set EnableEmbeddedBaseStylesheet to false. The base stylesheet contains CSS styles, which are applied to the RadCalendar, RadDatePicker, RadTimePicker and RadDateTimePicker control instances, regardless of their skin name, because these styles are the same for all skins. These base styles include alignment, positioning, border widths, paddings, etc.
Customizing Skins
You can tweak the existing skins, or create your own. Each skin has two main elements: images and a stylesheet. When creating your own skin, it is a good idea to start with the stylesheet of an existing skin and alter that. See Creating a Custom Skin for a step-by-step walk through. To use your own skin:
Add the new CSS file to your project.
Drag and drop the CSS file from the Project Explorer onto your Web page.
Set the EnableEmbeddedSkins property of the control to False.
If the custom skin does not contain background image styles for the calendar or picker buttons, set the ImagesPath property to specify the location the navigation images in the RadCalendar titlebar and the pickers' popup buttons. RadCalendar will look for the following images in the specified location: arrorRight.gif, fastNavRight.gif, arrowLeft.gif and fastNavLeft.gif. The date/time pickers will look for the following images: datePickerPopup.gif, datePickerPopupHover.gif, clock.gif and clockHover.gif. Alternatively to using ImagesPath, you can set the location of each image separately.
The RadCalendar and pickers' base stylesheet is called Calendar.css and is placed in the ...Skins/ directory. The stylesheet for a particular skin has the name Calendar.[SkinName].css and can be found in the ...Skins/[SkinName] directory. The images are found in the ...Skins/[SkinName]/Calendar directory. For example, the stylesheet for the "Black" skin is called Calendar.Black.css and is located in the ...Skins/Black directory. The images are found in the ...Skins/Black/Calendar directory. The images are referenced by name from within the stylesheet.
The RadCalendar stylesheet includes the CSS class definitions that are applied to the RadCalender control and all aspects of the RadDatePicker, RadTimePicker and RadDateTimePicker controls except for the embedded RadDateInput control. The embedded RadDateInput control uses the RadInput stylesheet, which has the name Input.[SkinName].css.
For more information on the CSS File structure, see Understanding the Skin CSS File.
Setting a custom skin from the web.config
In order to set a custom skin for all RadDatePickers, RadTimePickers and RadDateTimePickers in the website, please use the following keys and values in the web.config:
CopyXML
<appSettings>
<add key="Telerik.DatePicker.Skin" value="MyCustomSkin" />
<add key="Telerik.TimePicker.Skin" value="MyCustomSkin" />
<add key="Telerik.DateTimePicker.Skin" value="MyCustomSkin" />
<add key="Telerik.DatePickingInput.EnableEmbeddedSkins" value="false" />
<add key="Telerik.DatePickingCalendar.EnableEmbeddedSkins" value="false" />
<add key="Telerik.RadTimeView.EnableEmbeddedSkins" value="false" />
</appSettings>(Depending on your scenario, you may not need all of the above statements. Note that unlike the other controls, the RadTimeView control requires a "Rad" prefix.)
In order to set a custom skin for standalone RadCalendar controls, please use a Telerik.Calendar.Skin and Telerik.Calendar.EnableEmbeddedSkins keys.