如何使用 fullCalendar 按类别显示事件答案

【问题标题】：How to show events by category using fullCalendar如何使用 fullCalendar 按类别显示事件
【发布时间】：2018-03-15 01:54:35
【问题描述】：

我正在使用 fullCalendar 3.9.0 列出会员组织的活动和事件。他们将他们的活动分类为社交、研讨会和项目这些事件与月视图一起显示。

仅供参考，我使用的是 Adobe BC 事件被定义为一个数组，例如使用这些标签作为列表拉入 {id:{tag_bookingid}, groupid: "Social Event",title: "{tag_name_nolink}", url: "{tag_url}", start: "{tag_bookingyear}-{tag_bookingmonthnumeric}-{tag_bookingday}", color:"# 5f7bc0"},

有没有办法自定义日历一次只显示一个类别的事件，并使用标题中的选项卡或按钮在类别之间切换？

示例将不胜感激。

【问题讨论】：

您可以根据类别过滤和创建新的事件数组。因此，您将拥有 3 个类别数组。根据您的标签，您可以销毁 fullcalendar 并使用特定类别的事件重新初始化它。
我正在查看视图作为显示类别按钮的选项，但视图似乎不允许拥有自己的数组，除非我错了。请您更详细地解释您的想法。
与其像 Kenny 建议的那样销毁和重新创建日历，不如使用事件源将事件分成每个类别的源，然后添加和删除它们可能会更好。或者，使用自定义“事件”回调函数为您进行过滤（我假设是客户端），并在用户更改类别选择时运行“refetchEvents”，或者如果您更喜欢在服务器上进行过滤当您获取事件并让它返回受限列表时，您可以简单地将类别 ID 传递给服务器。这取决于你。
如果您选择其中一种方法并遇到困难，请发布您的代码，我们可以为您提供帮助。 FWIW 我认为其中的第 2 或第 3 可能是最简单的。
查看 fullaclenadar 'removeEventSource' 和 'addEventSource'

标签： fullcalendar fullcalendar-3

【解决方案1】：

这是我用来切换事件数据的函数：它还使用 cookie 来记住访问之间的选择；您将在页面加载时使用不同的函数来检查 cookie 并在那里设置事件列表。

function toggleEventList(obj) {
    var group = $(obj).data('group');
    if ( $(obj).data('active') === 'yes' ) {
        $(obj).data('active', 'no');
        $('#calendar').fullCalendar('removeEventSource', '/cal-data-group?group='+group);

        var elCookie = $.cookie('calendarEventList');
        if (elCookie) {
            elCookie = $.parseJSON(elCookie);
            var idx = elCookie.indexOf(group);
            if ( idx > -1 ) {
                elCookie.splice(idx, 1);
            }
        }
        $.cookie('calendarEventList', JSON.stringify(elCookie), {expires:7, path:'/'});
    } else {
        $(obj).data('active', 'yes');
        $('#calendar').fullCalendar(
            'addEventSource',
            { url: '/cal-data-group?group='+group, color: 'gray', textColor: 'black' }

        );
        var elCookie = $.cookie('calendarEventList');
        if (elCookie) {
            elCookie = $.parseJSON(elCookie);
            var idx = elCookie.indexOf(group);
            if ( idx == -1 ) {
                elCookie.push(group);
            }
        } else {
            elCookie = [group];
        }
        $.cookie('calendarEventList', JSON.stringify(elCookie), {expires:7, path:'/'});
    }
    $(obj).parent().toggleClass('active');


}

【讨论】：