fullCalendar events not showing even though correct JSON feed

Question

As a bunch of others I have a problem getting my JSON feed events to render in the calendar. The problem is often wrong JSON formating, but this is not the case since I've validated it with JSONlint and hardcoded the JSON feed in Site.Master with positive result.

FireBug is getting the JSON response correctly but it is still not showing up in fullCalendar. I'm out of ideas.

The FireBug response: [{"id":1,"title":"TESTTITLE","info":"INFOINFOINFO","start":"2012-08-20T12:00:00","end":"2012-08-20T12:00:00","user":1}]

JSON.aspx

public partial class JSON : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    // Get events from db and add to list.
    DataClassesDataContext db = new DataClassesDataContext();
    List<calevent> eventList = db.calevents.ToList();

    // Select events and return datetime as sortable XML Schema style.
    var events = from ev in eventList
                 select new
                 {
                     id = ev.event_id,
                     title = ev.title,
                     info = ev.description,
                     start = ev.event_start.ToString("s"),
                     end = ev.event_end.ToString("s"),
                     user = ev.user_id
                 };

    // Serialize to JSON string.
    JavaScriptSerializer jss = new JavaScriptSerializer();
    String json = jss.Serialize(events);

    Response.Write(json);
    Response.End();
   }
}

Site.master

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />    
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' type='text/css' />
<script src='jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='fullcalendar/fullcalendar.js' type='text/javascript' ></script>
<script type="text/javascript">
     $(document).ready(function () {
         $('#fullcal').fullCalendar({

            eventClick: function() {
                alert('a day has been clicked!');
            },
          events: 'JSON.aspx' 
         })
     });
</script>

I've been scanning related questions for days but none of them seems to fix mine...

Answer 1

Try this , you have to have a webmethod in aspx file that fullcalendar can call asynchronously

       $(document).ready(function () {
        $('#fullcal').fullCalendar({
        eventClick: function() {
            alert('a day has been clicked!');
        }, 
            events: function (start, end, callback) {
            $.ajax({
                type: "POST",    //WebMethods will not allow GET
                url: "json.aspx/GetEvents",   //url of a webmethod - example below
                data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}",  //this is what I use to pass who's calendar it is 
                //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
                contentType: "application/json; charset=utf-8",  
                dataType: "json",
                success: function (doc) {
                    var events = [];   //javascript event object created here
                    var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
                    $(obj.event).each(function () { //yours is obj.calevent                          
                            events.push({
                            title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                            start: $(this).attr('start'), // will be parsed into DateTime object    
                            end: $(this).attr('end'),
                            id: $(this).attr('id')
                        });
                    });                     
                    callback(events);
                }
            });
        }
       })

then this would be in json.aspx

[WebMethod(EnableSession = true)]
public static string GetEvents(string userID)
{
    DataClassesDataContext db = new DataClassesDataContext();
List<calevent> eventList = db.calevents.ToList();

// Select events and return datetime as sortable XML Schema style.
var events = from ev in eventList
             select new
             {
                 id = ev.event_id,
                 title = ev.title,
                 info = ev.description,
                 start = ev.event_start.ToString("s"),
                 end = ev.event_end.ToString("s"),
                 user = ev.user_id
             };

// Serialize to JSON string.
JavaScriptSerializer jss = new JavaScriptSerializer();
String json = jss.Serialize(events);
return json;
}