FullCalendar：函數調用時最初沒有渲染的事件（AJAX）

Question

我已經配置了我的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: "phil@google.com" 
room: "Sh1" 
start: "1392127200" 
title: "Phil - Google" 
__proto__: Object 
length: 1 
__proto__: Array[0] 

Answer 1

而不是使用自己的Ajax調用的，你有沒有嘗試過使用fullcalendars？

http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Fullcalendar將dataType默認爲JSON並將其緩存爲false。

結合一些你的代碼與代碼D​​OC：

$('#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: "phil@google.com", 
      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; 
    } 
    }] 
...