如何仅在使用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接收事件数据的速度快?我该如何解决这个问题。