Il fuso orario non funziona correttamente per FullCalendar

Question

ancora in disordine con FullCalendar. Sto cercando di capire perché è quando l'evento dayClick viene sparato, il parametro dateTime è ancora in GMT quando ho provato a impostarlo su local e UTC. È essenzialmente una giornata intera alle spalle. Farò clic su diciamo il 19 marzo e la data sarà il 18 marzo.

Ecco il mio calendario di configurazione ed i miei eventi dayClick:

 vm.uiConfig = { 
     calendar: { 
      height: 350, 

      editable: false, 
      draggable: false, 
      selectable: true, 
      selectHelper: true, 
      unselectAuto: false, 
      disableResizing: false, 
      droppable: false, 
      handleWindowResize: true, 
      timezone: "local", 
      ignoreTimezone: false, 
      header: { 
       left: "title", 
       center: "", 
       right: "today prev,next" 
      }, 

      dayClick: vm.dayClick 
     } 
    }; 

    vm.dayClick = function(dateTime, jsEvent, view) 
    { 
     // change the day's background color just for fun 
     if (vm.previousCell) 
      vm.previousCell.css("background-color", vm.previousCellCSS); 

     vm.previousCell = $(this); 
     vm.previousCellCSS = vm.previousCell.css("background-color"); 
     vm.previousCell.css("background-color", "lightgrey"); 

     vm.selectedDate = { 
      date: new Date(dateTime) 
     }; 
    }; 

Ho provato la regolazione della proprietà "ignoreTimezone" "fuso orario", "UTC" e pure, non andare. Ho visto alcune persone dire che è un problema con il mio orologio OS in quanto è da lì che arriva il momento, ma non credo che sia il caso qui. Qualche idea? Ho raggiunto il picco e non ho avuto fortuna. Grazie in anticipo!

Answer 1

Avevo lo stesso problema utilizzando FullCalendar V2.3.1, JQuery V1.11.2, Moment V2.10.2 e moment-timezone V0.3.1 con un database MySQL.

Il problema era il tipo di dati delle date di inizio e di fine dell'evento. Li stavo conservando come data. Quando ho deciso di archiviarli come timeStamps ha iniziato a funzionare. Di seguito è riportato un estratto degli elementi importanti del mio codice. Spero che questo ti aiuti.

$('#calendar').fullCalendar({ 
     events: function(start, end, timezone, callback) { 
      $.ajax({ 
       url: '/s/calendar_eventdata.php', 
       method: 'POST', 
       dataType: 'json', 
       data: 'uid=' + uidArray + '&start=' + start + '&end=' + end, 
       success: function(userData) { 
        var user_count = userData.length; 
        var eventData = []; 
        // Assemble the event objects 
        for (var i = 0; i < user_count; i++) 
        { 
         var uid = userData[i].uid; 
         var source = '/s/calendar_eventdata.php?e=' + userData[i].uid; 

         // Determine if the event is all day 
         var all_day = false; 
         if(userData[i].allDay === 1) 
         { 
          all_day = true; 
         } 

         // Add each source to a JSON feed object 
         eventData.push({ 
          source: source, 
          id: userData[i].eid, 
          eid: userData[i].eid, 
          p_eid: userData[i].p_eid, 
          uid: userData[i].uid, 
          p_uid: userData[i].p_uid, 
          etid: userData[i].etid, 
          typeIcon: userData[i].icon, 
          title: userData[i].title, 
          location: userData[i].location, 
          description: userData[i].description, 
          allDay: all_day, 
          start: moment.tz(userData[i].start_date, userData[i].saveTimezone).tz(deviceTimeZone), 
          end: moment.tz(userData[i].end_date, userData[i].saveTimezone).tz(deviceTimeZone), 
          saveTimezone: userData[i].saveTimezone, 
          duration: userData[i].duration, // todo: display as days, minutes, hours instead of only minutes 
          pharmaPropName: userData[i].pharmaPropName, 
          pharmaForm: userData[i].pharmaForm, 
          pharmaQuantity: userData[i].pharmaQuantity, 
          pharmaNotes: userData[i].pharmaNotes, 
          pharmaEntry: userData[i].pharmaEntry, 
          editable: true, 
          durationEditable: true, 
          backgroundColor: userData[i].cal_color, 
          borderColor: '#ffffff', 
          textColor: userData[i].txt_color 
          //error: function() { alert('There was an error loading calendar data.');} 
         }); 
        } 
        callback(eventData); 
       } 
      }); 
     }, 
     editable: true, 
     draggable: true, 
     resizeable: true, 
     theme: false, 
     selectable: true, 
     selectHelper: true, 
     unselectAuto: true, 
     eventStartEditable: true, 
     eventDurationEditable: true, 
     eventLimit: true, 
     defaultView: 'agendaWeek', 
     allDayDefault: false, 
     slotMinutes: 15, 
     snapMinutes: 15, 
     defaultEventMinutes: 30, 
     firstHour: 8, 
     timezone: deviceTimeZone, 
     year: moment.tz(deviceTimeZone).format("YYYY"), 
     month: moment.tz(deviceTimeZone).format("M"), 
     date: moment.tz(deviceTimeZone).format("DD"), 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     buttonText: { 
      month: 'Month', 
      agendaWeek: 'Week', 
      agendaDay: 'Day' 
     });