jquery fullcalendar - странная проблема с данными о событиях

Question

по какой-то причине мои данные о событиях работают некорректно с jquery fullcalendar, когда я загружаю его через ajax. Тем не менее, запрос ajax определенно возвращает правильно отформатированные данные JSON - если я просто копирую и вставляю возвращаемые данные и жестко кодирую их в источник события при инициализации календаря, все работает правильно! Вот мой код - любая идея, что может быть проблемой?

$(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

На странице, которую вы связали с обсуждением комментария, вы не используете код, указанный в вашем сообщении. На вашей фактической странице вы устанавливаете переменную с именем data на возвращаемое значение вашего звонка на $.getJSON, а затем передаете data в fullCalendar в качестве источника события.

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

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

Проблема в том, что $.getJSON возвращает объект jQXHR и fullCalendar не может принять такой объект в качестве источника данных.

В Firebug, если я опустошить ваш #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' 
     } 
    }); 
    } 
}); 

Или, если вы действительно хотите, чтобы запустить свой собственный вызов AJAX, то вам нужно передавать данные календарю в обратном вызове успеха $.getJSON. Вот один из вариантов:

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

Я вижу мало пользы для последнего.