javascript - FullCalendar 的时区无法正常工作

Question

仍在摆弄 FullCalendar。我试图弄清楚为什么当 dayClick 事件被触发时，当我尝试将 dateTime 参数设置为本地和 UTC 时，dateTime 参数本身仍然处于 GMT。这基本上落后了一整天。我将点击 3 月 19 日，日期时间为 3 月 18 日。

这是我的日历配置和我的 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)
        };
     };

我也试过调整“timezone”、“utc”和“ignoreTimezone”属性，但不行。我看到有人说这是我的操作系统时钟的问题，因为那是时间的来源，但我认为这里不是这种情况。有任何想法吗？我已经达到顶峰并且没有运气。提前致谢!

Answer 1

我在使用带有 MySQL 数据库的 FullCalendar V2.3.1、JQuery V1.11.2、Moment V2.10.2 和 moment-timezone V0.3.1 时遇到了同样的问题。

问题出在事件开始日期和结束日期的数据类型上。我一直将它们存储为 dateTime。当我改为将它们存储为时间戳时，它开始工作了。以下是我的代码的重要元素的摘录。希望对您有所帮助。

$('#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'
        });