FullCalendar: events not rendering initially from function call (AJAX)

ajax, fullcalendar, javascript, jquery, node.js

Solution

Instead of using your own ajax call, have you tried using fullcalendars?

http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Fullcalendar defaults the dataType as JSON and caching to false.

Combined some of your code with code from doc:

$('#calendar').fullCalendar({

    events: {
        url: 'http://localhost:8080/getEvents',
        type: 'GET',
        error: function() {
            alert('there was an error while fetching events!');
        },
        success: function(reply) {
            console.log(reply.first);
            callback(reply.first);
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    }

});

You can try just getting your JSON string cutting and pasting in and see if you can render without ajax call

     events: [
     {
            end: 1392129000,
            id: "phil@google.com",
            room: "Sh1",
            start: 1392127200,
            title: "Phil - Google"
      }]

You can also process the response:

$('#myCalendar').fullCalendar({
...
   eventSources : [{
      url: 'myUrl',
      type: 'GET',
   },
   success: function(replyObject) {
      var results = [];
      var reply= replyObject.Results[0];
      for(var index in reply) {
         results.push(reply[index]);
      }
      return results;
    }
    }]
...

Problem

I've configured my FullCalendar to pull its events from an AJAX request, but they don't render on the calendar when the page is first loaded. ``` $(document).ready(function() { sh1client = new Array(); sh2client = new Array(); $('#sh1_cal').fullCalendar({ height: 1000, minTime:'9:00am', maxTime:'5:00pm', editable: false, events: function(start, end, callback) { $.ajax({ type: 'GET', url: 'http://localhost:8080/getEvents', dataType: 'json', success: function(reply) { console.log(reply.first); callback(reply.first); } }); } }); $("#sh1_cal").fullCalendar('addEventSource', sh1client); // these are the clientside arrays }); ``` And on the server, ``` app.get('/getEvents', function(req, res){ console.log('Server: passing events...'); var arrays = {first: sh1, second: sh2} var pack = JSON.stringify(arrays) res.writeHead(200, {'Access-Control-Allow-Origin' : '*', 'Content-Type': 'application/json'}); res.end(pack); }); ``` Is there any reason these events wouldn't initially load? Everything seems to be being passed through alright, but it's like the callback isn't working or something. EDIT: Here is another approach I tried ``` events: { url: 'http://localhost:8080/getEvents', type: 'GET', error: function() { alert('there was an error while fetching events!'); }, success: function(reply) { console.log(reply); //callback(reply.first); }, color: 'yellow', // a non-ajax option textColor: 'black' // a non-ajax option } ``` EDIT: JavaScript console shows this as being POSTed to the page as soon as it loads (this is the first object in an array: ``` [Object] allDay: "false" end: "1392129000" id: "phil@google.com" room: "Sh1" start: "1392127200" title: "Phil - Google" __proto__: Object length: 1 __proto__: Array[0] ```

Original source