Fullcalendar按类名过滤 [英] Fullcalendar filter by className

查看：213
本文介绍了Fullcalendar按类名过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我为我的Fullcalendar项目设置了多个选择过滤器。我可以在我的JSON中筛选几个事件值，但是我无法通过 className 来过滤。



有人能告诉我我做错了什么吗？



这里是我使用的代码和这里是一个jsfiddle ，它复制了这个问题。 

 < select ID = type_selector > 
< option value =all>所有类型< / option> 
< option value =university>大学< / option> 
< option value =polytech> Polytech< / option> 
< option value =highschool>高中< / option> 
< / select> 
< select id =state_selector> 
< option value =all>所有类型< / option> 
< option value =CA>加利福尼亚< / option> 
< option value =MI>密歇根< / option> 
< option value =VT>佛蒙特< / option> 
< / select> 
< select id =color_selector> 
< option value =all>所有颜色< / option> 
< option value =red>红学校< / option> 
< option value =orange>橙色学校< / option> 
< option value =green>绿色学校< / 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'
}，
可选：true，
 selectHelper：true，
 
年：2016，
月：08，
日期：25，
 
 slotMinutes ：15，
 editable：true，
 
 events：[{
 title：'Michigan University'，
 start：'2016-09-26'，
类型：'大学'，
州：'MI'，
 className：'红色
}，{
 title：'California Polytechnic'，
 start：'2016-09-27'，
 type：'polytech'，
 state：'CA '，
 className：'orange'
}，{
 title：'Vermont University'，
 start：'2016-09-28'，
 type：'大学'，
州：'VT'，
 className：'红色'
}，{
标题：'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 
}，{
标题：'California High School'，
 start：'2016-09-30'，
 type：'highschool'，
 state：'b $ b 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 
} 
 
}）; $（$＃$ b $（'＃type_selector'）。on（'change'，function（）{
 $（'＃calendar'）。fullCalendar（'rerenderEvents'）; 
}）$ b $ （'＃calendar'）。（''change'，function（）{$ b $（'rerenderEvents'）; 
}）
 $（'＃calendar'） （'＃color_selector'）。on（'change'，function（）{
 $（'＃calendar'）。fullCalendar（'rerenderEvents'）; 
}）
}）; 
 
< / script>


解决方案

您的问题是名称className。 className 是一个DOM属性 ，当你尝试访问 event.className 时，你实际上并没有访问事件的属性（红色，橙色等），而是DOM属性，它返回类似于< code $ ['red'] 。



如果将className更改为任何其他（非保留，非属性） ，应该修复（检查更新的jsfiddle ）。



当然，这意味着每个事件的背景颜色现在会回到默认的蓝色。你可以通过设置属性 backgroundColor 和 borderColor 来解决这个问题（检查 Event Object 文档），如下所示：

  events：[{
 title：'Michigan University'，
 start：'2016-09-26'，
 type：'university'，
 state：'MI'，
 cName：'red'，
 backgroundColor：'red'，
 borderColor：'red'$ b $你可以简化所有这些并简单地替换 className  $ b $ / code>

c $ c> for backgroundColor ，因为此属性返回一个带有背景颜色名称的字符串（与您的选择选项匹配）。



所以你最终会得到这样的结果（小提琴）：

 < select id =type_selector> 
< option value =all>所有类型< / option> 
< option value =university>大学< / option> 
< option value =polytech> Polytech< / option> 
< option value =highschool>高中< / option> 
< / select> 
< select id =state_selector> 
< option value =all>所有类型< / option> 
< option value =CA>加利福尼亚< / option> 
< option value =MI>密歇根< / option> 
< option value =VT>佛蒙特< / option> 
< / select> 
< select id =color_selector> 
< option value =all>所有颜色< / option> 
< option value =red>红学校< / option> 
< option value =orange>橙色学校< / option> 
< option value =green>绿色学校< / 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，
 
年：2016，
月：8，
日期：25，
 
 slotMinutes：15，
可编辑：true，
 
活动：[{
 title：'Michigan University'，
 start：'2016-09-26'，
 type：'university'，
 state：'MI '，
 backgroundColor：'red'，
 borderColor：'red'
}，{
 title：'California Polytechnic'，
 start：'2016-09- 27'，
类型：'polytech'，
状态：'CA'，
 backgroundColor：橙色'，
 borderColor：'橙色'
}，{
标题：'佛蒙特大学'，
开始：'2016-09-28'，
类型： '大学'，
州：'VT'，
 backgroundColor：'红'，
 borderColor：'红'
}，{
标题：'Michigan High School '，
 start：'2016-09-29'，
 type：'highschool'，
 state：'MI'，
 backgroundColor：'green'，
 borderColor：'green'
}，{
标题：'佛蒙特高中'，
开始：'2016-09-30'，
类型：'highschool'，
 state：'VT'，
 backgroundColor：'green'，
 borderColor：'green'
}，{
标题：'California High School'，
开始：'2016-09-30'，
类型：'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; 
} 
 
}）; $（$＃$ b $（'＃type_selector'）。on（'change'，function（）{
 $（'＃calendar'）。fullCalendar（'rerenderEvents'）; 
}）; $（'＃calendar'）。fullCalendar（'rerenderEvents'）; 
}）; $ b $（'＃state_selector'）。on（'change'，function（）{
 $ （'＃calendar'）。fullCalendar（'rerenderEvents'）; 
}）; $ b $（'＃color_selector'）。（'change'，function（）{
 $ 
< / 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] C>。通过这种方式，您可以将选项值与第一个类名进行比较。



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



检查这个jsfiddle


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

Can someone tell me what I'm doing wrong?

Here is the code I'm using and here is a jsfiddle that replicates the issue.

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

解决方案

Your issue is the name "className". className is a DOM property so, when you try to access event.className you're not actually accessing the event's property (the red, orange, etc) but the DOM property, which is returning something like ['red'].

If you change the className to any other (non-reserved, non-property), that should be fixed (check updated jsfiddle).

Of course, this means the background color of each event now goes back to the default blue. You can fix this by setting the properties backgroundColor and borderColor (check the Event Object documentation), as such:

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

You can simplify all this and simply replace className for backgroundColor since this property returns a string with the background color name (which matches your select options).

So you would end up with something like this (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>

There is another way, without changing the code too much, but you'll need to be careful with this. Since event.className is returning an array with the name of the class, you could just change

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 
}

To 

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 
}

Note the [0] in front of event.className. This way, you'll compare the option value with the first class name.

You'll need to be careful, because if you have more than one class, the first element might not be the value of the select options.

Check this jsfiddle

这篇关于Fullcalendar按类名过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