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

Calendar scroll

1 Answer 169 Views
This is a migrated thread and some comments may be shown as answers.
Timothy straub
Top achievements
Rank 1
Timothy straub asked on 17 May 2010, 04:32 PM

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









1 Answer, 1 is accepted

Sort by
Telerik team
answered on 18 May 2010, 11:01 AM
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" />
<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" />
<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;

Best wishes,
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
Timothy straub
Top achievements
Rank 1
Answers by
Telerik team
Share this question