Скрыть / показать полный календарь с обратными вызовами

Question

Я пытаюсь найти способ скрыть календарь (когда пользователь нажимает следующий / предыдущий) во время рендеринга событий, а затем показать все, как только он будет отрендерен. Проблема в том, что сначала загружается календарь, а затем события располагаются сверху, но я бы хотел, чтобы они загружались одновременно. Есть пара подходов, которые, кажется, находятся на правильном пути, но трудности, с которыми я сталкиваюсь, направлены на правильные элементы.

Загрузка обратного вызова - http://jsfiddle.net/gmm8b/25/ Я попытался скрыть / показать календарь с помощью операторов if / else, но в этом календаре не было событий. Может ли календарь не заполняться, когда он скрыт? или я неправильно нацеливаюсь на то, что скрывать / показывать?

loading: function (bool) {
   if (bool) {
     //$('#calendar').hide();
     //alert('The calendar is being populated with events - needs to be hidden');
   } else {
     //$('#calendar').show();
     //alert('Once all the events are rendered - show ');

     // bind to all your events here
   }
},

EventRender - http://jsfiddle.net/gmm8b/27/ Еще одна вещь, которую я попробовал, - это использование обратных вызовов eventRender, которые в итоге привели к аналогичным проблемам.

eventRender: function ( view ) {
  //$("#calendar").hide();
  //$("#calendar").addClass('hidden');
},

eventAfterRender: function ( view ) {
  //$("#calendar").show();
  //$("#calendar").removeClass('hidden');
},

Если кто-то может привести пример или объяснить подход, он будет очень признателен.

Спасибо.

Answer 1

Отключите видимость, а не скрывайте, потому что видимость сохраняет макет и позволяет событиям отображаться на своем месте. Затем, когда все полностью отрендерено, снова включите видимость.

http://jsfiddle.net/gmm8b/32/

loading: function (bool) {
    if (bool) {
        $("#calendar").css({"visibility": "hidden"});
        //alert('Rendering events');
    } else {
        $("#calendar").css({"visibility": "visible"});
        //alert('Rendered and ready to go');
    }
},