FullCalendar將不會顯示db事件

Question

我有FullCalendar（版本1.5.1）在.net webform應用程序中完美工作。我試圖在我的新asp.net-mvc應用程序中部署1.5.3版本。出於某種原因，我無法動態提供事件顯示。

我必須對每個事件擁有完全控制權（顏色，邊框，屬性等），並且我傳遞了一個包含所有相關詳細信息的字符串JSON。如果我手動輸入JSON結果到events:，它會按預期顯示。但是，當我嘗試動態設置它時，我什麼也得不到。

對於簡單的測試，我硬編碼在呼叫的數據的開始和結束期間，如下所述：

$.ajax({ 
    url: rootUrl + "../Schedule/GetCal?&start=1341129400&end=1344146400", 
    type: 'POST' 
}).success(function(data){ 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,basicWeek,basicDay' 
     }, 
     titleFormat: { day: '' }, 
     defaultView: _thisView, 
     events: [data] 
    }); 

下面是data從鉻複製的值：

{id:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",projectId:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",title:"Orem City Parking Lot",start:"2012-07-11",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""}, 
{id:"33910A42-C5F0-42FA-AB36-C315BDDAF964",projectId:"33910A42-C5F0-42FA-AB36-C315BDDAF964",title:"Thanksgiving Point - Buster",start:"2012-07-28",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""} 

如果我採用相同的信息並將原始呼叫更改爲以下內容：

$.ajax({ 
    url: rootUrl + "../Schedule/GetCal?&start=1341129400&end=1344146400", 
    type: 'POST' 
}).success(function(data){ 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,basicWeek,basicDay' 
     }, 
     titleFormat: { day: '' }, 
     defaultView: _thisView, 
     events: [ 
      {id:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",projectId:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",title:"Orem City Parking Lot",start:"2012-07-11",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""}, 
      {id:"33910A42-C5F0-42FA-AB36-C315BDDAF964",projectId:"33910A42-C5F0-42FA-AB36-C315BDDAF964",title:"Thanksgiving Point - Buster",start:"2012-07-28",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""} 
     ] 
    }); 

一切都按預期顯示。

爲什麼手動設置時會工作，但不能動態設置？我錯過了什麼？

Answer 1

我終於搞明白了。警報（數據）非常有幫助。

從數據庫獲取數據時，我需要將其格式化爲一個數組。

這篇文章是使它工作的關鍵John's McBlog。

而是序列化DataTable到JSON串的，我把它變成一個List<>，並轉換.ToArray()這樣的：

DataTable projSchDt = BLL.Project.getProjectsSchedule(ccUser.CompanyId, start, end, ccUser.Id, true); 
var events = new List<BLL.Event>(); 

foreach (DataRow row in projSchDt.Rows) 
{ 
    events.Add(new BLL.Event(){ 
     id = row["id"].ToString(), 
     projectId = row["projectId"].ToString(), 
     title = row["title"].ToString(), 
     start = row["start"].ToString(), 
     end = row["end"].ToString(), 
     allDay = Convert.ToBoolean(row["allDay"]), 
     type = row["type"].ToString(), 
     textColor = row["textColor"].ToString(), 
     backgroundColor = row["backgroundColor"].ToString(), 
     borderColor = row["borderColor"].ToString(), 
     crew = row["crew"].ToString() 
    }); 
} 
var rows = events.ToArray(); 
return Json(rows, JsonRequestBehavior.AllowGet); 

Bll.Event僅僅是一個自定義類來定義一個事件。

我修改這樣的JS：

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,basicWeek,basicDay' 
    }, 
    titleFormat: { day: '' }, 
    defaultView: _thisView, 
    events: rootUrl + "../Schedule/GetCal" 
}); 

爲目前預計所有工程。

Answer 2

我想你的data變量已經是一個數組了。因此請嘗試：

events: data 

而不是events: [data]。

Answer 3

數據從$。阿賈克斯（）返回後可能是剛纔的JavaScript對象，而不是一個JavaScript對象的字符串表示，

嘗試增加「JSON」的數據類型選項，從返回一個JavaScript對象ajax請求，

$.ajax({ 
    url: rootUrl + "../Schedule/GetCal?&start=1341129400&end=1344146400", 
    type: 'POST', 
    dataType: 'json', 
    success: function(data){ 
     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 
      titleFormat: { 
       day: '' 
      }, 
      defaultView: _thisView, 
      events: data 
     }); 
    } 
});