全日曆事件時間在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()

應該正常工作。