我已将 FullCalendar 配置为从 AJAX 请求中提取其事件,但在首次加载页面时它们不会呈现在日历上。
$(document).ready(function() {
sh1client = new Array();
sh2client = new Array();
$('#sh1_cal').fullCalendar({
height: 1000,
minTime:'9:00am',
maxTime:'5:00pm',
editable: false,
events: function(start, end, callback) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/getEvents',
dataType: 'json',
success: function(reply) {
console.log(reply.first);
callback(reply.first);
}
});
}
});
$("#sh1_cal").fullCalendar('addEventSource', sh1client); // these are the clientside arrays
});
而在服务器上,
app.get('/getEvents', function(req, res){
console.log('Server: passing events...');
var arrays = {first: sh1, second: sh2}
var pack = JSON.stringify(arrays)
res.writeHead(200, {'Access-Control-Allow-Origin' : '*', 'Content-Type': 'application/json'});
res.end(pack);
});
是否有任何原因这些事件最初不会加载?一切似乎都在通过,但就像回调不起作用或什么的。
编辑:这是我尝试过的另一种方法
events: {
url: 'http://localhost:8080/getEvents',
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
},
success: function(reply) {
console.log(reply);
//callback(reply.first);
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
编辑:JavaScript 控制台显示它在加载后立即发布到页面(这是数组中的第一个对象:
[Object]
allDay: "false"
end: "1392129000"
id: "[email protected]"
room: "Sh1"
start: "1392127200"
title: "Phil - Google"
__proto__: Object
length: 1
__proto__: Array[0]
最佳答案
您是否尝试过使用 fullcalendars,而不是使用您自己的 ajax 调用?
http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
Fullcalendar 默认数据类型为 JSON,缓存为 false。
将您的一些代码与 doc 中的代码结合起来:
$('#calendar').fullCalendar({
events: {
url: 'http://localhost:8080/getEvents',
type: 'GET',
error: function() {
alert('there was an error while fetching events!');
},
success: function(reply) {
console.log(reply.first);
callback(reply.first);
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
});
您可以尝试将 JSON 字符串剪切和粘贴进来,看看是否可以在没有 ajax 调用的情况下进行渲染
events: [
{
end: 1392129000,
id: "[email protected]",
room: "Sh1",
start: 1392127200,
title: "Phil - Google"
}]
您还可以处理响应:
$('#myCalendar').fullCalendar({
...
eventSources : [{
url: 'myUrl',
type: 'GET',
},
success: function(replyObject) {
var results = [];
var reply= replyObject.Results[0];
for(var index in reply) {
results.push(reply[index]);
}
return results;
}
}]
...
关于javascript - FullCalendar:事件最初未从函数调用(AJAX)呈现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21707281/