Фильтр Fullcalendar по классуName

Question

Я настроил несколько фильтров выбора для моего проекта Fullcalendar. Я могу фильтровать по нескольким значениям событий в моем JSON, но я не могу его фильтровать по className.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Вот код, который я использую, и here is a jsfiddle, который повторяет проблему.

<select id="type_selector"> 
    <option value="all">All types</option> 
    <option value="university">University</option> 
    <option value="polytech">Polytech</option> 
    <option value="highschool">High School</option> 
</select> 
<select id="state_selector"> 
    <option value="all">All types</option> 
    <option value="CA">California</option> 
    <option value="MI">Michigan</option> 
    <option value="VT">Vermont</option> 
</select> 
<select id="color_selector"> 
    <option value="all">All colors</option> 
    <option value="red">Red schools</option> 
    <option value="orange">Orange schools</option> 
    <option value="green">Green schools</option> 
</select> 
<div> 
    <div id='calendar'></div> 
</div> 

<script> 
    $(document).ready(function() { 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     var calendar = $('#calendar').fullCalendar({ 
      defaultView: 'agendaWeek', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      selectable: true, 
      selectHelper: true, 

      year: 2016, 
      month: 08, 
      date: 25, 

      slotMinutes: 15, 
      editable: true, 

      events: [{ 
       title: 'Michigan University', 
       start: '2016-09-26', 
       type: 'university', 
       state: 'MI', 
       className: 'red' 
      }, { 
       title: 'California Polytechnic', 
       start: '2016-09-27', 
       type: 'polytech', 
       state: 'CA', 
       className: 'orange' 
      }, { 
       title: 'Vermont University', 
       start: '2016-09-28', 
       type: 'university', 
       state: 'VT', 
       className: 'red' 
      }, { 
       title: 'Michigan High School', 
       start: '2016-09-29', 
       type: 'highschool', 
       state: 'MI', 
       className: 'green' 
      }, { 
       title: 'Vermont High School', 
       start: '2016-09-30', 
       type: 'highschool', 
       state: 'VT', 
       className: 'green' 
      }, { 
       title: 'California High School', 
       start: '2016-09-30', 
       type: 'highschool', 
       state: 'CA', 
       className: 'green' 
      }], 
      eventRender: function eventRender(event, element, view) { 
       return ['all', event.type].indexOf($('#type_selector').val()) >= 0 
       && ['all', event.state].indexOf($('#state_selector').val()) >= 0 
       && ['all', event.className].indexOf($('#color_selector').val()) >= 0 
      } 

     }); 
     $('#type_selector').on('change', function() { 
      $('#calendar').fullCalendar('rerenderEvents'); 
     }) 
     $('#state_selector').on('change', function() { 
      $('#calendar').fullCalendar('rerenderEvents'); 
     }) 
     $('#color_selector').on('change', function() { 
      $('#calendar').fullCalendar('rerenderEvents'); 
     }) 
    }); 

</script> 

Answer 1

Ваша проблема - это имя "className". className is a DOM property поэтому, когда вы пытаетесь получить доступ к event.className, вы фактически не получаете доступ к свойству события (красный, оранжевый и т. Д.), Но свойство DOM, которое возвращает что-то вроде ['red'].

Если вы измените имя класса на любое другое (незарезервированное, не-свойство), которое должно быть исправлено (отметьте updated jsfiddle).

Конечно, это означает, что цвет фона каждого события теперь возвращается к голубым по умолчанию. Вы можете это исправить, установив свойства backgroundColor и borderColor (проверьте Event Object documentation), как таковой:

events: [{ 
    title: 'Michigan University', 
    start: '2016-09-26', 
    type: 'university', 
    state: 'MI', 
    cName: 'red', 
    backgroundColor: 'red', 
    borderColor: 'red' 
}] 

Вы можете упростить все это и просто заменить className для backgroundColor, так как это свойство возвращает строку с именем цвет фона (который соответствует вашим опциям выбора).

