FullCalendar events from asp.net ASHX page not displaying

Question

I have been trying to add some events to the fullCalendar using a call to a ASHX page using the following code.

Page script:

<script type="text/javascript">
    $(document).ready(function() {
        $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today', center: 'title', right: 'month, agendaWeek,agendaDay'
           },
           events: 'FullCalendarEvents.ashx'

        })                  
     });
 </script>

c# code:

public class EventsData
{
    public int id { get; set; }
    public string title { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public string url { get; set; }
    public int accountId { get; set; }
}

public class FullCalendarEvents : IHttpHandler
{

    private static List<EventsData> testEventsData = new List<EventsData>
    {
        new EventsData {accountId = 0, title = "test 1", start = DateTime.Now.ToString("yyyy-MM-dd"), id=0},
        new EventsData{ accountId = 1, title="test 2", start = DateTime.Now.AddHours(2).ToString("yyyy-MM-dd"), id=2}
    };

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json.";
        context.Response.Write(GetEventData());
    }

    private string GetEventData()
    {
        List<EventsData> ed = testEventsData;
        StringBuilder sb = new StringBuilder();

        sb.Append("[");

        foreach (var data in ed)
        {
            sb.Append("{");
            sb.Append(string.Format("id: {0},", data.id));
            sb.Append(string.Format("title:'{0}',", data.title));
            sb.Append(string.Format("start: '{0}',", data.start));
            sb.Append("allDay: false");
            sb.Append("},");
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append("]");
        return sb.ToString();
    }


}

The ASHX page gets called and returnd the following data:

[{id: 0,title:'test 1',start: '2010-06-07',allDay: false},{id: 2,title:'test 2',start: '2010-06-07',allDay: false}]

The call to the ASHX page does not display any results, but if I paste the values returned directly into the events it displays correctly. I am I have been trying to get this code to work for a day now and I can't see why the events are not getting set.

Any help or advise on how I can get this to work would be appreciated.

Steve

Answer 1

In case anyone stumbles across this problem. I tried all of the above solutions, but none of them worked. For me, the problem was solved by using an older version of jquery. I switched from version 1.5.2 which was included in the fullcalendar package to version 1.3.2

Answer 2

Steve, I ran into something similar -- it would render the events if the JSON was directly in the fullCalendar call, but it would not render the identicla JSON coming from an outside URL. I finally got it to work by modifying the JSON so that "id", "title", "start", "end", and "allDay" had the quotes around them.

So instead of this (to use your sample JSON): [{id: 0,title:'test 1',start: '2010-06-07',allDay: false},{id: 2,title:'test 2',start: '2010-06-07',allDay: false}]

...I had this: [{"id": 0,"title":"test 1","start": "2010-06-07","allDay": false},{"id": 2,"title":"test 2","start": "2010-06-07","allDay": false}]

Now, why it worked locally but not remotely, I can't say.