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.

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.

• javascript
• google-calendar-api

Share Improve this question Follow asked Aug 5, 2015 at 1:29 EnglishTeacherEricEnglishTeacherEric 25955 silver badges1515 bronze badges 1

• Well since I'm using SquareSpace (right, I know it's not everybody's favorite...) PHP and Rails won't integrate. Posting additional info in the answer below. – EnglishTeacherEric Commented Aug 5, 2015 at 10:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

<script type="text/javascript" src="https://cdnjs.cloudflare./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./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.&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./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.&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>

Your solution has worked wonderfully. My final code was like this

HTML (from Marek Rzewuski's answer):

<div id="calendar-container"></div>

JavaScript (modified from sheive's answer):

<script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script type="text/javascript">
 var timezone = encodeURIComponent(jstz.determine().name()); 
 var pref = '<iframe src="https://calendar.google./calendar/embed?mode=agenda&src=somecalendaridentifier%40group.calendar.google.&ctz=';
 var suff = '" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>';
 var iframe_html = pref + timezone + suff;
 document.getElementById('calendar-container').innerHTML = iframe_html;
</script>

I simply put together all relevant answers on this page.

Or, with ES2015 and without the unneeded JSTZ dependency:

<script type="text/javascript">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone 
const html = `<iframe src="https://calendar.google./calendar/embed?mode=agenda&src=somecalendaridentifier%40group.calendar.google.&ctz=${timezone}" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>`
document.getElementById('calendar-container').innerHTML = html;
</script>

Someone suggested taking a JavaScript library called JSTZ and adding it dynamically to the embed code of Google Calendar. Fortunately, it appears the Google Calendar uses that same standardized IANA time zone codes as browsers (yay good data!) thus avoiding a massive SWITCH statement.

var timezone = jstz.determine(); timezone.name(); "America/New_York"

But I still can't figure out how to get this done. Can someone help take this past the last mile?

Works fine. Have to add:

<div id="calendar-container"></div>

in html