Calendar scroll in UI for ASP.NET AJAX

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

Calendar scroll

1 Answer 34 Views

Calendar

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

Timothy straub asked on 17 May 2010, 04:32 PM

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

1 Answer, 1 is accepted

Accepted

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

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