在加载数据之前加载完整日历

时间:2014-10-17 19:15:13

标签: javascript jquery fullcalendar

我的完整日历将在几秒钟后加载数据。我正在用JSON加载我的数据。 我已尝试在loading中添加加载图标但显示加载图标,然后显示日历,然后显示数据,这是同样的问题

是否可以同时加载日历和数据?

这是我的代码。

$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },

        defaultView: 'basicDay',
        allDaySlot: true,
        selectable: true,
        weekends: false,
        theme: true,
        eventLimit: true,
        eventLimitClick: 'week',
        eventTextColor: '#000000', //black
        events: '/MEO/GetCalendarEvents/',
        eventClick: function (calEvent, jsEvent, view) {
            alert(calEvent.title)
        },
        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            }
            else {
                $('#loading').hide();
            }
        }     
    });
});

CSS

<div id='calendar' style="width:100%"></div>
<div id="loading">Loading...</div>

1 个答案:

答案 0 :(得分:1)

您似乎希望日历显示已加载的数据(没有空日历,然后数据会在几秒后出现)。我的建议;首先获取数据并将日历初始化代码移动到正在加载数据的函数的回调中。

而不是在

中传递数据
events: '/MEO/GetCalendarEvents/',

通过jquery ajax调用获取数据,并在加载数据后初始化日历。您的日历将加载其中的所有事件。