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?
Can someone please help me?
4 Answers, 1 is accepted
0
Hi Harshit,
You could achieve the requested appearance using CSS:
or JavaScript:
-mark-up:
-script:
I hope this will prove helpful.
All the best,
Eyup
the Telerik team
You could achieve the requested appearance using CSS:
<style type=
"text/css"
>
table.RadCalendar_Default .rcRow .rcSelected
{
background
:
red
;
}
</style>
-mark-up:
<
telerik:RadCalendar
...
ClientEvents-OnDateSelected
=
"dateSelected"
>
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
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.
Thanks,
Princy.
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
Hi Harshit,
Please try out the following approach:
JavaScript:
It works as expected on my side. Please give it a try and let me know about the result.
Greetings,
Eyup
the Telerik team
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.