完整的日历活动时间在chrome和safari浏览器上增加了一个小时

Question

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

除了Chrome&Safari浏览器。我正在使用moment.js来格式化Date&时间作为

$('#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"

使用转换DateTime

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/local标志或修改来显示时间戳，只需使用您的格式：

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

顺便注意一下，JSON中的日期字符串已经适合Fullcalendar了——像2017-10-20T09:30:00这样的字符串应该可以正常工作，所以不需要从中生成日期，只需使用：

event.start = item.StartDate;

在您的$.map()中应该可以正常工作。