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?

Answer 1

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