Tamcalendar etkinlik seçeneklerini, iki seçme seçeneğine dayalı olarak gösterir

Question

. Fullcalendar kullanıyorum. Etkinlik kaynak kodum tüm takvim etkinliklerini tutuyor. olay kaynağı JSON geçerli:

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

Ben sağlayıcı ve yere göre etkinlikleri göstermek için takvime yukarıdaki iki seçme menüleri var. seçenekleri seçin değiştirdiğinizde

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> 

, ben gösterilen etkinlikleri yeniden işlemek istiyorum: Bu takvim etkinliklerinin tümünü filtreleme bir yoldur. bunun böyle sadece yeri seçme menüsü için şimdi çalışıyor olması: Burada

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

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

     } 
}); 

Ve ('# takvimi) .fullcalendar ({

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

Bu sadece büyük inşaat için $ için bunu yapar tek seçimli menü, ama 'her' seçenekleri de dahil olmak üzere her iki seçim seçeneği için bu çalışma gibi bir şey nasıl yapılacağını anlamak için görünmüyor olabilir ..

Şimdiye kadar sahip olduğumuzu göstermek için bir keman var. Birinci menü seçeneği ile birlikte çalışacak şekilde ikinci menü seçeneği r buna göre çalışıyor mu?

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

Answer 1

Demo: fullCalendar yapılandırmasına iç http://jsfiddle.net/xz2mqLhd/

İlgili kod değişiklikleri:

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

Ve ayrıca

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