Vollkalender zeigen Ereignisse basierend auf zwei Auswahloptionen

Question

Ich verwende Fullcalendar. Mein Ereignisquellcode erfasst alle Kalenderereignisse. Die Ereignisquelle ist JSON:

[{ "id": "1", "provider_id": "18", "name":"chris cavage", "location_id":"1"}, 
{ "id": "2", "provider_id": "17", "name":"mark smith", "location_id":"2"}, ... 

Ich habe zwei Auswahlmenüs über dem Kalender die Ereignisse auf dem Anbieter und Location Based zu zeigen. Es ist ein Weg aller Kalenderereignisse Filterung:

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> 

Wenn die Auswahloptionen zu ändern, möchte ich die gezeigten Ereignisse neu machen. Ich habe es funktioniert jetzt nur den Standort wählen Sie das Menü wie folgt aus:

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

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

     } 
}); 

Und hier ist, was ich für $ tun ('# Kalender) .fullcalendar ({

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

Es funktioniert gut für nur Das One Select Menü, aber ich kann nicht scheinen zu verstehen, wie so etwas funktioniert für beide Optionen einschließlich der "Alle" -Optionen.

Hier ist eine Geige, um Ihnen zu zeigen, was ich bisher habe. Wie bekomme ich die zweite Menüoption, um in Verbindung mit dem ersten so den Filter zu arbeiten r funktioniert entsprechend?

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

Answer 1

Demo: http://jsfiddle.net/xz2mqLhd/

Relevante Codeänderungen innerhalb fullCalendar config:

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; 
    } 

Und auch

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