如何在 fullCalendar 中隐藏事件？

Question

如何在 fullCalendar 中隐藏事件？

Iva*_*van 5 javascript css jquery fullcalendar fullcalendar-5

使用最新版本的 fullCalendar (5.3.2) 我想隐藏一些与我现在不想在给定视图中显示的资源相对应的事件。执行此操作的标准方法是使用一个eventClassNames函数来检查它并添加一个“隐藏”类。像这样的东西：

eventClassNames: function(arg) {
   my_class = "";
   if (arg.view.type != 'resourceTimeGridDay') {
      if (arg.event.extendedProps.real_rc != "1") {
         my_class = 'hidden';
      }
   }
   return my_class;
}

Run Code Online (Sandbox Code Playgroud)

使用简单的 CSS：

.fc-event.hidden {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

这工作正常，但是当隐藏事件和显示事件之间存在重叠时会出现问题。例如在这种情况下：

events: [
  {
    title: 'Resource 1',
    real_rc: '1',
    start: '2020-12-22 16:00',
    end: '2020-12-22 17:00'
  },
  {
    title: 'Resource 2',
    real_rc: '2',
    start: '2020-12-22 15:00',
    end: '2020-12-22 17:00'
  }
]

Run Code Online (Sandbox Code Playgroud)

real_rc == 1应该只显示事件 with ，实际上它是正确的，但是隐藏事件使用的空间被保留，如下图所示：

如果列表中real_rc: 2省略了带有的事件，则event结果是预期的：

我已经使用 Chrome DevTools 试图弄清楚发生了什么，我认为问题在于“隐藏”类没有设置在fullCalendar 状态的“最外层事件元素”上，而是设置在内部：

（第一个 DIV 是第一个事件，如您所见，hidden该类已设置但不是 DIV，而是a标签）

这是一个测试它的代码笔。

恕我直言，这是一个 fullCalendar 错误，但现在我遇到了问题，我需要一个解决方案。我的选择是：

为父级使用 CSS 选择器 <-- 不可能：它不存在（还）
做 (1) 使用 jquery <-- 我不知道怎么做？我知道我需要$(".fc-event.hidden").parent().remove()在加载和显示事件时执行一些操作，但是由于 v3 不存在这样的更新，即使它存在，当前 v5 删除 DOM 元素也不会调整其他事件框的大小。
尝试修复库的代码<-- 问题：如果库的下一个版本没有解决方案，我不想担心补丁
加载时过滤事件 <-- 慢：我使用回调函数通过 Ajax 加载事件，我可以在那里进行快速过滤，但在这种情况下，我将失去性能，因为每次需要时我都必须重新获取事件显示事件 real_rc != 1
自定义视图 <-- 我不想重新发明轮子。正如@saqibkafeel 在评论中所建议的那样，自定义视图可用于创建新视图，但我喜欢当前视图并且并不真正需要一个新视图，只是默认视图按预期工作。

有没有办法在不创建新问题的情况下规避这个问题？（我觉得最简单的选择是找到一个钩子，让我可以做选项 2，但我已经花了一整天，我什么也没找到）。

Answer 1

Tem*_*fif 5

正如您已经注意到的，CSS 和 JS 在这里无法提供帮助，因为事件是使用放置的，position:absolute因此删除一个事件（甚至完全从 DOM 中删除）不会影响其他事件的显示。唯一的方法是在渲染之前从压延机中删除事件。

因此，删除事件而不是添加类：

eventClassNames: function(arg) { /* you can also use "eventDidMount" */
       if (arg.view.type != 'resourceTimeGridDay') {
          if (arg.event.extendedProps.real_rc != "1") {
             arg.event.remove(); /* HERE */
          }
       }
    },

Run Code Online (Sandbox Code Playgroud)

完整代码：

eventClassNames: function(arg) { /* you can also use "eventDidMount" */
       if (arg.view.type != 'resourceTimeGridDay') {
          if (arg.event.extendedProps.real_rc != "1") {
             arg.event.remove(); /* HERE */
          }
       }
    },

Run Code Online (Sandbox Code Playgroud)

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    initialDate: '2020-12-22',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    height: 'auto',

    eventClassNames: function(arg) {
       if (arg.view.type != 'resourceTimeGridDay') {
          if (arg.event.extendedProps.real_rc != "1") {
             arg.event.remove();
          }
       }
    },

    events: [
      {
        title: 'Test Resource 1',
        real_rc: '1',
        start: '2020-12-22 13:00',
        end: '2020-12-22 14:00'
      },
      {
        title: 'Also resource 1',
        real_rc: '1',
        start: '2020-12-22 13:30',
        end: '2020-12-22 14:30'
      },
      {
        title: 'Resource 1',
        real_rc: '1',
        start: '2020-12-22 16:00',
        end: '2020-12-22 17:00'
      },
      {
        title: 'Resource 2',
        real_rc: '2',
        start: '2020-12-22 15:00',
        end: '2020-12-22 17:00'
      }
    ]
  });

  calendar.render();
});

