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');

        }
 });

这就是我为$（'#calendar）.fullcalendar（{

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

它仅适用于一个选择菜单，但我似乎无法理解如何为包括“所有”选项在内的两个选择选项进行类似的工作。

这是一个小提示，向您展示我到目前为止所拥有的东西。如何让第二个菜单选项与第一个菜单选项一起使用，以便过滤器相应地工作？

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

Answer 1

演示：http://jsfiddle.net/xz2mqLhd/

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

还

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

Fullcalendar根据两个选择选项显示事件

1 个答案: