datepicker ui onChangemonthyear runs before beforeshowday

Question

I use the jquery Datepicker ui. (http://jqueryui.com/datepicker/)

I want to color the days as i get back from ajax which dates to color.

I have this:

     $(document).ready(function()
    {
        getAllDays();
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            onChangeMonthYear: getAllDays,
            beforeShowDay: highlightDays,
            dateFormat: 'DD, d MM, yy',
            altField: '#date_due',
            altFormat: 'yy-mm-dd',
            firstDay: 1
        });
    });

as the datepicker. Now the problem is that i get my days to color in the getAllDays function, and i color the days in the highlightDays function. BUT highlightdays get run before getAllDays, so the month are colored incorrectly(colored like the previous month)

in case needed these are the 2 functions:

      function getAllDays(year, month) {


        $.ajax({
            async: false,
            cache: false,
            url: "AantalUrenAjax?_d" + (new Date().getTime()) + "&jaar=" + year + "&maand=" + month,
            dataType: "json",
            success: function(data) {
                // loop over dayUsage array result
                $.each(data, function(index, value) {
                    // add to different arrays depending on how much time is allocated in estimates

                    enabledDays.push(value);

                });



            }
        });

    }

      function highlightDays(date) {

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

            // console.log((enabledDays[i].jaar,enabledDays[i].maand,enabledDays[i].dag).toString());

            if (new Date(enabledDays[i].Jaar, enabledDays[i].Maand, enabledDays[i].Dag).toString() === date.toString()) {
                textdisplay = "Er zijn nog " + enabledDays[i].aantalafspraken.toString() + " Vrije afspraken";
                switch (true) {
                    case (enabledDays[i].aantalafspraken < 1):
                        return [true, "Volzet", textdisplay];
                        break;
                    case (enabledDays[i].aantalafspraken < 3):
                        return [true, "BijnaVolzet", textdisplay];
                        break;
                    default:
                        return [true, 'Vrij', textdisplay];
                }

            }

        }

        return [true, ''];






    }

I tried to fix this for 20 hours now, and i just can't fix it :(

Answer 1

Did you try moving your highlight days into the success call back of your getAllDays function?

success: function(data) {
    // loop over dayUsage array result
    $.each(data, function(index, value) {
        // add to different arrays depending on how much time is allocated in estimates

        enabledDays.push(value);

    });

    highlightDays...

}