Question

for some reason my event data isn’t working correctly with jquery fullcalendar when I load it via ajax. However, the ajax request is definitely returning correctly formatted JSON data – if i simply copy and paste the returned data and hard code it into the event source when initialising the calendar, all works correctly! Here is my code – any idea what the issue could be?

$(document).ready(function() {
    // This is the data returned by the AJAX request - works fine when hard coded
    var data = 
            [{"title":"Test Event","description":"<p>Tester<\/p>","start":"1329264000","end":"1329264000","className":"sport junior_school"}];        

        var cal = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            eventSources: [
                '<?php echo Url::base()?>school-calendar/fetch_events'
                //data
            ]
        });  
});

Answer 1

In the page you linked from the comment discussion, you are not using the code you showed in your post. In your actual page, you are setting a var named data to the return value of your call to $.getJSON, and then passing data into fullCalendar as an event source.

var data = $.getJSON('http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events');

$('#calendar').fullCalendar({
    //blah blah...
    eventSources: [
        data
    ],
    //blah blah...
});

The problem with that is that $.getJSON returns a jQXHR object, and fullCalendar cannot take such an object as a data source.

In Firebug, if I empty your #calendar element and run the following, I get an event on the calendar:

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  editable: true,
  eventSources: [
    'http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events'
  ],
  eventRender: function (event, element) {
    element.qtip({
      content: {
        text: formatEvent(event), 
        title: {
          text: event.title,
          button: true
        }
      },
      show: {
        event: 'click', // Show it on click...
        solo: true // ...and hide all other tooltips...
      },
      hide: false,
      style: {
        classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
      }
    });
  }
});

Or, if you really want to run your own AJAX call, then you need to pass data to the calendar in the success callback of the $.getJSON. Here is one variation of such a thing:

$.getJSON('http://staging.jem-digital.com/lathallan/public_html/school-calendar/fetch_events', function (data) {
    $('#calendar').fullCalendar({
        //blah blah...
        eventSources: [
            data
        ],
        //blah blah...
    });
});

I see little benefit to the latter, however.