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. Dimo
    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.

    <%@ 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" />
    <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*/
    <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" />

    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