从现有数组加载FullCalendar事件时遇报错或无显示问题求助

问题场景 #

我尝试从现有数组calendarObject中提取数据生成FullCalendar事件，先后用两种写法都遇到问题：

写法一：事件回调函数实现 #

代码如下：

events: function(start, end, callback) {
  var events = [];
  for (var i = 0; i < calendarCount; i++) {
    events.push({
      title: calendarObject[i].title,
      start: new Date(calendarObject[i].startDate * 1000),
      end: new Date(calendarObject[i].endDate * 1000),
      allDay: calendarObject[i].isAllDay,
      color: calendarObject[i].color
    });
  }
  console.log(events)
  callback(events);
}

• 现象：控制台能正常打印出events数组，但FullCalendar抛出错误：
  

写法二：使用$.map转换数组 #

代码如下：

for (var i = 0; i < calendarCount; i++) {
  var buildingEvents = $.map(calendarObject, function(item) {
    return {
      title: calendarObject[i].title,
      start: new Date(calendarObject[i].startDate * 1000),
      end: new Date(calendarObject[i].endDate * 1000),
      allDay: calendarObject[i].isAllDay,
      color: calendarObject[i].color
    };
  });
}

随后配置events: buildingEvents

• 现象：控制台无报错，但日历上完全不显示任何事件

问题分析与修复方案 #

写法一错误排查 #

从错误截图推断，大概率是事件数据格式不符合FullCalendar要求，重点检查这几点：

1. 日期有效性：确认startDate/endDate是合法的秒级时间戳，转换后的Date对象是否有效。可在循环中打印new Date(calendarObject[i].startDate * 1000)，验证是否为正常日期。
2. allDay类型：allDay字段必须是布尔值（true/false），如果原数据isAllDay是字符串（如"true"），需强制转换：allDay: !!calendarObject[i].isAllDay
3. 数组边界：确保calendarCount等于calendarObject.length，避免循环越界导致数据异常。

写法二无显示问题修复 #

这段代码存在两处逻辑错误：

• 外层for循环完全多余：$.map本身会遍历整个calendarObject数组，外层循环会重复覆盖buildingEvents，最终只保留最后一次循环结果。
• 错误引用外层变量i：$.map执行时，外层i已经变成calendarCount，导致calendarObject[i]为undefined，生成的事件全是无效数据。

修正后的代码：

var buildingEvents = $.map(calendarObject, function(item) {
  return {
    title: item.title,
    start: new Date(item.startDate * 1000),
    end: new Date(item.endDate * 1000),
    allDay: !!item.isAllDay,
    color: item.color
  };
});

直接配置events: buildingEvents即可，无需外层循环。

更简洁的实现方式 #

既然已有现成数组，无需回调或多余循环，直接用原生map转换后赋值：

events: calendarObject.map(function(item) {
  return {
    title: item.title,
    start: new Date(item.startDate * 1000),
    end: new Date(item.endDate * 1000),
    allDay: !!item.isAllDay,
    color: item.color
  };
})

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