将加载指示符添加到fullcalendar

Question

我想补充装旋转这样来fullcalendar,当我改变它个月.我怎样才能做到这一点？

Answer 1

Fullcalendar V1:loading当事件提取开始/停止时,您应该使用Triggered 功能.

$('#calendar').fullCalendar({
        loading: function( isLoading, view ) {
            if(isLoading) {// isLoading gives boolean value
                //show your loader here 
            } else {
                //hide your loader here
            }
        }
});

Fullcalendar V2:加载调度程序插件时,在获取资源时也会触发此回调.

Answer 2

您可以使用可用的fullcalendar方法轻松完成此操作.

loading - 启动事件提取时触发

eventAfterAllRender - 在所有事件完成渲染后触发.

 $('#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 
    }
  });

Answer 3

FullCalendar 版本 v4 和 v5 有一个“加载”回调，这里是一个基本示例：

以下是文档的链接：FullCalendar（正在加载..）

样式示例：

     #loading {
        width: 100%;
        height: 100%;
        top: 120px;
        left: 470px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 100px;
        left: 240px;
        z-index: 100;
    } 

HTML 在日历输出处添加 DIV，该 DIV 将覆盖并链接到您选择的进度 gif 图像：

<div id="calendar"></div> <div id="loading" style="display:none;">
<img id="loading-image" src="/img/loading.gif" alt="Loading..." /></div>

默认情况下样式显示：无加载div将被隐藏。通过回调来触发该进度条的显示/隐藏。因此，加载开始事件（true）将显示 div 层，当它返回（false）表示不再加载时，它将隐藏 div 层。

 var calendar = new FullCalendar.Calendar(calendarEl, {
  loading: function (isLoading) {
                    if (isLoading) {
                        $('#loading').show();
                    }
                    else {                
                        $('#loading').hide();
                    }
                }
  //add rest of your calendar events/options        
 });