Support User Time Zone in Embedded Google Calendar

Question

Google Calendar's embed code inserts a "ctz" variable in the URL to set the appropriate display time zone, however I'm working with more than 500 users on a global website and trying to keep everyone clear on scheduling (non-paying language learners, otherwise I'd just hire an expert).

Does anyone have advice on how to set the user's time zone based on their IP address? I've already scanned the questions quite extensively through the day.

Answer 1

Use the JSTZ library e.g. via cdnjs by including a script tag in the like

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.7/jstz.js"></script>

Then put a script tag just before the closing tag that:

1. Tags the container of the embedded calendar iframe with an id like 'calendar-container'
2. Breaks the iframe embed code into two segments around the timezone param in the url
3. Gets the timezone name from JSTZ
4. Sets the innerHTML of the container to that rebuilt iframe tag.

So if your calendar embed iframe tag looks like:

<iframe src="https://www.google.com/calendar/embed?showPrint=0&amp;showCalendars=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=somecalendaridentifier%40group.calendar.google.com&amp;color=%23AB8B00&amp;ctz=America%2FLos_Angeles" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

Your script would look like:

<script type="text/javascript">
  var timezone = jstz.determine();
  var pref = '<iframe src="https://www.google.com/calendar/embed?showPrint=0&amp;showCalendars=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=somecalendaridentifier%40group.calendar.google.com&amp;color=%23AB8B00&amp;ctz=';
  var suff = '" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>';
  var iframe_html = pref + timezone.name() + suff;
  document.getElementById('calendar-container').innerHTML = iframe_html;
</script>