How to Change selected Date background color in RadCalendar?

5 posts, 0 answers
  1. Harshit
    Harshit avatar
    7 posts
    Member since:
    Sep 2011

    Posted 28 Oct 2012 Link to this post

    Hi, I want to change background color of selected date in RadCalendar. I need to change backgound color of selected date to be RED , GREEN, YELLOW or ORANGE depending upon selection made by user. I found SelectedDayStype property but could not make it work on through java script.

    Can someone please help me?
  2. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 01 Nov 2012 Link to this post

    Hi Harshit,

    You could achieve the requested appearance using CSS:
    <style type="text/css">
        table.RadCalendar_Default .rcRow .rcSelected
        {
            background: red;
        }
    </style>
    or JavaScript:
      -mark-up:
    <telerik:RadCalendar ... ClientEvents-OnDateSelected="dateSelected">
      -script:
    function dateSelected(sender, args) {
        var day = args.get_renderDay();
        var value = "red";
     
        if (day.get_isSelected()) {
            day.GetDefaultItemStyle()[0] = "background: " + value + ";";
        }
        else {
            day.GetDefaultItemStyle()[0] = "";
        }
    }

    I hope this will prove helpful.

    All the best,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Harshit
    Harshit avatar
    7 posts
    Member since:
    Sep 2011

    Posted 01 Nov 2012 Link to this post

    Hi, tried the code solution provided by you but problem happens when hover over any selected date, it changes color back to current color. i.e. I had date 02/02/2012 selected with backgroud color = red. Then I selected 02/18/2012 with background color blue. Now if I hover over (blur out of cell for date 02/02/2012) then color changes to blue.

    Thanks
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Nov 2012 Link to this post

    Hi Harshit,

    You can disable the applying of the rcHover class to the cells by overriding the ApplyHoverBehavior function as follows.

    <script type="text/javascript">
     function pageLoad()
     {
       Telerik.Web.UI.Calendar.RenderDay.prototype.ApplyHoverBehavior = function () { return false; };
     }
    </script>

    Thanks,
    Princy.
  6. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 06 Nov 2012 Link to this post

    Hi Harshit,

    Please try out the following approach:
    Copy Code
    <telerik:RadCalendar ... ClientEvents-OnDateSelected="dateSelected" ClientEvents-OnDayRender="dayRender"></telerik:RadCalendar>

    JavaScript:
    Copy Code
    var selectedDates = {};
    function dateSelected(sender, args) {
        var day = args.get_renderDay();
        var value = $find("RadListBox1").get_selectedItem().get_text();
     
        if (day.get_isSelected()) {
            args.get_renderDay().DomElement.firstElementChild.style.backgroundColor = value;
            selectedDates[args.get_renderDay().get_date().join()] = value;
        }
        else {
            args.get_renderDay().DomElement.firstElementChild.style.backgroundColor = "";
            delete selectedDates[args.get_renderDay().get_date().join()];
        }
    }
    function dayRender(sender, args) {
        args.get_renderDay().DomElement.firstElementChild.style.backgroundColor = selectedDates[args.get_date().join()];
    }
    function pageLoad() {
        var calendar = $find("RadCalendar1");
        calendar.unselectDates(calendar.get_selectedDates());
    }

    It works as expected on my side. Please give it a try and let me know about the result.

    Greetings,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017