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

[Michael Koenig]

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?

[Peter]

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