如何配置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
相关产品推荐
相关产品推荐

