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);
                }
            });
        }
    }