Smaller Calendar

2 posts, 0 answers
  1. Baatezu
    Baatezu avatar
    110 posts
    Member since:
    Aug 2007

    Posted 01 Jul 2010 Link to this post

    What would I need to change to make the calendar smaller?
    I'm using it in MultiView and would like a reduction in size, as the months are a pretty decent chunk of real estate on the screen.
    Is something simple like some settings, or complicated like editing css files?
    Or can I apply new css classes to do this for me?

    While I go adventuring down those possible paths [didn't see anything that stood out, but haven't hunted yet], maybe someone will give me an answer quicker.

  2.
  3. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 02 Jul 2010 Link to this post

    Hi Baatezu,

    In order to make the RadCalendar views smaller, you can decrease some cell paddings and line heights. Here is an example.

    http://www.telerik.com/help/aspnet-ajax/calendar_appearanceunderstandingtheskincssfile.html

    http://www.telerik.com/help/aspnet-ajax/calendar_appearancecssskinfileselectors.html

    http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx


    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .smaller .rcCalendar table.rcMainTable
    {
        height:auto; /*instead of 176*/
    }
     
    .smaller td.rcCalendar
    {
        width:190px; /*instead of 220*/
    }
     
    .smaller td.rcTitlebar table
    {
        line-height:22px; /*instead of 27*/
    }
     
    .smaller table.rcMainTable
    {
        line-height:14px; /*instead of 17*/
    }
     
    .smaller table.rcMainTable .rcTitle
    {
        line-height:18px; /*instead of 22*/
    }
     
    .smaller tr.rcWeek .rcViewSel,
    .smaller tr.rcRow th
    {
        padding-left:3px; /*instead of 9*/
        padding-right:3px; /*instead of 7*/
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <p>Default styles</p>
     
    <telerik:RadCalendar ID="RadCalendar1" runat="server" MultiViewColumns="3" />
     
    <p>Modified styles</p>
     
    <telerik:RadCalendar ID="RadCalendar2" runat="server" MultiViewColumns="3" CssClass="smaller" />
     
    </form>
    </body>
    </html>


    Greetings,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top