Fullcalendar：在日歷不可用時，我應該定位哪個CSS選擇器以便顯示“正在加載”圖像？

Question

因此，我一直試圖在全載貨盤未顯示事件時放置正在加載的圖像。

我的看法是，當全日歷不可用時有兩個階段：

1. 在初始化全日歷之前
2. 在獲取事件時

在查看完整的日歷文檔之后 。 我設法實現以下代碼。

HTML：

<div id="cal">
  <h2>
    Calendar
  </h2>
  <div id="calendarLoader"></div>
  <div id='miniCalendar' class="mini-calendar"></div>
</div>

CSS：

#calendarLoader,  .calendarLoader{
      content: 'loading';
      background: url(loading.gif) no-repeat center 50%;
      min-height: 115px;
    }

JS：

  $(document).ready(function () {
    $('#calendarLoader').hide();
    $("#miniCalendar").fullCalendar({
      header: {
        left: "prev",
        center: "title",
        right: "next"
      },
      buttonText: {
        prev: "Previous",
        next: "Next", 
      },
        loading: function( isLoading, view ) {
            if(isLoading) {// isLoading gives boolean value
              //show your loader here
              $('.fc-scroller').addClass('calendarLoader');
            } else {
                $('.fc-scroller').removeClass('calendarLoader');
              }
        },
    })
  });

雖然第一階段似乎正常（在初始化全日歷之前）。 我找不到正確的方式來顯示第二階段的加載圖像（在獲取事件時）。 我找不到要選擇的css選擇器以顯示加載圖像。 '.fc-scroller'或'.fc-view'不適用於我。

僅供參考：更好的選擇器將是我不必使用'removeClass'或'hide()'隱藏加載器的選擇器

找不到相關文檔。

有人知道我應該瞄准哪個css fullcalnedar選擇器並將加載圖像放入其中嗎？

非常感謝

Answer 1

 <div id="calendar"> <i class="fa fa-spinner fa-spin" style="font-size:24px"></i> Loading </div> 

$('#calendar').fullCalendar({
loading: function (bool) {
    alert('events are being rendered'); // Add your script to show loading
},
eventAfterAllRender: function (view) {
    alert('all events are rendered'); // remove your loading 
}

}）;