フルカレンダーのイベント時間がクロムとサファリブラウザで1時間追加されます

Question

Jquery fullcalendar 3.3.1 & moment.js 2.15.1を使用しています。イベントカレンダーを表示するには、イベントのクリック時に、イベントの詳細を示すモーダルポップアップが表示されます。イベントの詳細はSQLデータベースに格納され、ajaxを使用してWebメソッドEventList.aspx/GetEventsを使用してイベントを設定します。

Chromeの& Safariブラウザでは、予定時刻が1時間先に表示される以外はすべて正常に動作しています。

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

JSONデータとして：

<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レコードを返します。私は

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

カレンダーコードとして日付&時間をフォーマットするmoment.jsを使用しています

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オブジェクトを受け入れないことについて間違っていました。私は私の答えのその部分を削除し、2番目の部分で精緻化しました。これは本当の問題です。

これは少しトリッキーです。 moment.utc(somedate)は、現地の日付ではなく、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')); 

注意点としてあなたの$.map()で

event.start = item.StartDate; 

を正常に動作する必要があります：単純に使用することは、2017-10-20T09:30:00のような文字列が正常に動作する必要がありますので、それから日付を生成する必要はありません - JSONはFullcalendarのためにすでに適しています。