Таким образом, вы бы в конечном итоге с чем-то вроде этого (fiddle):

<select id="type_selector"> 
    <option value="all">All types</option> 
    <option value="university">University</option> 
    <option value="polytech">Polytech</option> 
    <option value="highschool">High School</option> 
</select> 
<select id="state_selector"> 
    <option value="all">All types</option> 
    <option value="CA">California</option> 
    <option value="MI">Michigan</option> 
    <option value="VT">Vermont</option> 
</select> 
<select id="color_selector"> 
    <option value="all">All colors</option> 
    <option value="red">Red schools</option> 
    <option value="orange">Orange schools</option> 
    <option value="green">Green schools</option> 
</select> 
<div> 
    <div id='calendar'></div> 
</div> 

<script> 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    var calendar = $('#calendar').fullCalendar({ 
     defaultView: 'agendaWeek', 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     selectable: true, 
     selectHelper: true, 

     year: 2016, 
     month: 8, 
     date: 25, 

     slotMinutes: 15, 
     editable: true, 

     events: [{ 
      title: 'Michigan University', 
      start: '2016-09-26', 
      type: 'university', 
      state: 'MI', 
      backgroundColor: 'red', 
      borderColor: 'red' 
     }, { 
      title: 'California Polytechnic', 
      start: '2016-09-27', 
      type: 'polytech', 
      state: 'CA', 
      backgroundColor: 'orange', 
      borderColor: 'orange' 
     }, { 
      title: 'Vermont University', 
      start: '2016-09-28', 
      type: 'university', 
      state: 'VT', 
      backgroundColor: 'red', 
      borderColor: 'red' 
     }, { 
      title: 'Michigan High School', 
      start: '2016-09-29', 
      type: 'highschool', 
      state: 'MI', 
      backgroundColor: 'green', 
      borderColor: 'green' 
     }, { 
      title: 'Vermont High School', 
      start: '2016-09-30', 
      type: 'highschool', 
      state: 'VT', 
      backgroundColor: 'green', 
      borderColor: 'green' 
     }, { 
      title: 'California High School', 
      start: '2016-09-30', 
      type: 'highschool', 
      state: 'CA', 
      backgroundColor: 'green', 
      borderColor: 'green' 
     }], 
     eventRender: function eventRender(event, element, view) { 
      return ['all', event.type].indexOf($('#type_selector').val()) >= 0 
       && ['all', event.state].indexOf($('#state_selector').val()) >= 0 
       && ['all', event.backgroundColor].indexOf($('#color_selector').val()) >= 0; 
     } 

    }); 
    $('#type_selector').on('change', function() { 
     $('#calendar').fullCalendar('rerenderEvents'); 
    }); 
    $('#state_selector').on('change', function() { 
     $('#calendar').fullCalendar('rerenderEvents'); 
    }); 
    $('#color_selector').on('change', function() { 
     $('#calendar').fullCalendar('rerenderEvents'); 
    }); 
</script> 

---

Существует еще один способ, без изменения кода слишком много, но вы должны быть осторожны с этим. Поскольку event.className возвращает массив с именем класса, вы можете просто изменить

eventRender: function eventRender(event, element, view) { 
    return ['all', event.type].indexOf($('#type_selector').val()) >= 0 
     && ['all', event.state].indexOf($('#state_selector').val()) >= 0 
     && ['all', event.className].indexOf($('#color_selector').val()) >= 0 
} 

Для

eventRender: function eventRender(event, element, view) { 
    return ['all', event.type].indexOf($('#type_selector').val()) >= 0 
     && ['all', event.state].indexOf($('#state_selector').val()) >= 0 
     && ['all', event.className[0]].indexOf($('#color_selector').val()) >= 0 
} 

Обратите внимание на [0] перед event.className. Таким образом, вы сравните значение параметра с именем первого класса.

Вам нужно быть осторожным, потому что, если у вас более одного класса, первым элементом может быть не значение параметров выбора.

Проверить this jsfiddle