基於兩個選擇選項的Fullcalendar顯示事件

Question

我正在使用Fullcalendar。我的事件源代碼抓取所有日曆事件。事件源是JSON：

[{ "id": "1", "provider_id": "18", "name":"chris cavage", "location_id":"1"}, 
{ "id": "2", "provider_id": "17", "name":"mark smith", "location_id":"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; 
     } 

這只是偉大工程一個選擇菜單，但我似乎無法理解如何使這兩種選擇，包括'所有'選項這樣的工作。

這裏是一個小提示，告訴你我到目前爲止如何獲得第二個菜單選項與第一個選項一起工作，因此過濾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'); 
    });