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, '']); 

... 
    }