FullCalendar JS - select callback passes start and end dates in wrong timezone

Question

I was trying to insert selected event to DB and I noticed that time I select in calendar is different than passed to AJAX. select callback passes "start" and "end" dates with different timezones than the calendar is set to.

My calendar settings:

$calendar.fullCalendar({
    header: {
        left: 'prev, today, next',
        center: 'title',
        right: 'agendaWeek, agendaDay'
    },
    timezone: 'Australia/Sydney',
    defaultView: 'agendaWeek',
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
        var startDate = new Date(start);
        var endDate = new Date(end);
        console.log(startDate);
        console.log(startDate);

        // ajax to insert event to DB

    },
    // other configurations
});

Now my dumped startDate and endDate looks like:

Mon Nov 14 2016 08:00:00 GMT+0100

Which is not Australia/Sydney that calendar is set to, so I am saving wrong start and end dates in DB. I kinda feel that this is problem with new Date() that generates given timestamp with default timezone and not the one that calendar is set to.

Anyone knows the solution?

You might have to use UTC to adjust for any different region: http://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/ - you can also take a look at http://momentjs.com/timezone/ — webdad3, Nov 18 '16 at 16:28

fanfavorite · Accepted Answer · 2016-11-21T14:45:01.560

0

Start and end dates are moment objects. They are no longer in the current time zone though, so you must clone the object, apply the time zone and add the offset difference.

select: function(start, end) {
    var startClone = start.clone();
    startClone.tz('Australia/Sydney');
    startClone.add(start.utcOffset() - startClone.utcOffset(), 'minutes');
    console.log(startDate.format());
}

edited Nov 21 '16 at 14:45

answered Nov 18 '16 at 16:32

fanfavorite

5,128
1
31
58

I tried running this: `moment(start).tz('Australia/Sydney').format()` so now if I select from 7:00 to 8:00 it's not that moment assigns timezone to this hour, but instead converts 7:00 with that timezone which is 18:00. All I need that 7:00 would be `Australia/Sydney` timezone – Ignas Damunskis Nov 21 '16 at 09:21
I found how to shift time here: http://stackoverflow.com/questions/28593304/same-date-in-different-time-zone/28615654#28615654 if you update your answer I will mark as correct, since you gave me the reight path to work with moment. – Ignas Damunskis Nov 21 '16 at 09:42
I have updated the answer to calculate the offset. Glad you were able to figure it out. – fanfavorite Nov 21 '16 at 14:40

score 0 · Answer 2 · answered Nov 21 '16 at 15:02

The problem is with using new Date().

new Date(), by default, operates on the browser timezone on which application is running, WITHOUT considering the timezone you are running in the app or the timezone that the user has set in the profile(if it's applicable in your case).

For multi-timezone applications, moment and moment-timezone are the best choice

FullCalendar JS - select callback passes start and end dates in wrong timezone

2 Answers2