FullCalendar渲染报错Uncaught TypeError读取undefined的hasTime属性

报错根因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'hasTime')错误，由以下几个代码问题共同导致：

• 格式不符合要求：FullCalendar 3.x的events配置项要求传入对象数组，每个日程项为包含title、start、end属性的对象，你手动拼接生成的二维字符串数组不符合格式要求，FullCalendar解析属性时找不到对应字段。
• 数组嵌套错误：你已经将拼接后的字符串转为数组datavlue，传参时额外套了一层方括号[datavlue]，相当于传入三维数组，结构完全错乱。
• 多余的字符串拼接操作：后端已经返回JSON格式的对象数组，手动拼接字符串再转JSON的操作完全多余，还容易因为标题包含特殊字符（比如引号、逗号）导致格式异常。
• 配置项位置错误：你把日历头部配置（left/right/center）直接写在了根配置下，没有套入header属性中，配置不生效。

修复方案 #

最简方案（推荐） #

直接使用FullCalendar自带的AJAX事件源能力，不需要手动写AJAX请求：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'title',
      center: '',
      right: 'today prev,next'
    },
    editable: true,
    events: {
      url: 'CalendarEventController',
      dataType: 'json'
    }
  })
});

自定义AJAX方案 #

如果需要对后端返回的数据做自定义处理，可以用以下写法，不需要手动拼接字符串：

$(document).ready(function() {
  $.ajax({
    url: 'CalendarEventController',
    dataType: "json",
    success: function(response) {
      // 此处可添加自定义逻辑处理response，比如字段映射、过滤无效事件等
      $('#calendar').fullCalendar({
        header: {
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        editable: true,
        events: response // 直接传入后端返回的对象数组即可，不要额外套方括号
      })
    }
  });
});

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