Fullcalendar 按类名过滤

Question

我为我的 Fullcalendar 项目设置了多个 select 过滤器。我可以在 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'].

的内容

如果您将 className 更改为任何其他名称（非保留，非属性），则应该修复（检查 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，因为此属性 returns 带有背景颜色名称的字符串（与您的 select 选项).

所以你最终会得到这样的结果 (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 返回一个名为 class 的数组，您只需更改

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 
}

注意event.className前面的[0]。这样，您就可以将选项值与第一个 class 名称进行比较。

您需要小心，因为如果您有多个 class，第一个元素可能不是 select 选项的值。

勾选this jsfiddle

Fullcalendar 按类名过滤

Fullcalendar filter by className

jquery

classname

filter

fullcalendar