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

Question

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]

Answer 1

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