As of our Q2 2006 release all resources (scripts, skins, etc) are implemented as Embedded WebResources in ASP.NET 2.0 for a very easy and convenient deployment. The only thing you now need to do is drag r.a.d.calendar from your toolbox onto your web page (no external files will be required). The /RadControls folder will only be needed if you plan to use a skin other than the default or if you make any modifications to the script files.
A skin is a folder which consists of two main elements: images and CSS file. They are both used to define the appearance of the Telerik RadCalendar. To apply a skin to the calendar you need to set the Skin property to specify the name of the skin to use.
|
 |
Skin = "Stylish"
|
Skin = "Orange"
|
When you set the Skin property to an empty string the calendar assumes that you are going to use the ImagesBaseDir and CssFile properties, that is why it does not default to any particular skin. When you are not using our skins you can set your own look for the calendar by using these properties or manually altering the Style Settings.
Creating Custom Skins
The fastest way to get started with your own custom skin is by modifying an existing skin. By default the Telerik RadCalendar skins are located in ~/RadControls/Calendar/Skins.
From http://www.telerik.com/skins, you can download all resources necessary to deploy or modify selected skins for the Telerik components. Each skin archive contains the images, css, and aspx declaration needed to apply a skin in your project, as well as the original Adobe Photoshop .psd source file you will need to modify the design. For more instructions, please refer to the Readme file in the skin archive.
CSS Settings
|
CSS Class |
Description |
|
.titlebar_[skin name] |
applied to the cells inside the calendar title section |
|
.TableLayout_[skin name] |
applied to the calendar area (the inner area that represents the dates). These settings are generally applied to the whole table and are suitable for defining background color or image and borders. |
|
.radCalDefault_[skin name] |
applied to the date cells representing WeekDays inside the calendar area (default state) |
|
.radCalSelect_[skin name] |
applied to the date cells representing WeekDays inside the calendar area when the respective dates are selected |
|
.radCalHover_[skin name] |
applied to the date cells representing WeekDays inside the calendar area when you mouse over them |
|
.radCalDisable_[skin name] |
applied to the date cells representing WeekDays inside the calendar area when the respective dates are disabled |
|
.radCalWeekendDefault_[skin name] |
applied to the date cells representing WeekEnds inside the calendar area (default state) |
|
.radCalWeekendSelect_[skin name] |
applied to the date cells representing WeekEnds inside the calendar area when the respective dates are selected |
|
.radCalWeekendHover_[skin name] |
applied to the date cells representing WeekEnds inside the calendar area when you mouse over them |
|
.radCalWeekendDisable_[skin name] |
applied to the date cells representing WeekEnds inside the calendar area when the respective dates are disabled |
|
.otherMonth_[skin name] |
applied to the date cells for days that belong to the previous and next months, rendered in the same MonthView with the current month |
|
.outOfRange_[skin name] |
applied to the date cells for days of the current month that are out of the valid range, specified by the RangeMinDate and RangeMaxDate properties |
|
.DaysOfWeek_[skin name] |
applied to the calendar view row/column header cells. |
|
.MonthYearFastNav_[skin name] |
applied to the calendar Month/Year fast navigation popup table. |
|
.radPopupImage_[skin name] |
applied to the datepicker popup image cell. |