How to show embedded google calendar (XML feed) in timezone of browser

Question

Edit: I got this to work, here is an example. I just need to figure out how to automatically update the timezone based on the browser. Any ideas?

I have followed a tutorial to create a better embedded calendar view of my Google calendar.

Basically it uses the XML feed of my public Google calendar and Fullcalendar library to recreate a customisable, embeddable calendar.

I'm looking for a crafty way to use the timezone of the user's browser to correctly display events in their time zone, and not just the one that the calendar is set in.

Is there any way to trick Google into serving an XML feed in the user's time zone, or perhaps javascript to update the values?

Currently the Calendar is in UTC, and the events, radio shows, may be in any number of time zones.

Edit: I noticed there is non dynamic timezone support in the latest version of Fullcalendar here. Although I'm using an older version from the tutorial. I'm going to try to upgrade and then perhaps use PHP to select the time zone on the page load.

The desired outcome is that users see relevant information, no matter which country they view the page from. Here is my attempt.

I added the below javascript, that was in the tutorial example. But it doesn't seem to be sourcing my calendar XML. I'm yet to address the PHP auto update.

var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            // DAFFY FOR GAFE TUTORIAL Shared Calendar 
            // PUT THE URL TO YOUR SHARED GOOGLE CALENDAR XML FEED BETWEEN THESE SINGLE QUOTES
            // AND MAKE SURE TO USE https INSTEAD OF PLAIN OLD http
            events: 'https://www.google.com/calendar/feeds/mn3q9f8ncup1mhcsvd9t8q5t1s%40group.calendar.google.com/public/basic',

            loading: function(bool) {
                if (bool) {
                    $('#loading').show();
                }else{
                    $('#loading').hide();
                }
            }
        });

Note I also added <script src='../fullcalendar/gcal.js'></script> in the head. The data in the new demo seems to come from a json array

// Read and parse our events JSON file into an array of event data arrays. $json = file_get_contents(dirname(__FILE__) . '/../json/events.json'); $input_arrays = json_decode($json, true);

The demo data in events.json looks like...

[
  {
    "title": "All Day Event",
    "start": "2014-09-01"
  },
  {
    "title": "Long Event",
    "start": "2014-09-07",
    "end": "2014-09-10"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2014-09-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2014-09-16T16:00:00-05:00"
  }
]