jQueryフルカレンダーの更新/フィルターのカレンダー

Question

fullcalendar.jsを使用してクライアント側のフィルターを実装しようとしています。私が使用して最初にカレンダーをレンダリングすることができます

function getCalendar($venue) { 

    $('#calendar').fullCalendar({ 

     eventSources: [ 
      { 
       url: ajaxUrl, 
       type: "GET", 
       dataType: "json", 
       data: { 
        action: 'loop_events_output', 
        venue: $venue, 
       }, 

      beforeSend: function() { 
       $("#calendar").LoadingOverlay("show", { 
        color: "rgba(51,51,51,0.8)", 
       });  
      }, 
      complete: function() {     
       $("#calendar").LoadingOverlay("hide"); 
      }, 

      error: function() { 
       alert('there was an error while fetching events!'); 
      }, 
      } 
     ] 


    }); 
} 

// execute on load 
getCalendar('townsville'); 

は、今私は、チェックボックスの入力に基づいてカレンダーを更新できるようにしたい、ここに私のコードの2番目の部分です：

// execute when using filters 
$('.calendar-controls input').change(function(){ 
    if (this.checked) { 
     var checkedVal = $(this).val(); 

     $("#calendar").fullCalendar('removeEvents'); 
     getCalendar(checkedVal); 
     $('#calendar').fullCalendar('refetchEvents') 
    } 
}); 

しかし、私はすることができますリクエストURLが変更されていないXHRリクエストを参照してください。 /wp-admin/admin-ajax.php?action=loop_events_output &会場= townsville & start = 2016-07-31 & end = 2016-09- 11 & _ = 1472626202164

何かお手伝いしました。

Answer 1

これでわかりました。基本的にfullcalendarの仕組みは、ロード時にイベントオブジェクトを受け取り、そのオブジェクトがリセットされない限り、将来のレンダリングでそのオブジェクトを使用し続けるということです。

function getCalendar() { 

    $('#calendar').fullCalendar({ 

     events: source, 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: '' 
     }, 
     eventRender: function (event, element) { 
      element.attr('href', '#'); 
     }, 
     loading: function(isLoading, view) { 
      if(isLoading) {// isLoading gives boolean value 
       alert('loading'); 
      } else { 
       alert('done'); 
      } 
     } 


    }); 
} 

それから私はセットアップソース：

var source = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville'; 

それから私は、ユーザーの入力に応じて、ソースを更新：

// execute when using filters 
$('.calendar-controls input').change(function(){ 
    if (this.checked) { 
     var checkedVal = $(this).val(); 

     var newSource = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=' + checkedVal; 
     $('#calendar').fullCalendar('removeEventSource', source) 
     $('#calendar').fullCalendar('refetchEvents') 
     $('#calendar').fullCalendar('addEventSource', newSource) 
     $('#calendar').fullCalendar('refetchEvents'); 
     source = newSource; 
    } 
}); 

そこで、彼らは方法私はに私の完全なカレンダー機能を変更することだったんでした

最も重要なのは、イベントソースを削除してから、新しいイベントソースを追加することです。