Fullcalendar filter by className
<p>I've set up multiple select filters for my Fullcalendar project. I can filter by several event values in my JSON, but I can't get it to filter by <code>className</code>.</p>

<p>Can someone tell me what I'm doing wrong?</p>

<p>Here is the code I'm using and <a href="http://jsfiddle.net/lbriquet/kzfwro22/" rel="nofollow">here is a jsfiddle</a> that replicates the issue.</p>

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

&lt;script&gt;
    $(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()) &gt;= 0
                &amp;&amp; ['all', event.state].indexOf($('#state_selector').val()) &gt;= 0
                &amp;&amp; ['all', event.className].indexOf($('#color_selector').val()) &gt;= 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');
        }) 
    });

&lt;/script&gt;
</code></pre>