FullCalendar won't display db events

Question

I have FullCalendar (version 1.5.1) working perfectly in a .net webform application. I am trying to deploy version 1.5.3 in my new asp.net-mvc application. For some reason, I cannot get the events to show when provided dynamically.

I have to have full control (color, border, attributes, etc) over each event and I am passing a JSON string with all the relevant details. If I manually enter the JSON results into events: it displays as expected. But when I try to dynamically set it, I get nothing.

For simple testing, I hard coded the start and end periods in the call for the data as described below:

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

Below is the copied value for data from Chrome:

{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:""}

If I take that same information and change the original call to the following:

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

Everything displays as expected.

Why does it work when manually set, but not dynamically set? What am I missing?

Answer 1

I finally figured it out. alert(data) was very helpful.

When getting data from a db I need to format it into an array.

This article was crucial to making it work John's McBlog.

Instead of serializing the DataTable to a JSON string, I put it into a List<> and converted .ToArray() like this:

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 is just a custom class to define an event.

I modified the js like this:

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

All works as expected now.

Answer 2

The data returned from the $.ajax() post is possibly just a string representation of the javascript object, not a javascript object,

Try adding a dataType option of 'json' to return a javascript object from the ajax request,

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

Answer 3

I guess your data variable is already an array. So try:

events: data

instead of events: [data].