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
0
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
Greetings,
Dimo
the Telerik team
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"<html xmlns="http://www.w3.org/1999/xhtml"><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