Calendrier complet événement temps ajoutant une heure sur le navigateur chrome et safari

Question

J'utilise Jquery fullcalendar 3.3.1 & moment.js 2.15.1. Pour afficher le calendrier des événements et le clic sur l'événement, celui-ci affiche le pop-up modal avec les détails de l'événement. Les détails des événements sont stockés dans la base de données SQL et en utilisant ajax pour remplir les événements à l'aide de la méthode Web EventList.aspx/GetEvents.

Tout fonctionne comme prévu, sauf que l'heure de l'événement s'affiche 1 heure à l'avance dans Chrome & Navigateur Safari. J'utilise moment.js pour formater la date & temps

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

Code Calendrier:

<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> 

méthode Web renvoie les enregistrements dans SP:

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

données JSON comme:

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

conversion DateTime en utilisant

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

modales pop-up montre:

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

Answer 1

Merci à À JOUR @ADyson pour signalais que je me suis trompé sur Fullcalendar ne pas accepter le Javascript natif des objets de date. J'ai supprimé cette partie de ma réponse et j'ai développé la deuxième partie, qui est le vrai problème.

C'est un peu difficile. moment.utc(somedate) indique à Moment que somedateest une date UTC, plutôt qu'une date locale (ce qu'elle supposerait sinon). Il ne convertit pas la date en UTC, il la marque simplement comme déjà dans 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 

Le "Z" dans les résultats indique les horodatages UTC. Mais note pour a, l'heure n'a pas changé, c'est toujours l'heure locale, juste incorrectement marqué comme étant UTC. Si vous utilisez ensuite a.local(), vous passez à l'heure locale, mais comme il est déjà locale, il sera hors de votre décalage par rapport à UTC locale:

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 

(Le a.local() résultat affiché est pour mon fuseau horaire local, UTC +2 Comme vos résultats sont désactivés d'une heure, vous devez être en UTC + 1 et vous verrez 2017-10-20T10:30:00+01:00).

Donc, dans votre eventClick(), vous ne avez pas besoin de drapeaux utc/locaux ou modification pour afficher l'horodatage, il suffit d'utiliser la mise en forme:

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

Comme une note de côté, notez que les chaînes de date dans votre JSON sont déjà appropriés pour Fullcalendar - une chaîne comme 2017-10-20T09:30:00 devrait fonctionner correctement, il n'y a donc pas besoin de générer une date de celui-ci, en utilisant simplement:

event.start = item.StartDate; 

dans votre $.map() devrait fonctionner correctement.