Использование нескольких фильтров в событиях Fullcalendar 4.0 - PullRequest
Новая
       94

Использование нескольких фильтров в событиях Fullcalendar 4.0

1 голос
/ 14 июля 2020 

$('#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" />

У меня есть несколько фильтров, которые нужно применить к событиям fullcalendar. Первый фильтр - «Статус», второй - «ИМЯ». Когда я применяю фильтр «Статус» с использованием logi c в eventrender, в представлении месяца отображаются только выбранные события «Статус», когда я пытаюсь применить второй фильтр «NAME» с другим блоком logi c в eventrender, он рассматривает все события в обзоре месяца независимо от первого результата фильтра «Статус». Причина этого в том, что я написал код в eventrender для первого фильтра «Статус», поскольку, если статус какого-либо события не совпадает с моим выбранным «Статусом», я просто вернул false, поэтому я не применял никакого скрытия или удаления событие из календаря, возможно, по этой причине fullcalendar считает, что все события допустимы для последующей фильтрации. Пожалуйста, предложите.

1 Ответ

0 голосов
/ 15 июля 2020

Я думаю, это то, к чему вы стремитесь. Лучше всего это можно проверить, выбрав школу 2, а затем переключаясь между колледжем 1 и 2 (и всеми) и наблюдая, какие события отображаются и скрываются.

Ваша проблема заключалась в переменной "current_action", которая вызывала только один фильтр для работы за раз. Другие операторы if внутри eventRender также были проблемой, потому что они также не позволяли запросу indexOf (который содержит параметр «все») возвращать полезный результат.

После того, как вы упростили его, удалив весь этот шум, вы можете просто объединить результаты обоих запросов 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>
...