FullCalendar qTip2 tooltip中event.end时间格式化失败及日历渲染异常

这个问题我之前也碰到过，核心原因很简单：当事件是全天事件（allDay: true）或者未明确设置结束时间时，event.end会是null，这时候直接调用格式化方法就会触发JS错误，中断日历的渲染流程。下面是具体的解决方案：

第一步：先做null检查再格式化 #

在渲染qTip内容之前，一定要先判断event.end是否存在，避免直接调用方法导致报错。根据你使用的FullCalendar版本，分两种情况处理：

情况1：FullCalendar v3及更早版本（使用$.fullCalendar.formatDate） #

在eventRender回调里添加判断逻辑：

eventRender: function(event, element) {
  element.qtip({
    content: {
      text: function() {
        // 格式化开始时间（你的原有代码可以保留）
        const startTime = $.fullCalendar.formatDate(event.start, 'h:mm a ddd');
        
        // 处理结束时间：先判断是否存在
        let endTime;
        if (event.allDay) {
          // 全天事件直接显示"全天"
          endTime = '全天';
        } else if (event.end) {
          // 有结束时间则格式化
          endTime = $.fullCalendar.formatDate(event.end, 'h:mm a ddd');
        } else {
          // 无结束时间显示提示
          endTime = '无结束时间';
        }
        
        return `<strong>开始时间:</strong> ${startTime}<br><strong>结束时间:</strong> ${endTime}`;
      }
    }
    // 其他qTip配置...
  });
}

情况2：FullCalendar v4+版本（使用event.start.format()） #

如果你的FullCalendar版本是v4及以上，事件对象的API有变化，需要调整为：

eventRender: function(info) {
  $(info.el).qtip({
    content: {
      text: function() {
        const startTime = info.event.start.format('h:mm a ddd');
        let endTime;
        
        if (info.event.allDay) {
          endTime = '全天';
        } else if (info.event.end) {
          endTime = info.event.end.format('h:mm a ddd');
        } else {
          endTime = '无结束时间';
        }
        
        return `<strong>开始时间:</strong> ${startTime}<br><strong>结束时间:</strong> ${endTime}`;
      }
    }
    // 其他qTip配置...
  });
}

为什么会出现event.end is null？ #

• 全天事件：FullCalendar对于allDay: true的事件，默认只会设置start属性，end会被内部计算为start + 1天，但不会直接暴露在事件对象中（或者在某些场景下为null）。
• 未设置结束时间的事件：如果手动创建事件时只指定了start而没有end，event.end自然就是null。

额外优化建议 #

如果希望所有事件都有明确的结束时间，可以在事件数据源层面统一处理：

// 假设你的事件数组是eventsArray
const processedEvents = eventsArray.map(event => {
  if (!event.end && !event.allDay) {
    // 给无结束时间的非全天事件设置默认结束时间（比如开始时间+1小时）
    event.end = $.fullCalendar.addHours(event.start, 1); // v3版本
    // v4+版本用：event.end = event.start.clone().add(1, 'hour');
  }
  return event;
});

// 然后把processedEvents传给FullCalendar的events选项

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