Fullcalendarは2つの選択肢に基づいてイベントを表示します

Question

私はFullcalendarを使用しています。私のイベントソースコードは、すべてのカレンダーイベントを取得しています。イベントソースはJSONです。

カレンダーの上に2つの選択メニューがあり、プロバイダと場所に基づいてイベントが表示されます。

Providers: <select id="calendar_provider_id"> 
       <option value="all">All...</option> 
       <option value="17">Dr. Carl</option> 
       <option value="18">Dr. Paul</option> 
      </select> 

Location: <select id="calendar_location_id"> 
       <option value="all">All...</option> 
       <option value="1">A-town</option> 
       <option value="12">P-ville</option> 
      </select> 

選択オプションが変更されたら、表示されたイベントを再レンダリングする必要があります。私はそれがこのような単なる場所の選択メニューのために今働いている ：

$('#calendar_location_id').change(function() { 

      //rerender events for calendar: update the ones shown. 
      $('#calendar').fullCalendar('rerenderEvents'); 

     } 
}); 

そして、ここで$（ '＃カレンダー）.fullcalendar（{

events: 'json_appointments.php', 
eventRender: function eventRender(event, element, view) { 
      return ['all', event.location_id].indexOf($('#calendar_location_id option:selected').val()) >= 0; 
     } 

それはちょうどのための素晴らしい作品のために私は何をすべきかです1つの選択メニューがありますが、「すべて」のオプションを含む両方の選択肢でこの作業のようにする方法を理解できないようです。

これまで私が行ったことを示すためのフィドルです。 2番目のメニューオプションは、最初のメニューオプションと連携して動作するので、フィルrはそれに応じて動作する？

http://jsfiddle.net/michels287/7h2tn245/

Answer 1

デモ：fullCalendarコンフィグ内部http://jsfiddle.net/xz2mqLhd/

関連するコードの変更：

eventRender: function eventRender(event, element, view) { 
     // Check location AND provider id selection 
     return ['all', event.location_id].indexOf($('#calendar_location_id option:selected').val()) >= 0 && ['all', event.provider_id].indexOf($('#calendar_provider_id option:selected').val()) >= 0; 
    } 

も

// Trigger event rerendering on provider_id change too 
$('#calendar_location_id, #calendar_provider_id').change(function() { 
    $('#calendar').fullCalendar('rerenderEvents'); 
    });