使用fullCalendar 3.x版本时timelineDay视图无效错误求助

这个报错的原因很明确：fullCalendar 3.x的核心包并不自带timeline类视图（包括timelineDay、timelineWeek等），这些时间线视图是属于fullCalendar官方付费插件「Scheduler」（也叫fullCalendar Scheduler）的专属功能，没有引入这个插件的话，核心库根本识别不了这类视图类型。

下面是具体的解决方案：

1. 引入对应版本的Scheduler插件 #

因为你使用的是fullCalendar 3.9.0（或3.5.1），必须下载与核心版本完全一致的Scheduler插件，版本不匹配会导致兼容性问题。

资源引入顺序（HTML环境） #

确保按以下顺序加载所有依赖文件：

<!-- 核心fullCalendar样式 -->
<link rel="stylesheet" href="fullcalendar.min.css">
<!-- Scheduler插件样式 -->
<link rel="stylesheet" href="fullcalendar-scheduler.min.css">

<!-- jQuery 3.3.1（你的版本） -->
<script src="jquery-3.3.1.min.js"></script>
<!-- moment.js（fullCalendar 3.x的强制依赖，不能省略） -->
<script src="moment.min.js"></script>
<!-- 核心fullCalendar脚本 -->
<script src="fullcalendar.min.js"></script>
<!-- Scheduler插件脚本 -->
<script src="fullcalendar-scheduler.min.js"></script>

2. 验证你的原有配置 #

你的日历初始化代码本身没有问题，只要正确引入Scheduler插件，defaultView: 'timelineDay'就能正常生效：

$('#calendar').fullCalendar({
  defaultView: 'timelineDay',
  header: {
    left: 'prev',
    center: 'title',
    right: 'next'
  },
  minTime: '10:00:00',
  maxTime: '18:00:00'
});

额外注意事项 #

• 如果是通过npm管理依赖，需要安装对应版本的包：

  npm install fullcalendar@3.9.0 fullcalendar-scheduler@3.9.0
  

  然后在代码中导入对应的模块：

  import 'fullcalendar/dist/fullcalendar.min.css';
  import 'fullcalendar-scheduler/dist/fullcalendar-scheduler.min.css';
  import $ from 'jquery';
  import moment from 'moment';
  import 'fullcalendar';
  import 'fullcalendar-scheduler';
  

• 确认所有资源文件路径正确，避免404导致插件未加载成功。

内容的提问来源于stack exchange，提问作者Obelisk