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> 

私の解決策でした