jquery ui calendar load events on page load

Question

So, I have the days loaded in calendar with solution from my previous question

code here for clarity

$("#datepicker").datepicker({
    firstDay: 1,
    dateFormat: "yy-mm-dd",
    minDate: minDate,
    beforeShowDay: function (date) {

        var month = (date.getMonth() + 1).toString().padStart(2, "0");
        var year = date.getFullYear();
        var day = date.getDate().toString().padStart(2, "0");

        // Change format of date
        var newdate = year + "-" + month + '-' + day + 'T00:00:00';
        // Check date in Array
        if (jQuery.inArray(newdate, unavDates) != -1) {
            return [true, "available"];
        }
        else{
            return [false, "unavailable"];
        }
        if (date.getDay() === 0 || date.getDay() === 6 || date.getDay() === 1 || date.getDay() === 5){
            return false;
        }

        return [true];
    },

});

but the problem I have is that the function is triggered by a click on a day in calendar. How do I make it available on page load?

Sachin Singh · Answer

You need to add one line async: false, in your ajax call where you fill unavDates. so, instead of shorthand ajax that is $.get use full ajax $.ajax({ url : "?handler=LoadDaysCMP", type : "get", async: false, success : function(data) { dates = []; data.forEach(function(i,v){ dates.push((new Date(i)).setHours(0,0,0,0).valueOf()); }, error: function() { connectionError(); } });

Marius Vasile · Answer

Hi Naimish, yes beforeShowDay is triggered by click on calendar day

Naimish Makwana · Answer

Hi Marius, Which function is triggered by a click? Are you talking about beforeShowDay ? Thanks

Marius Vasile · Answer

Thank you Sachin, is working now. Final script $(document).ready(function() { var unavDates = new Array(); $.ajax({ url: "?handler=LoadDaysCMP", method: 'GET', dataType: 'json', async: false, success: function(data) { for (var i in data) { unavDates.push(data[i]); } } }); function IsWeekend(date) { if (date.getDay() === 0 || date.getDay() === 6) return true; else return false; } var currentTime = new Date() var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), +1); //one day next before month $(function(){ $("#datepicker").datepicker({ firstDay: 1, dateFormat: "yy-mm-dd", minDate: minDate, beforeShowDay: function (date) { var month = (date.getMonth() + 1).toString().padStart(2, "0"); var year = date.getFullYear(); var day = date.getDate().toString().padStart(2, "0"); // Change format of date var newdate = year + "-" + month + '-' + day + 'T00:00:00'; // Check date in Array var string = jQuery.datepicker.formatDate(newdate, date); var isDisabled = (!IsWeekend(date)) && (unavDates.indexOf(string) == -1); // used to disable if its an holiday or weekend return [isDisabled]; }, onSelect: function () { var selected = $(this).val(); $("#dataSelect").val(selected); } }); }); });