Using the jQuery UI datepicker as an event calendar has been a great experience in Firefox and Chrome. However, I have encountered issues with it not functioning correctly in IE 8 and 9.
The expected behavior is for selected dates to be highlighted when viewing the calendar. Unfortunately, in IE 8 and 9, the days are only highlighted upon clicking on them, rather than being highlighted from the beginning.
See it in action: http://jsfiddle.net/GmPcC/3/ (ignore the text color)
JavaScript:
var events = [
{ Title: "Event1", Date: new Date("06/13/2013") },
{ Title: "event2", Date: new Date("06/25/2013") },
{ Title: "event3", Date: new Date("06/22/2013") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
I hope someone can provide assistance. Thank you.