RadCalendar for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

A number of properties let you set the look and feel of the RadCalendar controls:

  • The Skin property lets you specify a skin to set the overall look and feel of any of the controls. You can even assign separate skins to the embedded controls of RadDatePicker, RadTimePicker, and RadDateTimePicker.

  • In addition to the skin, you can set a variety of styles that further customize the look and feel supplied by the skin.

  • You can use templates to add controls and HTML elements to portions of the RadCalendar and RadTimeView controls:

  • The ImagesPath property allows to specify a path for a directory that contains custom images which can replace the default ones. It is applicable for RadCalendar, RadDatePicker, RadTimePicker and RadDateTimePicker controls and enables versatile customization of their appearance. Note, that in order for that property to work you need to also set EnableEmbeddedSkins="false".

Here is an example using the ImagesPath property:

CopyXML
     

<telerik:RadDateTimePicker EnableEmbeddedSkins="false" ImagesPath="~/Images" ID="RadDateTimePicker1" runat="server">
</telerik:RadDateTimePicker>

In addition to the properties mentioned above, which apply to all types of RadCalendar controls, the various RadCalendar controls allow further customization of their appearance.

RadCalendar

On the RadCalendar control, you can configure most aspects of its layout, including

RadDatePicker, RadTimePicker, and RadDateTimePicker

Animations

RadCalendar and RadDatePicker/RadDateTimePicker support JQuery fade-in/fade-out animation with predefined duration of 300ms (switched on by default). The animation is processed when the date picker popup is displayed/hidden or the fast navigation option of RadCalendar is used.

In order to change the duration of the animation, use the HideAnimation-Duration and ShowAnimation-Duration properties of RadDatePicker/RadDateTimePicker and FastNavigationSettings->HideAnimation-Duration/FastNavigationSettings -> ShowAnimation-Duration properties of RadCalendar.

Here are a couple of sample configurations:

CopyASPX
<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server">
    <HideAnimation Duration="4444" />
    <ShowAnimation Duration="1111" />
</telerik:RadDateTimePicker>
CopyASPX
<telerik:RadCalendar ID="RadCalendar1" runat="server">
    <FastNavigationSettings>
    <HideAnimation Duration="444" />
    <ShowAnimation Duration="111" />
    </FastNavigationSettings>
</telerik:RadCalendar>
Note

If RadDatePicker/RadDateTimePicker postbacks automatically (AutoPostBack property set to true), the HideAnimation-Duration value is 0 and cannot be altered.