Javascript 支持嵌入式谷歌日历中的用户时区

Google Calendar的嵌入代码在URL中插入一个“ctz”变量来设置适当的显示时区，但是我在一个全球网站上与500多名用户合作，并试图让每个人都清楚地了解日程安排（非付费语言学习者，否则我只会聘请专家）

---

有人对如何根据IP地址设置用户时区有什么建议吗？这一天我已经广泛地浏览了这些问题。

有人建议使用一个名为JavaScript的库，并将其动态添加到Google Calendar的嵌入代码中。幸运的是，谷歌日历似乎使用了与浏览器相同的标准化IANA时区代码（很好的数据！），从而避免了大量的切换语句

var timezone=jstz.determine（）； timezone.name（）； “美国/纽约”

但我还是不知道该怎么做。有人能帮你跑完最后一英里吗？

使用该库，例如通过cdnjs，在类似文件中包括一个脚本标记

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

然后在结束标记之前放置一个脚本标记：

使用id标记嵌入式日历iframe的容器，如 “日历容器”

将iframe嵌入代码分成两段 在url中的时区参数周围

从JSTZ获取时区名称

将容器的innerHTML设置为重建的iframe标记

因此，如果您的日历嵌入iframe标记如下所示：

<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>

您的脚本如下所示：

<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>

var timezone=jstz.determine（）；
var pref=''；
var iframe_html=pref+timezone.name（）+suff；
document.getElementById（'calendar-container'）。innerHTML=iframe\uHTML；

工作正常。必须补充：

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

---

在html中，您的解决方案工作得非常好。我最后的代码是这样的

HTML（来自）：

JavaScript（修改自）：

var timezone=encodeURIComponent（jstz.determine（）.name（））；
var pref=''；
var iframe_html=pref+时区+suff；
document.getElementById（'calendar-container'）。innerHTML=iframe\uHTML；

我只是把所有相关的答案放在这一页上

或者，有了ES2015，没有不必要的JSTZ依赖关系：

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

const timezone=Intl.DateTimeFormat（）.resolvedOptions（）.timezone
常量html=``
document.getElementById（'calendar-container'）。innerHTML=html；

由于我使用的是SquareSpace（没错，我知道它不是每个人都喜欢的…），PHP和Rails无法集成。在下面的答案中发布其他信息。请您指定您所说的工作正常，以及您将在何处添加div id？回答“sheive”工作正常：“使用JSTZ库，例如通过cdnjs，通过在类中包含脚本标记…”等等。但您已经添加了HTML行：这太棒了。我建议你提到添加

，就像@Marek Rzewuski所说的，我也会对时区进行uri编码

var timezone=encodeURIComponent（jstz.determine（）.name（））；var iframe_html=pref+时区+suff就像一个魅力！如果您想看到我将此添加到网站的PR，请查看：我对此页面不熟悉，并且看到我的最后一个问题已被删除，与在匿名windows上应用此解决方案有关（日历未显示在那里）。为什么会这样？通过使用var timezone=console.log（Intl.DateTimeFormat（）.resolvedOptions（）.timezone），我消除了对库jstz的需要
<script type="text/javascript" src="//cdnjs.cloudflare.com/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.com/calendar/embed?mode=agenda&src=somecalendaridentifier%40group.calendar.google.com&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>

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