Calendar Column Horizontal Align

4 posts, 0 answers
  1. Mike
    Mike avatar
    26 posts
    Member since:
    Jul 2008

    Posted 01 Apr 2011 Link to this post

    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
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 07 Apr 2011 Link to this post

    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
  3. Mike
    Mike avatar
    26 posts
    Member since:
    Jul 2008

    Posted 07 Apr 2011 Link to this post

    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">
    <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>
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 12 Apr 2011 Link to this post

    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.

Back to Top