jquery fullcalendar - 이벤트 데이터가 이상한 문제

Question

ajax를 통해로드 할 때 내 이벤트 데이터가 jquery fullcalendar와 제대로 작동하지 않습니다. 그러나 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 데이터 소스와 같은 개체를 취할 수 없습니다. 방화범

, 당신의 #calendar 요소를 비우고 다음을 실행하면, 나는 달력에 이벤트를 얻을 : 당신이 정말로 자신의 AJAX 호출을 실행하려면

$('#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' 
     } 
    }); 
    } 
}); 

은 또는, 당신은 필요 $.getJSON의 성공 콜백에서 데이터를 캘린더에 전달합니다. 다음과 같은 한 가지 변형이 있습니다.

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

그러나 나는 후자에게별로 도움이되지 않습니다.