FullCalendar events from asp.net ASHX page not displaying

Question

Hi

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

Let's look at what we know and eliminate possibilities:

• The ASHX page gets called and returnd the ... data:

  So the server-side portion is working just fine, and the code to call out to the server side is working.

• I paste the values returned directly into the events it displays correctly.

  So the code that handles the response works correctly.

Logically we see here that code that connects your server response to your calendar's input is not working. Unfortunately, I'm not up on the jQuery fullCalendar method, but perhaps you're missing a callback declaration?

Answer 2

I think it might have something to do with your date values.

Answer 3

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.