Fullcalendar 4.0 事件中的多个过滤器使用

Question

$('#mycalendar').fullCalendar({
  defaultDate: '2015-05-01',
  events: [{
      title: 'Event 1',
      start: '2015-05-01',
      school: '10',
      college: '1'
    },
    {
      title: 'Event 2',
      start: '2015-05-02',
      school: '2',
      college: '1'
    },
    {
      title: 'Event 3',
      start: '2015-05-03',
      school: '1',
      college: '1'
    },
    {
      title: 'Event 4',
      start: '2015-05-04',
      school: '2',
      college: '2'
    }
  ],
  eventRender: function eventRender(event, element, view) {

    if ($('#currentAction').val() == 'school') {
      if ($('#school_selector').val() != 'all')
        return ['all', event.school].indexOf($('#school_selector').val()) >= 0
    }

    if ($('#currentAction').val() == 'college') {
      if ($('#college_selector').val() != 'all')
        return ['all', event.college].indexOf($('#college_selector').val()) >= 0
    }
  }
});

$('#school_selector').on('change', function() {
  $('#currentAction').val('school');
  $('#mycalendar').fullCalendar('rerenderEvents');
})
$('#college_selector').on('change', function() {
  $('#currentAction').val('college');
  $('#mycalendar').fullCalendar('rerenderEvents');
})

<head>

  <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' />
</head>

<body>
  <div id='calendar'></div>

  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>



  <select id="school_selector">
    <option value="all">All</option>
    <option value="1">School 1</option>
    <option value="2">School 2</option>
    <option value="10">School 10</option>
  </select>
  <select id="college_selector">
    <option value="all">All</option>
    <option value="1">college 1</option>
    <option value="2">college 2</option>
  </select>

  <div id="mycalendar"></div>
  <span id="currentAction" name="currentAction" />

我有多个过滤器要应用于全日历事件。过滤器一是 'Status'，过滤器二是 'NAME'。当我使用 eventrender 中的逻辑应用 'Status' 过滤器时，月视图仅显示选定的 'Status' 事件，当我尝试将第二个过滤器 'NAME' 与 eventrender 中的其他逻辑块一起应用时，它考虑月视图中的所有事件，而不考虑第一个 'Status' 过滤器结果。这样做的原因是因为我在 eventrender 中为第一个 'Status' 过滤器编写代码，如果任何事件的状态与我选择的 'Status' 不匹配，我只是返回 false，所以我没有应用任何从日历中隐藏或删除事件，这可能是 fullcalendar 认为所有事件都对后续过滤有效的原因。请提出建议。

Answer 1

我认为这就是您的目标。您可以通过选择 School 2，然后在 College 1 和 2（以及 All）之间切换并观察显示和隐藏哪些事件来对其进行最佳测试。

您的问题是“current_action”变量，它导致一次只有一个过滤器运行。 eventRender 中的其他 if 语句也是一个问题，因为它们也会阻止 indexOf 查询（包含“all”选项）返回有用的结果。

通过消除所有干扰来简化它后，您可以将两个 indexOf 查询的结果结合起来，并且只显示满足两个条件的事件（即它们满足两个下拉列表设置的条件）。

$('#mycalendar').fullCalendar({
  defaultDate: '2015-05-01',
  events: [{
      title: 'Event 1',
      start: '2015-05-01',
      school: '10',
      college: '1'
    },
    {
      title: 'Event 2',
      start: '2015-05-02',
      school: '2',
      college: '1'
    },
    {
      title: 'Event 3',
      start: '2015-05-03',
      school: '1',
      college: '1'
    },
    {
      title: 'Event 4',
      start: '2015-05-04',
      school: '2',
      college: '2'
    }
  ],
  eventRender: function eventRender(event, element, view) {
      var school = ['all', event.school].indexOf($('#school_selector').val()) >= 0;
      var college = ['all', event.college].indexOf($('#college_selector').val()) >= 0;
      return (school && college);
  }
});

$('#school_selector').on('change', function() {
  $('#mycalendar').fullCalendar('rerenderEvents');
})
$('#college_selector').on('change', function() {
  $('#mycalendar').fullCalendar('rerenderEvents');
})

<head>

  <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' />
</head>

<body>
  <div id='calendar'></div>

  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script>
  <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>



  <select id="school_selector">
    <option value="all">All</option>
    <option value="1">School 1</option>
    <option value="2">School 2</option>
    <option value="10">School 10</option>
  </select>
  <select id="college_selector">
    <option value="all">All</option>
    <option value="1">College 1</option>
    <option value="2">College 2</option>
  </select>

  <div id="mycalendar"></div>

Fullcalendar 4.0 事件中的多个过滤器使用

Multiple filters usage in Fullcalendar 4.0 events

html

javascript

jquery

fullcalendar

fullcalendar-3