Timezone not working properly for FullCalendar

Question

still messing around with FullCalendar. I'm trying to figure out why it is that when the dayClick event is fired off, the dateTime param itself is still in GMT when I've tried setting it to local and UTC. It's essentially a full day behind. I'll click on say March 19th, and the dateTime will be March 18th.

Here's my calendar config and my dayClick events:

     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)
        };
     };

I've tried adjusting the "timezone", "utc" and the "ignoreTimezone" properties as well, no go. I have seen some people are saying it's an issue with my OS clock as that's where the time is coming from, but I don't feel that's the case here. Any ideas? I've peaked around and have had no luck. Thanks in advance!

Answer 1

I was having the same issue using FullCalendar V2.3.1, JQuery V1.11.2, Moment V2.10.2, and moment-timezone V0.3.1 with a MySQL database.

The problem was the data type of the start and end dates of the event. I had been storing them as dateTime. When I changed to storing them as timeStamps it started working. Below is an excerpt of the important elements of my code. Hope this helps you.

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