FullCalendar 6.1多月份视图如何显示单日多个事件？

在FullCalendar 6.1中，dayMaxEventRows和dayMaxEvents确实对MultiMonth视图无效——这两个配置仅针对传统月视图（month）和时间网格类视图设计。MultiMonth视图有专属的事件显示控制配置，以下是可行的解决办法：

方法1：使用multiMonthEventLimit专属配置 #

这是官方为MultiMonth视图提供的事件数量限制参数，支持两种设置方式：

• 设置为具体数字：指定单日显示的最大事件数，超出部分会显示“更多”提示，点击可展开查看全部事件
• 设置为true：由FullCalendar自动判断合理的显示数量，超出后展示“更多”按钮

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'multiMonthYear',
    events: [
      { title: '团队会议', start: '2024-06-10' },
      { title: '项目评审', start: '2024-06-10' },
      { title: '客户拜访', start: '2024-06-10' },
      { title: '复盘会', start: '2024-06-10' }
    ],
    // 单日最多显示3条事件，超出显示"更多"
    multiMonthEventLimit: 3
  });
  calendar.render();
});

方法2：自定义事件渲染（完全控制显示逻辑） #

如果需要更灵活的样式或显示逻辑（比如不使用默认的“更多”提示，直接显示剩余事件计数），可以通过eventContent钩子自定义渲染：

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'multiMonthYear',
    events: [/* 你的事件数据 */],
    eventContent: function(info) {
      // 筛选出当天的所有事件
      const dayEvents = info.view.getEvents().filter(evt => evt.startStr === info.event.startStr);
      const showCount = 2; // 自定义显示条数
      const extraCount = dayEvents.length - showCount;

      const container = document.createElement('div');
      // 渲染前N条事件
      dayEvents.slice(0, showCount).forEach(evt => {
        const eventEl = document.createElement('div');
        eventEl.className = 'fc-event fc-event-primary';
        eventEl.textContent = evt.title;
        container.appendChild(eventEl);
      });
      // 渲染剩余事件计数
      if (extraCount > 0) {
        const extraEl = document.createElement('div');
        extraEl.style.fontSize = '0.8em';
        extraEl.style.color = '#666';
        extraEl.textContent = `+${extraCount}`;
        container.appendChild(extraEl);
      }
      return { domNodes: [container] };
    }
  });
  calendar.render();
});

注意：自定义渲染时，若需要保留事件的点击交互逻辑，可以给自定义元素绑定点击事件，调用info.event.click()方法触发默认事件点击行为。

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