jQuery DatePicker - How to highlight certain days every month?

Question

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

Answer 1

The problem is that you are making the ajax request onChangeMonthYear and re-initializing the datepicker, by the time your ajax request finishes the new month is already drawn.

What you could do is load the "dates" for the current month and the previous and next month. Then onChangeMonthYear go fetch more dates and add that to your datesArray.

Something like this (untested):

var actionCalDates = array();
function getDates(orgID, month, year) {
    $.ajax({
        url:"Note/GetActionDates/",
        data: {
            'orgID':orgID,
            'month':month,
            'year':year
        },
        type:"GET",
        dataType: "json",
        success: function(result) {
            actionCalDates.concat(result);
            getDates(orgID, month+1, year);
            getDates(orgID, month-1, year);
        }
    });
}

$("#actionCal").datepicker({ 
    dateFormat: 'dd/mm/yy',
    beforeShowDay: function(thedate) {
        var theday = thedate.getDate();
        if ($.inArray(theday, actionCalDates) == -1) {
            return [true, "", ""];
        } else {
            return [true, "specialDate", "Actions Today"];
        }
    },
    onChangeMonthYear: function(year, month, inst) {
        getDates(orgID, month, year);
    }
});