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

Is it possible to change the color of the Hours panel programmatically?

1 Answer 40 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Michael Koenig
Top achievements
Rank 1
Michael Koenig asked on 07 Jul 2010, 08:14 PM
I want to change the color of the hours column programmatically. So I want to have some of the hour labels in one color and other labels in other colors. Is there a way to do this?

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 12 Jul 2010, 05:20 PM
Hello Michael,

Thank you for this question. We have replied in the support ticket you sent us, but for community reference here is the solution we proposed:

If you have two RadScheduler instances, then you need to extend the code as follows:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
       <script type="text/javascript">
           function pageLoad() {
               var $ = $telerik.$;
               var scheduler1 = $find('<%=RadScheduler1.ClientID %>');
               var scheduler2 = $find('<%=RadScheduler2.ClientID %>');
               $('.Red1').each(function (e) {
                   var rowIndex = $(this).closest('tr').prevAll().length;
                   $($('.rsVerticalHeaderTable tr', scheduler1.get_element()).get(rowIndex)).contents().css('color', 'red');
               });
               $('.Green1').each(function (e) {
                   var rowIndex = $(this).closest('tr').prevAll().length;
                   $($('.rsVerticalHeaderTable tr', scheduler1.get_element()).get(rowIndex)).contents().css('color', 'green');
               });
               $('.Red2').each(function (e) {
                   var rowIndex = $(this).closest('tr').prevAll().length;
                   $($('.rsVerticalHeaderTable tr', scheduler2.get_element()).get(rowIndex)).contents().css('color', 'red');
               });
               $('.Green2').each(function (e) {
                   var rowIndex = $(this).closest('tr').prevAll().length;
                   $($('.rsVerticalHeaderTable tr', scheduler2.get_element()).get(rowIndex)).contents().css('color', 'green');
               });
           
       </script> 
   </telerik:RadCodeBlock> 
   <telerik:RadScheduler ID="RadScheduler1" runat="server" 
       ontimeslotcreated="RadScheduler1_TimeSlotCreated">
   </telerik:RadScheduler>
    <telerik:RadScheduler ID="RadScheduler2" runat="server" 
       ontimeslotcreated="RadScheduler2_TimeSlotCreated">
   </telerik:RadScheduler>


Protected Sub RadScheduler1_TimeSlotCreated(sender As Object, e As TimeSlotCreatedEventArgs)
    If e.TimeSlot.Start.Hour = 15 OrElse e.TimeSlot.Start.Hour = 20 Then
        e.TimeSlot.CssClass = "Red1"
    ElseIf e.TimeSlot.Start.Hour = 9 OrElse e.TimeSlot.Start.Hour = 11 Then
        e.TimeSlot.CssClass = "Green1"
    End If
  
End Sub
Protected Sub RadScheduler2_TimeSlotCreated(sender As Object, e As TimeSlotCreatedEventArgs)
    If e.TimeSlot.Start.Hour = 14 OrElse e.TimeSlot.Start.Hour = 19 Then
        e.TimeSlot.CssClass = "Red2"
    ElseIf e.TimeSlot.Start.Hour = 8 OrElse e.TimeSlot.Start.Hour = 10 Then
        e.TimeSlot.CssClass = "Green2"
    End If
End Sub

Basically, the idea is to set unique CssClass for each scheduler and with jQuery add a second parameter to the selector to make sure that this is the table that you need to target

$($('.rsVerticalHeaderTable tr', scheduler2.get_element())


Best wishes,
Peter
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
Tags
Scheduler
Asked by
Michael Koenig
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or