This is a migrated thread and some comments may be shown as answers.
Smaller Calendar
1 Answer 30 Views
This is a migrated thread and some comments may be shown as answers.
Baatezu
Top achievements
Rank 2
Baatezu asked on 02 Jul 2010, 12:44 AM
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.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Jul 2010, 07:57 AM
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
Asked by
Baatezu
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or