FullCalendar中allDay=false事件未修改却出现end date为null的问题求助

我仔细看了你的代码和描述，发现问题出在getAgendaWorktime函数里的日期计算逻辑错误，再加上旧版Chrome对Date对象的处理比较严格，导致生成的end日期无效，FullCalendar最终将其识别为null。

具体问题点 #

看这段有问题的代码：

r.end.setHours(r.end.setHours()+($elapsed*60));

setHours()方法返回的是时间戳（毫秒数），你把这个时间戳再次传给setHours()，相当于给小时数设置了一个超大的数值（比如当$elapsed=60时，就是8+3600=3608小时），这会直接生成无效的Date对象。FullCalendar在解析无效日期时，就会把end字段设为null。

另外，你的$elapsed参数是分钟数（比如60、120），但你直接乘以60当成小时数来计算，这也是逻辑错误——应该直接给日期添加对应的分钟数。

修复方案 #

修改getAgendaWorktime函数里的end日期计算逻辑，用正确的方式添加分钟数：

jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
  var r = {
    allDay: false,
    title: 'free time',
    start: new Date('2000-01-02 '+$start),
    end: new Date('2000-01-02 '+$start)
  };
  r.start.setDate(r.start.getDate()+$dow);
  r.end.setDate(r.end.getDate()+$dow);
  // 正确添加分钟数：直接使用setMinutes方法累加$elapsed
  r.end.setMinutes(r.end.getMinutes() + $elapsed);
  return(r);
}

另外，建议你在select事件里直接传递moment对象，而不是格式化后的字符串，这样FullCalendar能更准确地解析日期：

select: function(startDate, endDate) {
  $('#calendar').fullCalendar('renderEvent', {
    title: 'free time',
    start: startDate, // 直接使用moment对象
    end: endDate,     // 直接使用moment对象
    allDay: false
  });
}

为什么视图显示正常？ #

FullCalendar在渲染时，可能会自动用start日期加上默认时长来展示事件，但实际存储的end日期已经是无效状态，所以调用clientEvents时会返回null。

关于旧版浏览器的影响 #

旧版Chrome（57）对Date对象的错误处理不像新版浏览器那样宽容，所以这个问题在旧版环境里暴露得更明显，修复逻辑后应该就能解决你的困扰。

你可以试试修改后的代码，clientEvents里的end字段应该就能正常返回了。

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