JQuery datepicker - 設置回調訂單

Question

我正在使用JQuery datepicker並將其顯示給用戶，禁用了一些日子。可以說，我的網站中的某些用戶可以將某些日程標記爲「可用」，即他們的工作時間。它們的可用性必須在日曆中反映給其他用戶。

我已經在網上搜索了這個，看起來應該使用beforeShowDay這個事件，這正是我所做的。簡而言之，當datepicker加載時，我打電話給服務器，解析json結果（日期列表），將它推入一個數組中，在beforeShowDay中讀取數據，在這裏我檢查數組是否在一天。

問題出現在我改變月份的時候。在onChangeMonthYear中，我再次打電話給服務器，並檢索可用於這個新月份的信息。不過，看起來beforeShowDay在之前被稱爲，這意味着沒有加載的可用性，並且日曆什麼也沒有顯示。下面是一些代碼：

var dates = []; 

$(document).ready(function() { 
    var today = new Date(); 
    $.post("/AgendaApi/Day/" + today , null, function(json) { 
    $.each(json, function(index, result) { 
     dates.push(result.AvailableDate); 
    }); 
    }, "json"); 
}); 

$(document).ready(function() { 
    $('#date').datepicker({ 
    minDate: new Date(), 
    dateFormat: 'dd-mm-yy', 
    onChangeMonthYear: function(year, month, thisCalendar) { 
     $.post("/AgendaApi/Day/01-" + month + "-" + year, null, function(json) { 
     $.each(json, function(index, result) { 
      dates.push(result.AvailableDate); 
     }); 
     }, "json"); 
    }, 
    beforeShowDay: function(date) {  
     if ($.inArray(date, dates) > -1) { 
     return [true, '']; 
     } 
     return [false, '']; 
    } 
    }); 
}); 

在上面的代碼我留下了一些特定文化的最新分析和所有的，但你得到的總體思路。我該如何解決這個問題？因爲我想要的是，如果用戶更改月份，我首先獲取該月的所有可用日期，然後然後日曆被「繪製」。而不是相反。我使用的是asp.net MVC，但這並不重要。非常感謝！

Answer 1

我發現了一個解決方案，而不是最好的，我想，但它的作品。我將onChangeMonthYear事件中的請求更改爲同步：

onChangeMonthYear: function(year, month, thisCalendar) { 
    jQuery.ajax({ 
    url: "/AgendaApi/Day/01-" + month + "-" + year, 
    success: function(json) { 
     $.each(json, function(index, result) { 
     dates.push(result.AvailableDate); 
     }); 
    }, 
    dataType: "json", 
    async: false 
    }); 
} 

Answer 2

onChangeMonthYear是beforeShowDay前：

 /* Action for selecting a new month/year. */ 
    _selectMonthYear: function(id, select, period) { 
     var target = $(id); 
     var inst = this._getInst(target[0]); 
     inst._selectingMonthYear = false; 
     inst['selected' + (period == 'M' ? 'Month' : 'Year')] = 
     inst['draw' + (period == 'M' ? 'Month' : 'Year')] = 
     parseInt(select.options[select.selectedIndex].value,10); 
     this._notifyChange(inst); // onMonthYearChange 
     this._adjustDate(target); 
    } 

    _adjustDate: function(id, offset, period) { 
     var target = $(id); 
     var inst = this._getInst(target[0]); 
     if (this._isDisabledDatepicker(target[0])) { 
     return; 
     } 
     this._adjustInstDate(inst, offset + 
     (period == 'M' ? this._get(inst, 'showCurrentAtPos') : 0), // undo positioning 
     period); 
     this._updateDatepicker(inst); 
    }, 

      //_updateDatePicker makes the call to _generateHtml where the beforeShowDate event is executed: 

    _generateHtml{... 
     var daySettings = (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']); 

... 
    }