I have an in-line date picker in which I want to highlight some dates based on array of strings from the server side.

I found out the on load of the page with the datepicker, events the matches in the current month will not be highlighted. when I click the next month button the events on the next moth will be highlighted.

What I discovered that i the matching only get highlighted when I click to the next month and not when I click back to the previous month.

Below is my script:

     var actionCalDates = new Array();
function getDates(month, year) {
            $.ajax({
                url: "/Index/GetAllAlerts",
                data: {
                    month: month,
                    year: year
                }, 
                success: function (result) { 
                    var date = new Date();
                    var i = new Number(date.getMonth());
                    i += 1;
                    actionCalDates = result.split(",");
                }
            });
        }
 function getTitle(ar, d) {
            var result = "";
            for (var i = 0; i < ar.length; i++) {

                if (ar[i].indexOf(d) != -1) {
                    var e = actionCalDates[i].split(";");
                    result += e[0] + "\n";
                }
            }

            return result;
        }
$('#calendar').datepicker({
            numberOfMonths: [1, 1],
            showCurrentAtPos: 0,
            dateFormat: 'dd/mm/y',
            beforeShowDay: function (thedate) {
                var theday = thedate.getDate();
                var x = new Number(thedate.getMonth());
                x += 1;
                var date = thedate.getDate() + "/" + x + "/" + thedate.getFullYear();
                getDates(x, thedate.getFullYear());

                for (var i = 0; i < actionCalDates.length; i++) {

                    var entry = actionCalDates[i].split(";");

                    if (date == entry[1]) {

                        return [true, "highlight", getTitle(actionCalDates, date)];
                    }



                }

                return [true, "", ""];

            },
            onChangeMonthYear: function (year, month, inst) {
                getDates(month, year);
            },
            onSelect: function (d, instance) {

                        $.ajax({
                            url: '/Index/AlertConvertDate',
                            datatype: 'text',
                            data: { dateString: d },
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.statusText);
                                alert(thrownError);
                            },
                            success: function (data) {

                                window.SetHomeContent(data);

                            }

                        });
            }

        });

Please can someone point out where I went wrong?

Thank you all.