FullCalendar事件结束日期显示为时间戳，需转换为YYYY-MM-DD格式

问题原因 #

FullCalendar在处理传入的日期字符串时，会自动将其解析为Moment对象（或原生Date对象）。在eventRender中直接拼接event.end时，对象会被隐式转换为时间戳；而点击事件中alert(event.end)时，Moment对象会自动调用toString方法输出可读日期，因此出现显示差异。

解决方案 #

方法一：使用Moment.js格式化日期 #

利用你代码中已引入的Moment.js，在eventRender里对event.end进行格式化：

修改eventRender部分代码：

eventRender: function(event, element, view) { 
    // 用moment格式化日期为YYYY-MM-DD格式
    var endDate = moment(event.end).format('YYYY-MM-DD');
    element.find('.fc-title').append(" <b>" + endDate +"</b>");
    element.bind('click', function() {
        alert(event.end);
    });
}

方法二：保留原始日期字符串 #

在构建事件数组时，额外存储一份从接口获取的原始日期字符串，避免重复格式化：

修改事件推入的代码：

$.each(result, function (i, item) {
    events.push({
        event_id: result[i].event_id,
        title: result[i].title,
        start: result[i].start,
        end: result[i].end,
        originalEnd: result[i].end, // 新增字段存储原始日期字符串
        //color: result[i].color,
        url: result[i].url
    });  
})

然后在eventRender中直接使用这个原始字段：

eventRender: function(event, element, view) { 
    element.find('.fc-title').append(" <b>" + event.originalEnd +"</b>");
    element.bind('click', function() {
        alert(event.end);
    });
}

完整修改后的代码示例（以方法一为例） #

$.ajax({
   url: 'display_event.php',  
   dataType: 'json',
   success: function (response) {
        
   var result=response.data;
   var events = []; // 声明events数组，避免全局变量问题
   $.each(result, function (i, item) {
       events.push({
           event_id: result[i].event_id,
           title: result[i].title,
           start: result[i].start,
           end: result[i].end,
           //color: result[i].color,
           url: result[i].url
       });  
   })
   var calendar = $('#calendar').fullCalendar({
       defaultView: 'month',
        timeZone: 'local',
       editable: true,
       selectable: true,
       selectHelper: false,
       select: function(start, end) {
               $('#event_start_date').val(moment(start).format('YYYY-MM-DD'));
               $('#event_end_date').val(moment(end).format('YYYY-MM-DD'));
               $('#event_entry_modal').modal('show');
           },
          
       events: events,
       eventRender: function(event, element, view) { 
           var endDate = moment(event.end).format('YYYY-MM-DD');
           element.find('.fc-title').append(" <b>" + endDate +"</b>");
           element.bind('click', function() {
               alert(event.end);
           });
       }
       }); //end fullCalendar block 
     },//end success block
     error: function (xhr, status) {
     alert(response.msg);
     }
   });

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