You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何配置multiMonthYear视图,取消moreLinks并显示当日全部事件?

解决方案

可以实现这个需求,通过FullCalendar的配置项结合自定义CSS就能搞定,具体步骤如下:

1. 禁用事件截断(取消moreLinks)

在初始化FullCalendar时,针对multiMonthYear视图单独设置eventLimit: false,这样当天所有事件都会直接显示,不会生成"更多"链接:

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'multiMonthYear',
    views: {
      multiMonthYear: {
        columns: 2, // 保持双列布局
        eventLimit: false // 禁用事件截断,显示全部事件
      }
    },
    // 你的其他配置(比如事件数据源、头部工具栏等)
    events: [/* 事件数据 */]
  });
  calendar.render();
});

2. 自定义CSS让日期单元格高度自适应

默认multiMonthYear视图的日期单元格是固定高度且强制同行对齐的,需要通过CSS覆盖这个行为,让单元格根据内容自动扩展高度:

/* 取消日期单元格的固定高度,允许自动撑开 */
.fc-multiMonthYear-view .fc-daygrid-day-frame {
  height: auto !important;
  min-height: 70px; /* 可选:给空单元格设置最小高度,避免太突兀 */
}

/* 调整单元格布局,让事件容器能正常扩展 */
.fc-multiMonthYear-view .fc-daygrid-day {
  display: flex;
  flex-direction: column;
}

/* 移除事件容器的最大高度限制 */
.fc-multiMonthYear-view .fc-daygrid-event-harness {
  max-height: none !important;
}

这样设置后,双列multiMonthYear视图中,事件较多的日期单元格会自动增高显示全部内容,不会再出现"更多"链接,也不需要和相邻月份的单元格保持高度一致。

内容的提问来源于stack exchange,提问作者Manuel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 18:13:11