i've been wrestling with this for a while now, so reaching out for a bit of help please.

I have a realtime multi timezone application that uses Signal R, all datetimes are stored and broadcast using UTC and I want to manipulate them client side to avoid multiple broadcasts for the different users if one appointment is updated.

I'm trying to get fullcalendar to display the dates in the appropriate timezone for the user, its not based on the browser but a local string that is held when the user logs on.

is this even possible? or do i need to store offsets and do it that way (i was hoping to avoid this). I was using eventRender to manipulate but this is giving me other issues and have raise a bug.

My Code is:

   $(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", "timezone":"UTC","allDay":false,"url":null,"location":"","people":null,"className":"event-appointment"}],
            eventRender: function(event, el) {


                if (event.start.hasZone()) {
                    el.find('.fc-title').after(
                    $('<div class="tzo"/>').text(event.start.format('Z'))
                    );
                }

            }
        });
    }

    renderCalendar();

});  

i've been wrestling with this for a while now, so reaching out for a bit of help please.

I have a realtime multi timezone application that uses Signal R, all datetimes are stored and broadcast using UTC and I want to manipulate them client side to avoid multiple broadcasts for the different users if one appointment is updated.

I'm trying to get fullcalendar to display the dates in the appropriate timezone for the user, its not based on the browser but a local string that is held when the user logs on.

is this even possible? or do i need to store offsets and do it that way (i was hoping to avoid this). I was using eventRender to manipulate but this is giving me other issues and have raise a bug.

My Code is:

   $(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", "timezone":"UTC","allDay":false,"url":null,"location":"","people":null,"className":"event-appointment"}],
            eventRender: function(event, el) {


                if (event.start.hasZone()) {
                    el.find('.fc-title').after(
                    $('<div class="tzo"/>').text(event.start.format('Z'))
                    );
                }

            }
        });
    }

    renderCalendar();

});  

• javascript
• timezone
• fullcalendar
• momentjs

Share Improve this question Follow edited Jun 13, 2015 at 17:47 Matt Johnson-Pint 242k7575 gold badges465465 silver badges610610 bronze badges asked Jun 13, 2015 at 16:42 JGuymerJGuymer 8511 gold badge22 silver badges66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

FullCalendar's time zone documentation explains that named time zones are expected to be calculated on the server. While it supports tagging events with a time zone, it doesn't do any time zone conversion on the client-side. Unless this behavior changes in a future release, it doesn't fit the scenario you described.

However, that doesn't mean you're stuck. FullCalendar takes a dependency on moment.js, and there is an add-on for moment.js called moment-timezone. It is specifically designed to perform client-side time zone conversions using IANA time zone identifiers, such as the "Europe/Istanbul" one you show in your sample.

When you receive your event from the SignalR broadcast, you can use moment-timezone to convert from UTC to the desired zone before sending the result into the FullCalendar event object.

var s = moment("2015-06-11T11:00:00Z").tz("Europe/Istanbul").format();
// result: "2015-06-11T14:00:00+03:00"

A couple of additional points:

• Time zone data changes periodically, as the governments of the world change their minds about their offset and daylight saving time rules. Stay on top of updates by subscribing to the IANA Time Zone Announcements mailing list. It's reasonable to expect updates from any time zone library within a week or so of an IANA release.

• Since you are using SignalR, I assume your back end must be .NET. The FullCalendar documentation shows using PHP as a back end, which already has support for IANA time zones. However, in .NET you can use Noda Time for the same functionality.