基于两个选择选项的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'); 
    });