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

您的问题是名称＆＃34; className＆＃34;。 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 
}

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

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

检查this jsfiddle

按类名的Fullcalendar过滤器

1 个答案: