JQuery datepicker - установить порядок обратного вызова

Question

Я использую средство выбора даты JQuery и показываю его пользователю с отключенными днями. Некоторые пользователи на моем сайте могут пометить некоторые дни в программе как «доступные», так сказать, свое рабочее время. Их доступность должна быть отражена в календаре другим пользователям.

Я искал в Интернете это, и кажется, что для этого нужно использовать событие beforeShowDay, что я и делаю. Короче говоря, когда загружается средство выбора даты, я звоню на сервер, анализирую результат 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, '']);

...
   }