Fullcalendar - Date/Time not being correctly displayed on eventRender

513 Views Asked by At

I have a realtime multi timezone application that uses Signal R, all datetimes are broadcast using UTC and manipulated to the correct Timezone using moment timezone. The reason for this is because if we had many people logged on using different timezones, we would have to broadcast each update to the individuals already displaying the correct date time for that person, as oppopsed to 1 broadcast and manipulated client side. The timezone is stored as a string when the user logs in and is not reliant on the browser.

As i understand it FullCalendar will not manipulate the datetime using Timezone(i could be wrong). I checked out the example on your site and all the dates in the JSON are already converted which is not an option for me.

The route i have taken is to manipulate the dates in the eventRender.

The problem is that when you load for the first time the calendar displays them in UTC, if you change views it corrects it to the right date time. See the below fiddle, it loads as 11am then if you swap views it displays as 2pm which is the desired time. Ive used Istanbul as an example.

http://jsfiddle.net/JGuymer/oa4ahubo/6/

$(document).ready(function() {
    function renderCalendar() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            timezone: 'Europe/Istanbul',
            eventLimit: true, // allow "more" link when too many events
            events: [{"id":1026,"taskTypeId":4,"title":"(New Appointment)","start":"2015-06-11T11:00:00Z","end":"2015-06-11T12:00:00Z","allDay":false,"url":null,"location":"","people":null,"className":"event-appointment"}],
            eventRender: function(event, el) {

                //console.log(event);
                event.start.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');
                event.end.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');


            }
        });
    }
    renderCalendar();
});

Is this the correct way of doing this? or is this a bug?

0

There are 0 best solutions below