如何在FullCalendar月视图中每日最多显示4个事件？

只需修改FullCalendar的初始化配置，核心是设置eventLimit参数，具体操作如下：

• 在日历初始化的配置对象中添加eventLimit: 4，这个参数控制每个日期格子里最多显示4个事件，超过的部分会折叠并显示剩余事件的计数（比如超过2个就显示+2）。
• 如果需要仅对月视图生效，而非所有视图，可以通过views配置单独设置：

基础配置示例（全局生效） #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    eventLimit: 4, // 每个日期最多显示4个事件
    events: [
      // 替换成你的实际事件数据
      { title: '事件1', start: '2024-05-20' },
      { title: '事件2', start: '2024-05-20' },
      { title: '事件3', start: '2024-05-20' },
      { title: '事件4', start: '2024-05-20' },
      { title: '事件5', start: '2024-05-20' },
      { title: '事件6', start: '2024-05-20' }
    ]
  });
  calendar.render();
});

仅月视图生效的配置示例 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    views: {
      dayGridMonth: {
        eventLimit: 4 // 仅月视图每个日期最多显示4个事件
      }
    },
    events: [
      // 替换成你的实际事件数据
      { title: '事件1', start: '2024-05-20' },
      { title: '事件2', start: '2024-05-20' }
    ]
  });
  calendar.render();
});

设置完成后，月视图中每个日期会先显示最多4个事件，超过的部分会自动显示+N（N为剩余事件数）的折叠标识，点击标识可以查看所有事件。

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