将加载指示符添加到fullcalendar

时间:2015-05-15 11:01:21

标签: jquery fullcalendar

我正在尝试将加载旋转like this添加到fullcalendar,当我在其中更改数月时。我怎么能这样做?

3 个答案:

答案 0 :(得分:17)

Fullcalendar V1:当事件提取开始/停止时,您应该使用Exception in thread "main" java.util.concurrent.ExecutionException: java.net.SocketException: Connection reset at microsoft.aspnet.signalr.client.SignalRFuture.get(SignalRFuture.java:112) at microsoft.aspnet.signalr.client.SignalRFuture.get(SignalRFuture.java:102) at javaapplication2.JavaApplication2.main(JavaApplication2.java:27) Caused by: java.net.SocketException: Connection reset at java.net.SocketInputStream.read(SocketInputStream.java:209) at java.net.SocketInputStream.read(SocketInputStream.java:141) at java.io.BufferedInputStream.fill(BufferedInputStream.java:246) at java.io.BufferedInputStream.read1(BufferedInputStream.java:286) at java.io.BufferedInputStream.read(BufferedInputStream.java:345) at sun.net.www.http.HttpClient.parseHTTPHeader(HttpClient.java:704) at sun.net.www.http.HttpClient.parseHTTP(HttpClient.java:647) at sun.net.www.http.HttpClient.parseHTTP(HttpClient.java:675) at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1535) at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1440) at java.net.HttpURLConnection.getResponseCode(HttpURLConnection.java:480) at microsoft.aspnet.signalr.client.http.java.NetworkRunnable.run(NetworkRunnable.java:72) at java.lang.Thread.run(Thread.java:745) 函数触发。

loading

Fullcalendar V2:加载scheduler插件时,在获取资源时也会触发此回调。

答案 1 :(得分:5)

您可以使用可用的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 
    }
  });

答案 2 :(得分:2)

FullCalendar版本v4和v5具有“正在加载”回调,这是一个基本示例:

以下是文档的链接:FullCalendar (Loading..)

样式示例:

     #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在日历输出中,添加将覆盖并链接到您选择的进度gif图像的DIV:

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