Colorize rows by resource in Agenda view

Thread is closed for posting
1 posts, 0 answers
  1. EA29E686-AF27-4642-ABE0-763F955DCF04
    EA29E686-AF27-4642-ABE0-763F955DCF04 avatar
    13 posts
    Member since:
    May 2016

    Posted 11 Jul 2018 Link to this post

    Requirements

    Telerik Product and Version

    		 UI for ASP.NET AJAX 2018 R1

    Supported Browsers and Platforms

    		 all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    		 RadScheduler, .NET 4.0/4.5 C#

    PROJECT DESCRIPTION




    The Agenda View provides only a ResourceMarkerType to show the color of the given resource. To apply styles to the whole row, the CSS class applied via ApplyCssClass of the ResourceType can be used to find the row and apply the desired styles via JavaScript:

    <telerik:RadScheduler runat="server"
        ID="RadScheduler1"
        RenderMode="Lightweight"
        SelectedView="AgendaView"
        SelectedDate="2018-07-04">
        <ResourceStyles>
            <telerik:ResourceStyleMapping Type="Calendar" Key="1" ApplyCssClass="red-appointment"></telerik:ResourceStyleMapping>
            <telerik:ResourceStyleMapping Type="Calendar" Key="2" ApplyCssClass="yellow-appointment"></telerik:ResourceStyleMapping>
            <telerik:ResourceStyleMapping Type="Calendar" Key="3" ApplyCssClass="green-appointment"></telerik:ResourceStyleMapping>
            <telerik:ResourceStyleMapping Type="Calendar" Key="4" ApplyCssClass="purple-appointment"></telerik:ResourceStyleMapping>
        </ResourceStyles>
        <AgendaView UserSelectable="true" />
        <TimeSlotContextMenuSettings EnableDefault="true" />
    </telerik:RadScheduler>
    <script>
        function colorAgendaViewAppointments() {
            var $ = $ || $telerik.$;
            $(".red-appointment").closest(".rsAgendaRow").find("td")
                .css("background-color", "red")
                .css("color", "white");
     
            $(".yellow-appointment").closest(".rsAgendaRow").find("td")
                .css("background-color", "yellow");
     
            $(".green-appointment").closest(".rsAgendaRow").find("td")
                .css("background-color", "green")
                .css("color", "white");
     
            $(".purple-appointment").closest(".rsAgendaRow").find("td")
                .css("background-color", "purple")
                .css("color", "white");
        }
        Sys.Application.add_load(colorAgendaViewAppointments);
    </script>



Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.