Run Code Online (Sandbox Code Playgroud)

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

Run Code Online (Sandbox Code Playgroud)

另一个想法是控制display事件的发生，如下所示：

<link rel="stylesheet" href="https://unpkg.com/fullcalendar@5.1.0/main.min.css">
<script src="https://unpkg.com/fullcalendar@5.1.0/main.min.js"></script>
<div id='calendar'></div>

Run Code Online (Sandbox Code Playgroud)

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    initialDate: '2020-12-22',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    height: 'auto',

    eventDidMount: function(arg) {
       if (arg.view.type != 'resourceTimeGridDay') {
          if (arg.event.extendedProps.real_rc != "1") {
             arg.event.setProp( 'display', 'none' );
          }
       }
    },

    events: [
      {
        title: 'Test Resource 1',
        real_rc: '1',
        start: '2020-12-22 13:00',
        end: '2020-12-22 14:00'
      },
      {
        title: 'Also resource 1',
        real_rc: '1',
        start: '2020-12-22 13:30',
        end: '2020-12-22 14:30'
      },
      {
        title: 'Resource 1',
        real_rc: '1',
        start: '2020-12-22 16:00',
        end: '2020-12-22 17:00'
      },
      {
        title: 'Resource 2',
        real_rc: '2',
        start: '2020-12-22 15:00',
        end: '2020-12-22 17:00'
      }
    ]
  });

  calendar.render();
});

Run Code Online (Sandbox Code Playgroud)

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

Run Code Online (Sandbox Code Playgroud)

一个交互式演示，您可以在其中切换显示：

<link rel="stylesheet" href="https://unpkg.com/fullcalendar@5.1.0/main.min.css">
<script src="https://unpkg.com/fullcalendar@5.1.0/main.min.js"></script>
<div id='calendar'></div>

Run Code Online (Sandbox Code Playgroud)

var rc = "1";

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    initialDate: '2020-12-22',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    height: 'auto',

    eventDidMount: function(arg) {
       if (arg.view.type != 'resourceTimeGridDay') {
          if (arg.event.extendedProps.real_rc != rc) {
             arg.event.setProp( 'display', 'none' );
          } 
       }
    },
    viewDidMount: function(arg) {
       var es = calendar.getEvents();
       for(var i=0;i<es.length;i++)
        es[i].setProp( 'display', 'auto' )
    },

    events: [
      {
        title: 'Test Resource 1',
        real_rc: '1',
        start: '2020-12-22 13:00',
        end: '2020-12-22 14:00'
      },
      {
        title: 'Also resource 1',
        real_rc: '1',
        start: '2020-12-22 13:30',
        end: '2020-12-22 14:30'
      },
      {
        title: 'Resource 1',
        real_rc: '1',
        start: '2020-12-22 16:00',
        end: '2020-12-22 17:00'
      },
      {
        title: 'Resource 2',
        real_rc: '2',
        start: '2020-12-22 15:00',
        end: '2020-12-22 17:00'
      }
    ]
  });

  calendar.render();
  document.querySelector("#toggle").addEventListener('click',function() {
    if (rc=="1") rc="2"; else rc = "1";
    /* trigger view change */
    calendar.changeView('dayGridMonth');
    calendar.changeView('timeGridWeek');
  });
});

Run Code Online (Sandbox Code Playgroud)

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，11 月前
查看次数：	631 次
最近记录：	4 年，11 月前