Telerik RadControls' for ASP.NET AJAX rendering is quite jQuery friendly. This is because almost all important html elements are tagged by a css class and therefore can be easily accessed using jQuery. In this blog post I have collected various cases from our forums and ticketing system on using jQuery to customize RadScheduler. Special thanks to all customers or visitors who raised those questions.
Q: “I have a scheduler in timeline view showing six weeks of information. Is it possible to change the header row background for the first two weeks?”

A: The first step in finding a solution is to examine the rendered html using Firebug, IE Developer Tools, or any other similar tool. You will notice that the date headers are rendered in <th> tags of a table with a css class rsHorizontalHeaderTable:
<table style="width: 100%; height: 25px" class="rsHorizontalHeaderTable" border="0" |
cellspacing="0" cellpadding="0"> |
<tbody> |
<tr> |
<th> |
<span>7/14/2009</span> |
</th> |
<th> |
<span>7/21/2009</span> |
</th> |
<th> |
<span>7/28/2009</span> |
</th> |
<th> |
<span>8/4/2009</span> |
</th> |
<th> |
<span>8/11/2009</span> |
</th> |
<th> |
<span>8/18/2009</span> |
</th> |
</tr> |
</tbody> |
</table> |
Therefore, we access the collection of <th> elements of a table with the specified class name with: $("table.rsHorizontalHeaderTable th"). Then we use the slice(0, i) method to take the first i elements starting with the first. Here is the complete code:
<script type="text/javascript"> |
window.$ = $telerik.$; |
function pageLoad() |
{ |
var scheduler = $find('<%=RadScheduler1.ClientID %>'); |
if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView) |
{ |
//2 weeks out of 6 weeks view is one third of header cells, hence: |
var i = this.$("table.rsHorizontalHeaderTable th").length / 3; |
$("table.rsHorizontalHeaderTable th").slice(0, i).css("background", "orange"); |
} |
} |
</script> |
Q: “By default, clicking on a date number in Month view switches to Day view of the clicked date. How can I disable this functionality?”
A: We find all elements that have the rsDateHeader css class and disable their click and doubleclick events.
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> |
<script type="text/javascript"> |
window.$ = $telerik.$; |
|
function pageLoad() { |
var scheduler = $find("<%= RadScheduler1.ClientID %>"); |
if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.MonthView) { |
$(".rsDateHeader").each(function() { |
$(this).click(doNothing).dblclick(doNothing); |
}); |
} |
} |
|
function doNothing(e) { |
if (!e) e = window.event; |
|
e.cancelBubble = true; |
if (e.stopPropagation) { |
e.stopPropagation(); |
} |
} |
</script> |
</telerik:RadScriptBlock> |
Q: "How can i scroll to the first appointment in a dayview. The dayview allways beginns at the first position. I want to scroll to automatically to the first appointment."
A: The following code finds the first appointment and calls the scrollIntoView() method:
<script type="text/javascript"> |
function pageLoad(){ |
$ = $telerik.$; |
var scheduler = $find("<%= RadScheduler1.ClientID %>"); |
var firstApp = $(".rsApt")[0]; |
if (firstApp) |
firstApp.scrollIntoView(); |
} |
</script> |
|