Symfony使用ancarebeca/FullCalendarBundle报stripTime未定义错误

看起来你遇到的这个Uncaught TypeError: Cannot read property 'stripTime' of undefined错误，根源是FullCalendar在处理日期/事件数据时，依赖的Moment.js工具没有正常工作，或者返回的事件数据格式不符合要求。下面是一步步的排查和解决方法：

1. 确认Moment.js是否正确加载 #

stripTime是FullCalendar依赖Moment.js实现的日期处理方法，报错说明FullCalendar找不到Moment的实例。你可以按以下方式检查：

• 打开浏览器的开发者工具（F12），切换到Console标签，输入moment()并回车。如果返回ReferenceError: moment is not defined，说明Moment.js没有成功加载。
• 再切换到Network标签，刷新页面，查找moment.min.js的请求：
  • 如果显示404错误，说明你的asset路径不正确，请确认bundles/fullcalendar/js/fullcalendar/lib/moment.min.js这个文件确实存在于你的项目中，或者尝试用CDN加载Moment.js替换本地路径：

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    

  • 如果请求成功，那可能是Moment.js版本与FullCalendar不兼容，尝试使用FullCalendar官方推荐的Moment.js版本（比如FullCalendar v3对应Moment.js 2.x版本）。

2. 检查事件数据的格式是否符合要求 #

虽然你能通过/full-calendar/load拿到事件数组，但数据格式可能不符合FullCalendar的规范，导致处理时出错。FullCalendar要求每个事件至少包含title（事件标题）和start（开始时间）字段，示例格式如下：

[
  {
    "title": "团队会议",
    "start": "2024-05-20T09:00:00",
    "end": "2024-05-20T10:00:00" // 可选，结束时间
  }
]

• 打开浏览器Network标签，查看/full-calendar/load的返回数据，确认：
  • 没有缺失title或start字段
  • start/end的时间格式是可被Moment.js解析的（比如ISO格式、YYYY-MM-DD等）
  • 没有返回null或格式错误的日期值

3. 验证FullCalendar的初始化配置 #

确保你在页面中正确初始化了FullCalendar，并且指定了正确的事件数据源。比如使用FOSJsRouting生成路由的话，初始化代码应该类似：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    // 其他配置项
    events: Routing.generate('fullcalendar_load') // 这里要对应你的路由名称
  });
});

如果初始化时没有正确配置events选项，或者路由名称错误，也会导致数据加载异常。

4. 排查依赖加载顺序 #

从你的head代码来看，加载顺序是正确的（jQuery → Moment.js → FullCalendar），但要确保没有其他脚本覆盖了moment对象，或者在FullCalendar加载前修改了全局变量。可以尝试暂时移除其他非必要的脚本（比如bootstrap-confirmation），看看错误是否消失，逐步排查冲突。

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