This is a migrated thread and some comments may be shown as answers.

Animation and Calendar Size

2 Answers 158 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

answered on 01 May 2009, 08:22 AM

Hello aciang,

In order to make RadCalendar smaller, you can edit (override) the CSS skin and reduce the padding of the HTML elements inside the date matrix cells (spans and hyperlinks). You can also decrease the default width in the skin. Below is a simple example, which compares the size of a modified Default skin with an unmodified Telerik skin (by design, they are equal in size). Note that the example will work with Q3 2008 or later, as the CSS classes of older versions are different. In addition, the width of the calendar cannot be decreased too much, as this will cause the titlebar to wrap to 2 lines in some months with longer names (e.g. september, november), unless you decrease the font-size or use a shorter title format.

With regard to the popup animation, I am afraid this is not supported at the moment and requires changes in the control's client-side code. We can implement this behavior in the future.

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            html table.RadCalendar_Default 
        
            { 
        
                width:160px; 
        
            } 
        
            table.RadCalendar_Default .rcMainTable 
        
            { 
        
                line-height:14px; 
        
            } 
        
            table.RadCalendar_Default .rcWeek th 
        
            { 
        
                padding:2px 4px 1px 0; 
        
            } 
        
            table.RadCalendar_Default .rcWeek .rcViewSel, 
        
            table.RadCalendar_Default .rcRow th 
        
            { 
        
                padding:0 5px 0 7px; 
        
            } 
        
            table.RadCalendar_Default .rcMain .rcRow a, 
        
            table.RadCalendar_Default .rcMain .rcRow span 
        
            { 
        
                padding:1px 3px 1px 0; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            Default (modified): <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Default" Calendar-TitleFormat="MMM yyyy" /> 
        
            Telerik: <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Telerik" /> 
        
            </form> 
        
            </body> 
        
            </html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.