javascript - Fullcalendar:我应该定位哪个 css 选择器以在日历不可用时显示 'loading' 图像？

Question

所以我一直在尝试在 fullcander 不显示事件时放置加载图像。

在我看来，当全日历不可用时有 2 个阶段:

1. 在初始化全日历之前
2. 获取事件时

看了fullcalendar documentation之后.我设法实现了下面的代码。

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

虽然第一阶段似乎工作正常(在初始化 fullcalendar 之前)。我找不到合适的方法来显示第二阶段的加载图像(同时获取事件)。我找不到要定位的 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 
}

});