Appointments colors shown in year view

4 posts, 0 answers
  1. Jalil
    Jalil avatar
    3 posts
    Member since:
    Mar 2016

    Posted 26 Jun 2016 Link to this post


    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.


    Jalil Akhtar

  2. Peter Milchev
    Peter Milchev avatar
    808 posts

    Posted 29 Jun 2016 Link to this post

    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.

    Peter Milchev
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Scott
    Scott avatar
    7 posts
    Member since:
    Jun 2016

    Posted 05 Aug 2019 in reply to Peter Milchev Link to this post

    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?
  4. Peter Milchev
    Peter Milchev avatar
    808 posts

    Posted 08 Aug 2019 Link to this post

    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">
            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
                    // set the styles as inline styles
                        "background-color": "green",
                        "color": "red"
                // Sys.Application.remove_load(pageLoadHandler);  

    Regards, Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top