Question

我正在构建一个带有fullcalendar的基于日历的网络应用程序，供大学生使用。我定义了一些类别。例如，运动，艺术，思想等......全日历中的每个事件都将被分配到一个类别。

我想要做的是：日历顶部有一些复选框对应的类别，用户可以选中或取消选中一些隐藏/显示相关事件的复选框

我将如何实现这一目标？

Answer 1

一种方法是通过在发送到日历的事件对象上设置'className'属性，在每个事件上放置适当的类，并使用jquery隐藏这些事件（例如$（。myClassName）.hide（））当他们检查复选框时。麻烦的是事件会消失，留下一个可能不是你想要的差距。

更好的方法是在第一次调用fullCalendar时向events选项添加一个过滤器函数：

fullCalendar({
...
events: {
  url: ....,
  success: function(events) {
    $.map(events, function (e) {
      if (userHasFilteredOut(e))
        return null;
      else
        return e;
    });
  },
...
});

这会在事件显示之前将其过滤掉。如果传入的事件对象是用户的复选框值指示被过滤掉的类，则函数userHasFilteredOut返回true。当用户选中或取消选中复选框时，您需要从服务器重新获取所有事件。你需要这样做：

$('#mycal').fullCalendar('refetchEvents');

隐藏/显示fullcalendar中的部分事件

1 个答案: