Appointments colors shown in year view

[Jalil]

Hi,

I am using radscheduler and customizing the colors of Appointments in Day, Week and Month Views, However, in the Year view I am unable to view the appointments days in different colors (depending on what type of appointments are made on that day). In the year view, all days containing appointments are shown in a single color, is there a way to view these days in different colors?

We are against our project deadline so a quick response would be greatly appreciated.

Thanks,

Jalil Akhtar

[Peter Milchev]

Hello Jalil,

The RadScheduler does not support customizing the Appointment color in Year view out of the box. Because the YearView does not fire the OnSlotCreated event, the only way to achieve that functionality is with client side programming. You should investigate the HTML structure of the day cell (anchor tag inside a td). Then using JavaScript you could traverse all the days in the YearView. For each day you should check in the appointments collection if there are appointments for the day (using the getAppointmentsInRange or getAppointmentsStartingInRange) and if there are, you could add your custom CSS class and change the highlight color of the cell.

Regards,
Peter Milchev
Telerik

[Scott]

I have code that will change the background colors in the week and month views but not the year view.  I see the message that customizing the color in the year view is not supported, but the post was from 2016.  Is this still the case?  If changing the backgound color in the year view is not supported via OnAppointmentDataBound or any other server side method, then can you share any javascript code on how this can be handled in the year view?

[Peter Milchev]

Hello Scott,

Yes, the server-side event modifications still does not affect the Year view cells. 

Nevertheless, you can get the information on the server side, convert it to a JSON string and pass it to the client side via a hidden field for example. 

Then, you can use jQuery or plain JavaScript to access the date cells which are rendered as <a> tags with href attribute with the date in format "#YYYY-MM-DD" (e.g. 2019-07-25) and CSS class .rsDateHeader. That would allow you to change the inline styles of the cells or add a CSS class which can be used to style the cell with CSS rules on the page.

<telerik:RadCodeBlock runat="server">
    <script>
        function pageLoadHandler() {
            var scheduler = $find("<%= RadScheduler1.ClientID %>");
            if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.YearView) {
                var $schedulerElement = $telerik.$(scheduler.get_element());
                var $dateheader = $schedulerElement.find("a.rsDateHeader[href='#2012-03-05']");
                var $dateheadercell = $dateheader.closest("td");
                // add CSS class to use for styling with CSS classes
                $dateheader.addClass("custom-class");
                // set the styles as inline styles
                $dateheader.css({
                    "background-color": "green",
                    "color": "red"
                });
            }

            // Sys.Application.remove_load(pageLoadHandler);  
        }
        Sys.Application.add_load(pageLoadHandler);
    </script>
</telerik:RadCodeBlock>

Regards, Peter Milchev
Progress Telerik