如何在 FullCalendar 中隐藏多日活动第一天之后的内容？

Question

在 FullCalendar 中，有些事件可以持续整夜，因此您将在新的一天中发生事件，但 FullCalendar 使得第一天的事件内容在该事件发生的每隔一天重复一次。在。我想要实现的是，活动的内容从第一天开始并且被隐藏。

我已经成功地将

eventContent

用于静态 FullCalendar，我从每个事件 ID 中创建了一个类，并使用

eventClassNames

将其分配给事件，然后我使用

eventContent

使用事件 ID 获取所有类，如果该数组的长度为0，然后我返回了事件内容。如果类计数不为 0，但在类中未找到事件内容，那么它也会返回事件内容。

但是，当您尝试使用

editable

编辑事件时，就会出现问题，上面的代码适用于静态 FullCalendar，因为当加载事件的第一部分时，尚未加载任何带有类名的内容，因此

d1.length

将是0，当您开始使用可编辑事件的所有部分时，事件的所有部分都已经被加载，并且调用时事件的部分可以是 1、2、3 或更多完全相同的事件（不是事件的部分，只是完整版本）事件的 el)，为了解决这个问题，我尝试通过循环遍历所有相关类来检查事件内容是否已经在屏幕上，但这会导致事件看到自己如图所示并最终什么也不显示，或者在活动的错误部分。

移动活动之前

移动事件后

我也尝试过拆分事件，这有效，但这也意味着当我尝试使用

editable

移动事件时，事件将是2个单独的事件，也许有一种方法可以使它们充当一个事件，我尝试寻找对此，但没有任何相关的内容出现......

预期的行为是，只有活动的第一部分有内容（例如标题、时间），而第二天的第二部分是空的。然而，下面代码片段的行为是，当您移动一个事件时，其他事件的内容会被清除，并在您再次移动它时重新出现。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    events: [{
        'id': 1,
        'title': 'event1',
        'start': '2024-11-05 20:00:00',
        'end': '2024-11-06 12:00:00'
      },
      {
        'id': 2,
        'title': 'event2',
        'start': '2024-11-07 14:00:00',
        'end': '2024-11-07 18:00:00'
      }
    ],
    editable: true,
    eventClassNames: function(arg) {
      return ['event-' + arg.event.id];
    },
    eventContent: function(arg) {
      var d1 = document.getElementsByClassName('event-' + arg.event.id);
      console.log(d1);
      for (var i = 0; i < d1.length; i++) {
        if (d1[i].innerText.includes(arg.event.title)) {
          return false;
        }
      }
      if (d1.length == 0) {
        return {
          html: arg.event.title
        };
      }
    }
  });
  calendar.render();
});

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>

<div id='calendar'></div>

Answer 1

我想要实现的是，活动内容从第一天开始并且隐藏。

如果您只想隐藏除第一天之外的所有活动内容 - 为什么不只使用 CSS 来实现呢？

显示事件内容的

a.fc-event

元素，也会在第一天列中获取类

fc-event-start

- 因此隐藏所有其他此类元素中的详细信息，那些 不 具有该类吗？

我在这里删除了设置事件内容的条件逻辑，只是添加了

.fc-event:not(.fc-event-start) .fc-event-main {
   display: none;
}

- 如果我理解正确的话，这确实达到了你想要的目的？

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    events: [{
        'id': 1,
        'title': 'event1',
        'start': '2024-11-05 20:00:00',
        'end': '2024-11-06 12:00:00'
      },
      {
        'id': 2,
        'title': 'event2',
        'start': '2024-11-07 14:00:00',
        'end': '2024-11-07 18:00:00'
      }
    ],
    editable: true,
    eventClassNames: function(arg) {
      return ['event-' + arg.event.id];
    },
    eventContent: function(arg) {
      
        return {
          html: arg.event.title
        };
      
    }
  });
  calendar.render();
});

.fc-event:not(.fc-event-start) .fc-event-main {
   display: none;
}

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>

<div id='calendar'></div>