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...

possible duplicate of [Fullcalendar/Fetching JSON feed(Edited)](http://stackoverflow.com/questions/12339508/fullcalendar-fetching-json-feededited) — L.B, Sep 09 '12 at 15:40
Yes L.B it's an update. I Couldn't figure out how to delete it. — Mix, Sep 09 '12 at 15:43

Scott Selby · Accepted Answer · 2012-09-09T16:01:29.250

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;
}

ok, I edited a bunch of time after posting , and put a lot of comments in , if you tried this right after I posted, its different now , try this — Scott Selby, Sep 09 '12 at 16:04
Yeah I did try it directly after and it didn't work. I will try it again! Thanks I tried the new code leaving out the data field and changed the parameters for the GetEvents(), and now the fullcalendar disappear. — Mix, Sep 09 '12 at 16:12
if the fullcalendar disappeared then you have some invalid javascript in there that is causing none of it to function — Scott Selby, Sep 10 '12 at 02:59
Thank you Scott. I updated to the latest fullcalendar and it's now working! — Mix, Sep 10 '12 at 11:15

fullCalendar events not showing even though correct JSON feed

1 Answers1

Linked