Fullcalendar.io日视图下是否可以移除时间轴?
FullCalendar 双日历并排单时间轴实现方法
要实现两个日历并排展示时仅单个日历显示时间槽标签(1:00、1:30这类时间区间标识),直接对两个日历实例做差异化配置即可:
- 对需要显示时间轴的日历,保持默认的
slotLabelFormat配置即可,也可以自定义时间格式,示例配置参考:
// 带时间轴的日历实例 const calendarWithTimeline = new FullCalendar.Calendar(document.getElementById('calendar1'), { // 其他通用配置 initialView: 'timeGridDay', slotLabelFormat: { hour: '2-digit', minute: '2-digit', hour12: false } }); calendarWithTimeline.render();
- 对不需要显示时间轴的日历,将
slotLabelFormat设置为空数组即可隐藏所有时间槽标签,可搭配slotWidth调整宽度适配布局,避免左侧留白过多:
// 不带时间轴的日历实例 const calendarWithoutTimeline = new FullCalendar.Calendar(document.getElementById('calendar2'), { // 其他和上方日历一致的通用配置 initialView: 'timeGridDay', slotLabelFormat: [], // 可选配置:缩小左侧时间槽宽度适配布局 slotWidth: 20 }); calendarWithoutTimeline.render();
注:该配置适用于FullCalendar v5及以上版本,如果你使用的是更早版本,也可以通过给对应日历实例添加自定义类名,配合CSS隐藏.fc-timegrid-slot-label类实现同样效果。
内容的提问来源于stack exchange,提问作者Eridanis
相关产品推荐
相关产品推荐

