Question

I’m using jQuery’s datepicker beforeShowDay event, where I check the dates if they has to be enabled in the calendar. First I got the dates to check on a page load with PHP, but now I want to get those dates with an ajax request (I’m using WordPress), but i can’t figure that out.

Here’s my code:

$(function() {  
    var enabledDays = [];        

    function openedDays() {
        var data = {
            action: 'get_dates',
            zaal: <?php echo $zaal_id; ?>,
            async: false,
            dataType: 'json'
        };

        $.getJSON(ajaxurl, data, function(response) {
            $.each(response, function(key, value) {
                enabledDays.push(value);  
            });
            //works, console.log(enabledDays) shows here an array of dates: ["9-8-2012","9-10-2012"] 

            //add option beforeShowDay to datepicker? (does't work yet)
            $(this).datepicker('option','beforeShowDay',enableAllTheseDays); 

        });

    }


    function enableAllTheseDays(date) {
        //how to get value of the enabledDays variable in here

        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

        for (i = 0; i < enabledDays.length; i++) {
            if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
                //return true(enable date in Current Days Open calendar) if date is in array, add class 'ui-datepicker-opened-day' and tooltip 'opened' to it.
                return [true,'ui-datepicker-opened-day','opened'];
            }
        }            

        //return false(disable date in Current Days Open calendar) if date isn't in both of the arrays, and add tooltip 'closed' to it.    
        return [false,'ui-datepicker-closed-day','closed'];

    }


    //show Current Days Open Calendar
        $( "#currentdays" ).datepicker({
            dateFormat: "dd-MM-yy",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: 0,
            beforeShow: openedDays
        });  

});

I need to find a way to get the dates from the openedDays function, before executing the enableAllTheseDays function, so I can use the enabledDays variable in the enableAllTheseDays function.

Answer 1

Instantiate the datepicker once in your onLoad() function and define the beforeShowDay() method at that time. beforeShowDay() will be called each time the datepicker is displayed, allowing you to iterate over dates each time.

$(function(){
    $("your-selector").datepicker({
        beforeShowDay: function(date) {
            // Either put the enable days code here (I prefer this route)
            // or call it from here: return enableAllTheseDays(date);
            // or define beforeShowDay as beforeShowDay: enableAllTheseDays.
            // It will run each time the date picker is displayed.
        }
    });

    // Now setup your ajax call to load your dates into enabledDays
    // Do not call datepicker again
    $.getJSON(ajaxurl, data, function(response) {
        $.each(response, function(key, value) {
            enabledDays.push(value);
        });
    });
});