classNameによるFullcalendarフィルタ

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 propertyevent.classNameにアクセスしようとすると、実際にイベントのプロパティ（赤、オレンジなど）にアクセスするのではなく、['red']のようなDOMプロパティが返されます。

classNameを他の（予約されていない、プロパティではない）ものに変更する場合は、修正する必要があります（updated jsfiddleにチェック）。

もちろん、各イベントの背景色がデフォルトの青色に戻ります。あなたはこのすべてを簡素化し、このプロパティは、背景色の名前を持つ文字列を返しますので、単にbackgroundColorためclassNameを置き換えることができます

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

（：あなたのようなbackgroundColorとborderColor（Event Object documentationを確認してください）、プロパティを設定することによってこの問題を解決することができます選択したオプションに一致します）。あまりにも多くのコードを変更せずに、別の方法があり

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

---

ていますが、これに注意する必要があります

だから、この（fiddle）のようなもので終わるでしょう。 event.classNameは、クラスの名前の配列を返すされているので、あなただけの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[0]].indexOf($('#color_selector').val()) >= 0 
} 

注[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].indexOf($('#color_selector').val()) >= 0 
} 

を変更することができます。この方法で、オプション値を最初のクラス名と比較します。

複数のクラスがある場合、最初の要素は選択オプションの値ではない可能性があるため、注意する必要があります。

チェックthis jsfiddle