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

Question

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

有人对如何根据用户的 IP 地址设置用户的时区有建议吗？我已经在一天中广泛地扫描了这些问题。

Answer 1

使用 JSTZ 库，例如通过cdnjs在like中包含一个脚本标签

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

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

1. 使用 id 标记嵌入式日历 iframe 的容器 '日历容器'
2. 将 iframe 嵌入代码分成两段 围绕网址中的时区参数
3. 从 JSTZ 获取时区名称
4. 将容器的 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>

Answer 2

您的解决方案非常有效。我的最终代码是这样的

HTML（来自Marek Rzewuski'sanswer）：

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

JavaScript（修改自sheive'sanswer）：

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

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

或者，使用 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>

Answer 3

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

var timezone = jstz.determine(); 时区名称（）； “美国/纽约”

但我仍然不知道如何完成这项工作。有人可以帮助完成最后一英里吗？

Answer 4

工作正常。必须补充：

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

在html中