FullCalendar MultiMonth视图中如何显示多行事件

FullCalendar的MultiMonth视图支持同时展示多个月份的日历内容，适合需要查看跨月长期日程的场景，但在默认配置下，单个日期格内的事件如果数量较多或者事件名称较长，会被截断显示，无法完整展示所有内容。通过调整相关配置和样式，可以让事件以多行形式展示，完整呈现所有日程信息。

核心配置调整

要实现多行事件显示，首先需要调整FullCalendar的视图配置，关闭事件的限制显示逻辑，同时设置合适的事件高度和行高参数。

基础配置示例

以下是MultiMonth视图的基础配置代码，重点调整了event_max_stack和day_max_events参数：

import FullCalendar from '@fullcalendar/core';
import multiMonthPlugin from '@fullcalendar/multimonth';

const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthYear',
  // 设置同时展示的月份数量，这里展示3个月
  multiMonthMonths: 3,
  // 关闭单日事件最大数量限制，默认值为5，超过会显示更多按钮
  day_max_events: false,
  // 设置事件最大堆叠层数，数值越大允许显示的事件行数越多
  event_max_stack: 10,
  // 事件内容显示完整，不截断
  event_display: 'block',
  events: [
    {
      title: '项目需求评审会议',
      start: '2024-03-05',
      end: '2024-03-05'
    },
    {
      title: '系统迭代开发第一阶段',
      start: '2024-03-10',
      end: '2024-03-25'
    },
    {
      title: '用户反馈收集整理',
      start: '2024-03-12',
      end: '2024-03-18'
    }
  ]
});

calendar.render();

样式适配调整

仅调整配置可能无法完全实现多行效果，还需要补充对应的CSS样式，调整日期格的高度和事件元素的换行逻辑。

关键样式代码

以下样式可以配合配置实现多行事件的完整展示：

/* 调整MultiMonth视图中单个日期格的最小高度，避免事件被挤压 */
.fc-multimonth-daygrid-day {
  min-height: 120px;
}

/* 事件容器允许换行显示 */
.fc-multimonth-daygrid-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 单个事件元素不截断，完整显示内容 */
.fc-multimonth-daygrid-event {
  white-space: normal;
  word-break: break-all;
  line-height: 1.4;
  font-size: 12px;
  padding: 1px 3px;
}

特殊场景处理

如果遇到跨月的长事件需要跨单元格显示多行的情况，还需要额外处理事件的渲染逻辑，通过eventContent回调函数自定义事件内容的展示方式。

自定义事件内容示例

const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthYear',
  multiMonthMonths: 3,
  day_max_events: false,
  event_max_stack: 10,
  // 自定义事件内容渲染
  eventContent: function(arg) {
    // 创建事件内容容器
    let container = document.createElement('div');
    container.style.cssText = 'line-height:1.4;padding:1px 0;';
    // 事件标题
    let titleEl = document.createElement('div');
    titleEl.innerText = arg.event.title;
    container.appendChild(titleEl);
    // 如果事件有描述，追加显示
    if (arg.event.extendedProps.description) {
      let descEl = document.createElement('div');
      descEl.innerText = arg.event.extendedProps.description;
      descEl.style.cssText = 'font-size:11px;color:#666;';
      container.appendChild(descEl);
    }
    return { domNodes: [container] };
  },
  events: [
    {
      title: '季度总结汇报',
      start: '2024-03-28',
      end: '2024-04-03',
      extendedProps: {
        description: '准备汇报材料'
      }
    }
  ]
});

calendar.render();

注意事项

• 调整event_max_stack数值时，需要结合日期格的高度设置，避免出现事件超出单元格范围的问题
• 如果使用的是旧版本FullCalendar，部分配置项名称可能有差异，需要参考对应版本的官方文档
• 自定义事件内容时，注意不要破坏原有的事件点击、拖拽等交互逻辑

以上方案适用于FullCalendar 5.x及以上版本，低版本可能需要调整部分API的调用方式。

FullCalendarMultiMonth视图多行事件事件显示修改时间：2026-06-29 12:06:32