FullCalendar - jquery 및 AJAX를 통해 이벤트 업데이트

Question

jquery fullcalendar는 지금까지 아주 잘 작동했지만 사용자가 표시 할 이벤트를 필터링 할 수있는 몇 가지 옵션을 추가했습니다. 내가 사용한 접근법은 AJAX를 사용하여 달력에서 사용할 새 데이터를 검색하고 기존 달력을 비운 다음 새 데이터로 달력을 다시 작성하는 것입니다.

페이지로드시 캘린더가 이벤트를 올바르게로드합니다. 필터를 클릭하면 캘린더의 현재 이벤트가 비워 지지만 새로운 이벤트는로드되지 않습니다. AJAX 호출에서 반환 된 JSON에 올바른 형식의 이벤트 데이터가 있음을 알 수 있습니다.

여기에 분명한 실수가 있거나 내장 된 방법으로이 작업을 수행하는 더 쉬운 방법이있을 수 있습니다. 도움이 많이 감사!

    // Store json encoded data in variable 
        var data = <?php echo $events_json ?>; 

        // Pass data to the calendar loader 
        loadCal(data); 

        // Filter event handler 
        $('ul#calendar_filters li a').click(function(){ 
         // Retrieve data - have checked this is correctly formatted 
         new_data = $.get($(this).attr('href')); 

         // Empty the calendar of existing data 
         $('#calendar').empty(); 

         // Reload calendar with new data set 
         loadCal(new_data); 


         return false; 
        }); 

        function loadCal(data) 
        { 
         $('#calendar').fullCalendar({ 
          header: { 
           left: 'prev,next today', 
           center: 'title', 
           right: 'month,agendaWeek,agendaDay' 
          }, 
          editable: true, 
          events: data, 
          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' 
            } 
           }); 
          } 
         }); 
        } 

Answer 1

나는 이미 그것에 대해 생각해 보지 않았지만 내용을 표시하기 위해 확인란을 사용 해본 적이 있습니까?

문서에는 유용한 방법이 내장되어 있습니다. http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/

이 내 솔루션 ...

<input type="checkbox" class="selectit" /> 
<script> 
$('.selectit').each(function(){this.checked = true}); //ensures that all boxes are checked 

$('input[type:checkbox]').click(function(index){ // Looks at every checkbox when clicked 
    $('input:checked').each(function(){ // if checked add the source 
     $('#calendar').fullCalendar('addEventSources', 'URL_ARRAY_FUNCTION_OR_OBJECT'); 
    }); 
    $('input:not(:checked)').each(function(index){ // if not checked remove the source 
     $('#calendar').fullCalendar('removeEventSources', 'URL_ARRAY_FUNCTION_OR_OBJECT'); 
    }); 
}); 
</script> 

했다