如何在首次加载时将事件加载到FullCalendar的日历上?

时间:2018-06-26 07:42:14

标签: javascript html fullcalendar

如何仅在使用Outlook REST API提取事件数据后才能呈现日历。

$('#calendarBox').fullCalendar({
            height: 500,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            disableDragging: true,
            editable: false,
            timezone: 'local',
            eventLimit:true,
            views:{
                eventLimit:4
            },
            events: function(start, end, timezone, callback) {
                //This functon executes every time the calendar changes views.
                //the "start" and "end" variables contain the date values
                //for the first and last day visible in the calendar.
                //we need to convert these dates to a formate that the
                //REST query recognizes
             var startString = (start._d).getUTCFullYear() +"-"+
                              ("0" + ((start._d).getUTCMonth()+1)).slice(-2) +"-"+
                              ("0" +(start._d).getUTCDate()).slice(-2) + "T" +
                              ("0" +(start._d).getUTCHours()).slice(-2) + ":" +
                              ("0" +(start._d).getUTCMinutes()).slice(-2) + ":" +
                              ("0" +(start._d).getUTCSeconds()).slice(-2)+ "Z";

             var endString = (end._d).getUTCFullYear() +"-"+
                              ("0" + ((end._d).getUTCMonth()+1)).slice(-2) +"-"+
                              ("0" +(end._d).getUTCDate()).slice(-2) + "T" +
                              ("0" +(end._d).getUTCHours()).slice(-2) + ":" +
                              ("0" +(end._d).getUTCMinutes()).slice(-2) + ":" +
                              ("0" +(end._d).getUTCSeconds()).slice(-2) +"Z";
                //execute the outlook REST query passing in the token in the header
                var call = $.ajax({
                    url: "https://outlook.office.com/api/v1.0/me/calendarview?startDateTime="+startString+"&endDateTime=" + endString + "&top=100", 
                    type: "GET",
                    dataType: "json",
                    headers: {
                        Accept: "application/json;odata.metadata=minimal;odata.streaming=true",
                        'Authorization': "Bearer " + accessToken
                    }
                });
                call.done(function (data,textStatus, jqXHR){
                    var events = [];
                    //loop through the returned events and push them
                    //into the events array that will be displayed in the calendar.
                    for (index in data.value)
                    {
                        events.push({
                                    title: data.value[index].Subject,
                                    start: data.value[index].Start
                                });
                    }
                    callback(events);
                });
                call.fail(function (jqXHR,textStatus,errorThrown){
                    alert("Error retrieving events: " + jqXHR.responseText);
                    console.log("error retrieveing events.")
                });                                
            }
        });

这是我初始化日历的方式,但是首先将其加载到网页上时,我将在没有事件的情况下呈现日历,如屏幕截图所示。1

我知道它能够从Outlook日历中检索事件,因为如果我单击地图上的按钮(例如转到上个月),日历将在其上显示事件。也许在第一次加载时,日历的渲染速度比从Outlook REST API接收事件数据的速度快?我该如何解决这个问题。

0 个答案:

没有答案