Calendar scroll

2 posts, 1 answers
  1. Timothy straub
    Timothy straub avatar
    3 posts
    Member since:
    Apr 2004

    Posted 17 May 2010 Link to this post

    Hi,

    I have placed a calendar control in a div tag with overflow:auto.
    The Calendar control is set Multviewrows = 12, which shows all 12 months.

    I want to scroll down , so that default month shown on the top is the current month.
    I do not want my calendar to start from current month, just want the scroll bar to adjust so that the current month is on the top.


    Below is the code

    <

     

    div id="CalendarDiv" style="height:570px; width:160px; overflow:auto;" >

     

     

    <telerik:RadCalendar ID="cldrVacation" runat="server" ShowRowHeaders="false"

     

     

    FocusedDate="2007-01-01" FirstDayOfWeek="Sunday" MultiViewRows="12" SelectedDate=""

     

     

    OnDayRender ="SetCalendarDays" AutoPostBack="True" OnHeaderCellRender="cldrVacation_HeaderCellRender"

     

     

    UseColumnHeadersAsSelectors="False" EnableNavigation="False" OnSelectionChanged="cldrVacation_SelectionChanged"

     

     

    EnableRepeatableDaysOnClient="False" SingleViewRows="7" ShowOtherMonthsDays="False"

     

     

    EnableEmbeddedBaseStylesheet="false" TitleStyle-CssClass ="calendarTitleNoDisplay" >

     

     

    </telerik:RadCalendar>

     

     

    </div>

     




    Thanks,
    Saifee.A
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 18 May 2010 Link to this post

    Hi Timothy,

    You can set the scrollable div's scrollTop property, according to the current month and height of a single month view.

    <%@ 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 id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <div id="CalendarDiv" style="height:570px; width:200px; overflow:auto;" >
    <telerik:RadCalendar ID="cldrVacation" runat="server" ShowRowHeaders="false"
    FocusedDate="2010-01-01" MultiViewRows="12" AutoPostBack="True"
    UseColumnHeadersAsSelectors="False" EnableNavigation="False" ShowOtherMonthsDays="False">
        <ClientEvents OnLoad="scrollDiv" />
    </telerik:RadCalendar>
    </div>
     
    <script type="text/javascript">
     
    function scrollDiv(sender, args)
    {
        var titleBarHeight = $telerik.getElementByClassName(sender.get_element(), "rcTitlebar", "td").offsetHeight;
        var viewHeight = $telerik.getElementByClassName(sender.get_element(), "rcCalendar", "td").offsetHeight;
        $get("CalendarDiv").scrollTop = titleBarHeight + (new Date()).getMonth() * viewHeight;
    }
     
    </script>
     
    </form>
    </body>
    </html>


    Best wishes,
    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.
Back to Top