Jquery Calendar disable dates using beforeShow and beforeShowDay

Question

i have implemented code to disable dates using beforeShow and beforeShowDay callbacks

below code is for binding calendar to input

$("#start_on").datepicker({
            onSelect: function(date) {
                date_check(date);
            }, minDate: 0, dateFormat: "yy-mm-dd",
            beforeShow: get_booked,
            beforeShowDay: disable_if_not_available
        });

yes this is binding calendar to element

callback for beforeShow

function get_booked(inpput, inst) {
        var D = new Date();
        var month = (inst.selectedMonth == 0 ? D.getMonth() : inst.selectedMonth) + 1;
        var year = (inst.selectedYear == 0 ? D.getYear() : inst.selectedYear);
        dis_date = new Array();
        $.ajax({
            url: BASE_URL + "contest/get_booked",
            data: {year: year, month: month, id:<?php echo (isset($contest_data->id)) ? $contest_data->id : 0; ?>},
            dataType: "json", type: "POST",
            success: function(data) {
                for (var d in data) {
                    var D = data[d];
                    var start = D.start_on;
                    var d = start.split("-");
                    var sD = new Date(d[0], d[1] - 1, d[2]);
                    var end = D.end_on;
                    var d = end.split("-");
                    var eD = new Date(d[0], d[1] - 1, d[2]);
                    while (sD <= eD) {
                        dis_date.push(sD.getFullYear() + "-" + (sD.getMonth() + 1) + "-" + sD.getDate());
                        sD.setDate(sD.getDate() + 1);
                    }
                }
            }
        });

    }

callback for beforeShowDay

function disable_if_not_available(date) {
        var y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate();
        return [dis_date.indexOf(y + "-" + m + "-" + d) == -1];
    }

problem with this is that disable_if_not_available is getting called before dis_date get filled from get_booked . currently disable_if_not_available return always true because dis_date is empty so what i want to do is to call/return disable_if_not_available only after i get response from get_booked

please ask if any doubt

Answer 1

This happens because the entire initialization of the datepicker ends before the ajax call returns any value.

what you could do is start the ajax call and when the call ends, call the initialization of the datepicker.

example:

...
...
$.ajax({
    url: BASE_URL + "contest/get_booked",
    data: {year: year, month: month, id:<?php echo (isset($contest_data->id)) ? $contest_data->id : 0; ?>},
    dataType: "json",        
    type: "POST",        
    success: function(data) {        
        for (var d in data) {        
            var D = data[d];        
            var start = D.start_on;        
            var d = start.split("-");        
            var sD = new Date(d[0], d[1] - 1, d[2]);        
            var end = D.end_on;        
            var d = end.split("-");        
            var eD = new Date(d[0], d[1] - 1, d[2]);        
            while (sD <= eD) {        
                dis_date.push(sD.getFullYear() + "-" + (sD.getMonth() + 1) + "-" + sD.getDate());        
                sD.setDate(sD.getDate() + 1);        
            }        
        }        
        //CALL YOUR DatePicker Initialization
        initDatePicker();
    }

});
...
...




function initDatePicker(){
    $("#start_on").datepicker({/*Initialization values*/});
}

Answer 2

Simple Solution for this.just use 'async:false' in your ajax call.

Example:

... ... $.ajax({ url: BASE_URL + "contest/get_booked", data: {year: year, month: month, id:id)) ? $contest_data->id : 0; ?>}, dataType: "json",
type: "POST",
async:false, success: function(data) {
... ...