jQuery DatePicker - How to highlight certain days every month?
- by Sergio
Hi
I have a jquery datepicker which is renders the current date by default as a full calendar. Before this is rendered I get a list of days from the server via ajax of days that need to be highlighted for the current month. The code for this is as follows:
$.get("Note/GetActionDates/?orgID=" + orgID + "&month=" + month +"&year=" + year,
null, function(result) {
RenderCalendar(result);
}, "json");
function RenderCalendar(dates) {
$("#actionCal").datepicker({ dateFormat: 'dd/mm/yy', beforeShowDay: function(thedate) {
var theday = thedate.getDate();
if ($.inArray(theday, dates) == -1) {
return [true, "", ""];
}
else {
return [true, "specialDate", "Actions Today"];
}
}
});
}
This is all good, but I would like the highlighted dates to update when the user clicks to a different month. I can modify the jquery datepicker initialise code with the following code:
onChangeMonthYear: function(year, month, inst) {
//get new array of dates for that month
$.get("Note/GetActionDates/?orgID=" + orgID + "&month=" + month + "&year=" + year,
null, function(result) {
RenderCalendar(result);
}, "json");
}
But this doesn't seem to work.
Could anyone show me what I'm doing wrong? Thanks! :)
UPDATE - Working Code
Thanks for the help!
I have tweaked the code from petersendidit as follows and it now works. Gonna add a little more code to remove duplicate dates from the dates array but aside from that its all good.
$("#actionCal").datepicker({
dateFormat: 'dd/mm/yyyy',
beforeShowDay: function(thedate) {
var theday = thedate.getDate() + "/" + (thedate.getMonth() + 1) + "/" + thedate.getFullYear();
if ($.inArray(theday, actionCalDates) == -1) {
return [true, "", ""];
} else {
return [true, "specialDate", "Actions Today"];
}
},
onChangeMonthYear: function(year, month, inst) {
dateCount = 0;
getDates(orgID, month, year);
}
});
function getDates(orgID, month, year) {
dateCount += 1;
if (dateCount < 4) {
$.ajax({
url: "Note/GetActionDates/",
data: {
'orgID': orgID,
'month': month,
'year': year
},
type: "GET",
dataType: "json",
success: function(result) {
actionCalDates = actionCalDates.concat(result);
getDates(orgID, month + 1, year);
getDates(orgID, month - 1, year);
}
});
}
}
