按类名过滤全日历

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'] 的内容。

如果您将 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，因为此属性返回一个带有背景颜色名称的字符串（与您的选择选项匹配）。

所以你最终会得到这样的东西 (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 
}

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

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

查看this jsfiddle