全日历事件时间在Chrome浏览器和Safari浏览器上添加一小时

Question

我正在使用Jquery fullcalendar 3.3.1 & moment.js 2.15.1。要显示事件日历和事件点击，它会显示带有事件详细信息的模式弹出窗口。事件详细信息存储在SQL数据库中，并使用ajax使用Web方法EventList.aspx/GetEvents填充事件。

除了事件时间在Chrome浏览器中显示1小时前，所有事情都按预期工作。& Safari浏览器。我使用moment.js格式化日期&时间

$('#msDate').html(moment.utc(calEvent.start).local().format('DD-MM-YYYYHH:mm')); 

日历代码：

<script type = "text/javascript"> 
    jQuery(document).ready(function() { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json;charset=utf-8", 
     data: "{}", 
     url: '<%= ResolveUrl("EventList.aspx/GetEvents")%>', 
     dataType: "json", 
     success: function(data) { 
     $('#fullcal').fullCalendar({ 
      eventClick: function(calEvent, jsEvent, view) { 
      $('#eid').html(calEvent.id); 
      $('#modalTitle').html(calEvent.title); 
      $('#msDate').html(moment.utc(calEvent.start).local().format('DD-MM-YYYY HH:mm')); 
      $('#meDate').html(moment.utc(calEvent.end).local().format('DD-MM-YYYY HH:mm')); 
      $('#mloc').html(calEvent.loc) 
      $('#mdesc').html(calEvent.des) 
      $('#url').attr('href', 'Meetings/Meeting.aspx?ID=' + calEvent.id) 
      $('#fullCalModal').modal(); 
      }, 
      header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,basicWeek,basicDay' 
      }, 
      views: { 
      month: { // name of view 

       columnFormat: 'ddd', 
      }, 
      week: { // name of view 
       titleFormat: 'MMMM D , YYYY', 
       columnFormat: 'ddd D/M', 
      }, 
      day: { // name of view 
       titleFormat: 'MMMM DD YYYY', 
       columnFormat: 'ddd D-M-YYYY', 
      } 
      }, 
      displayEventTime: false, // hide event time 
      eventLimit: true, // allow "more" link when too many events 
      events: $.map(data.d, function(item, i) { 
      var event = new Object(); 
      event.id = item.EventID; 
      event.title = item.EventName; 
      event.start = new Date(item.StartDate); 
      event.end = new Date(item.EndDate); 
      event.loc = item.Location; 
      event.des = item.Description; 
      return event; 
      }), 
     }); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
     debugger; 
     } 
    }); 
    }); 
</script> 

Web方法返回SP记录：

1111 ABCD 2017-10-20T09:30:00 2017-10-20T16:30:00 xxx 

JSON数据：

EndDate:"2017-10-20T16:30:00" 
EventID:1111 
EventName:"ABCD" 
Location:"xxx" 
StartDate:"2017-10-20T09:30:00" 

使用

CONVERT(VARCHAR(30),m.StartDate,126) AS startdate inside the SP. 

模式弹出显示日期时间转换：

starttime:20-10-2017 10:30 endtime:20-10-2017 17:30 

Answer 1

修订感谢@ADyson您指出我错Fullcalendar不接受本地JavaScript Date对象。我已经删除了我的答案的部分内容，并在第二部分详细阐述了这是真正的问题。

这有点棘手。 moment.utc(somedate)告诉Moment somedate是 UTC日期，而不是本地日期（否则它会假设）。它不会将日期转换为UTC，它只会标记为UTC已在。

var local = '2017-10-20T09:30:00',    // Local timestamp 
    m = new moment(local),      // Moment representing local time 
    a = moment.utc(local),      // Specify that 'local' is UTC 
    b = m.utc();        // Generate UTC time from local 

console.log('local', local);     // 2017-10-20T09:30:00 
console.log('m', m.format());     // 2017-10-20T09:30:00+02:00 
console.log('a', a.format());     // 2017-10-20T09:30:00Z 
console.log('b', b.format());     // 2017-10-20T07:30:00Z 

结果中的“Z”表示UTC时间戳。但注意a，时间没有改变，它仍然是当地时间，只是被错误地标记为UTC。如果再使用a.local()，你切换到本地时间，但因为它已经是本地的，它将会由您当地UTC的偏移量是关闭：

console.log('a.local()', a.local().format()); // 2017-10-20T11:30:00+02:00 
console.log('b.local()', b.local().format()); // 2017-10-20T09:30:00+02:00 

（显示的a.local()结果是我的本地时区，UTC +2。由于您的结果已关闭1小时，因此您必须使用UTC + 1，并且您将看到2017-10-20T10:30:00+01:00）。

因此，在你eventClick()，你不需要任何UTC /本地标志或修改显示的时间戳，只需使用您的格式：

$('#msDate').html(calEvent.start.format('DD-MM-YYYY HH:mm')); 

作为一个侧面说明，注意在日期字符串你JSON已经适合Fullcalendar - 像2017-10-20T09:30:00字符串应该可以正常工作，所以没有必要产生从它的日期，只需使用：

event.start = item.StartDate; 

在 $.map()

应该正常工作。