Question

我FullCalendar（版本1.5.1）在.net网络表单应用程序中完美运行。我正在尝试在我的新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]
    });

以下是Chrome中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

我终于明白了。警报（数据）非常有帮助。

从db获取数据时，我需要将其格式化为数组。

这篇文章对于它的运作至关重要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

$ .ajax（）帖子返回的数据可能只是javascript对象的字符串表示形式，而不是javascript对象，

尝试添加'json'的dataType选项以从ajax请求返回javascript对象，

$.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
        });
    }
});

FullCalendar不会显示db事件

3 个答案: