How to Change selected Date background color in RadCalendar?

[Harshit]

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?

[Eyup]

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

[Harshit]

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

[Princy]

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.

[Eyup]

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