FullCalendar长事件标题每周重复显示，如何设置仅显示一次？

在FullCalendar v5和v6中，跨周/跨月的长事件默认会在每个周区块重复显示标题，以下两种方法可以让标题仅显示一次：

方案一：自定义事件内容渲染（官方推荐） #

通过配置eventContent回调函数，精确控制事件在不同周块的显示内容，只在事件的起始周块渲染标题，其他周块仅保留背景样式。

修改后的完整代码如下：

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.global.min.js'> 
</script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.global.min.js'></script>
<style>
/* 可选：调整事件背景样式，确保无标题时的视觉连贯性 */
.fc-event-main {
  display: flex;
  align-items: center;
  height: 100%;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      events: [
            {
                title: 'Testing 1 the quick brown fox jumps over the lazy dog.',
                start: '2024-01-02',
                end: '2024-02-03',
                color: 'green'
            }
        ],
      eventContent: function(info) {
        // 仅在事件的起始周块显示标题
        if (info.isStart) {
          return {
            html: `<div class="fc-event-main">${info.event.title}</div>`
          };
        } else {
          // 非起始周块仅渲染空的背景容器
          return {
            html: `<div class="fc-event-main"></div>`
          };
        }
      }
    });
    calendar.render();
  });
</script>
</head>
<body>
   <div id='calendar'></div>
</body>
</html>

逻辑说明：info.isStart会判断当前渲染的区块是否是事件的起始显示块，仅在该块渲染标题，其余块只保留事件的背景占位。

方案二：CSS样式隐藏重复标题 #

如果不想修改JS逻辑，可以通过CSS选择器隐藏同一个事件下除第一个之外的标题元素，这种方法更简单但依赖FullCalendar的DOM结构：

添加以下CSS到页面中：

/* 隐藏事件中除第一个周块外的所有标题 */
.fc-event:not(:first-child) .fc-event-title {
  display: none;
}

注意：该方法依赖FullCalendar生成的DOM类名，若后续版本调整DOM结构可能失效，适合快速临时解决问题。

内容的提问来源于stack exchange，提问作者CK8