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

Calendar Column Horizontal Align

3 Answers 239 Views

Calendar

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

Mike asked on 01 Apr 2011, 06:55 PM

Quick question - I've been trying to figure out how to horizontally align these columns of a simple instance of RadCalendar using 100% width and inside of a fixed width div.

Image: http://i.imgur.com/ksOfZ.jpg

Code:

<div style="width:400px; vertical-align:top;">

<telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Width="100%"

PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true"

EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false"

OnDayRender="RadCalendar1_DayRender" OnPreRender="RadCalendar1_PreRender">

<DayStyle HorizontalAlign="Center" />

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />

</SpecialDays>

</telerik:RadCalendar>

</div>

Appreciate any help. Thanks.

-- Mike

3 Answers, 1 is accepted

answered on 07 Apr 2011, 09:14 AM

Capture.JPG

Hello Mike,

I am not sure what exactly causes the problem on your side because when I browsed the following mark-up in IE7/8/9 the result was different than your screenshot (see attachment).

<div style="width: 400px; vertical-align: top;">

<telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Width="100%"

PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true"

EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false">

<DayStyle HorizontalAlign="Center" />

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />

</SpecialDays>

</telerik:RadCalendar>

</div>

What exactly do you do in PreRender and DayRender event handlers? Are there any other styles on the page that influence the RadCalendar look?

Best wishes,
Tsvetina
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

answered on 07 Apr 2011, 04:17 PM

Try using Windows 7 skin, it seems to be an issue specifically with that skin. Here are two calendars, one Windows 7, one Default skin.

http://i.imgur.com/CN0W1.jpg

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!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">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<div style="width: 400px; vertical-align: top;">

<telerik:RadCalendar ID="RadCalendarWindows7" runat="server" Skin="Windows7" Width="100%"

PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true"

EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false">

</telerik:RadCalendar>

</div>

<br />

<div style="width: 400px; vertical-align: top;">

<telerik:RadCalendar ID="RadCalendar_Default" runat="server" Skin="Default" Width="100%"

PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true"

EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false">

</telerik:RadCalendar>

</div>

</telerik:RadAjaxPanel>

</form>

</body>

</html>

answered on 12 Apr 2011, 02:31 PM

Hi Mike,

Indeed, there seems to be a difference in one of the calendar styles for Windows7 skin. I will forward this to our front end developers to take a look at. In the meantime, the following CSS should help you get the same look for this skin:

table.RadCalendar_Windows7 .rcMain .rcRow a, .RadCalendar_Windows7 .rcMain .rcRow span

{

width:auto;

}

All the best,
Tsvetina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.