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

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.09.24 09:24:00