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

Question

我的完整日历将加载，几秒钟后数据将显示。我正在使用 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>

Answer 1

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

意思是而不是传递你的数据

events: '/MEO/GetCalendarEvents/',

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