This is a migrated thread and some comments may be shown as answers.

How to Change selected Date background color in RadCalendar?

4 Answers 503 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Harshit
Top achievements
Rank 1
Harshit asked on 28 Oct 2012, 02:53 PM
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?

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 01 Nov 2012, 09:01 AM
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.
0
Harshit
Top achievements
Rank 1
answered on 01 Nov 2012, 12:15 PM
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
0
Princy
Top achievements
Rank 2
answered on 02 Nov 2012, 05:22 AM
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.
0
Eyup
Telerik team
answered on 06 Nov 2012, 12:03 PM
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.
Tags
Calendar
Asked by
Harshit
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Harshit
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or