Поддержка часового пояса пользователя во встроенном календаре Google

Код для вставки Календаря Google вставляет в URL переменную "ctz", чтобы установить соответствующий часовой пояс, однако я работаю с более чем 500 пользователями на глобальном веб-сайте и стараюсь, чтобы все четко планировали (не платящие изучающие язык, иначе я бы просто нанял специалиста).

У кого-нибудь есть совет, как установить часовой пояс пользователя на основе его IP-адреса? Я уже просмотрел вопросы довольно широко в течение дня.

Источник

3 ответа

Используйте библиотеку JSTZ, например, через cdnjs, включив тег script в подобное

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>

Затем поместите тег сценария непосредственно перед закрывающим тегом, который:

  1. Тэги контейнера встроенного календаря iframe с идентификатором типа "calendar-container"
  2. Разбивает встроенный код iframe на два сегмента вокруг параметра часового пояса в URL
  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>
Источник

Ваше решение прекрасно сработало. Мой последний код был таким

HTML (из ответа Marek Rzewuski): 

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

JavaScript (изменено из ответа sheive): 

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

Я просто собрал все соответствующие ответы на этой странице.

Источник

Кто-то предложил взять библиотеку JavaScript под названием JSTZ и динамически добавить ее в код для вставки Календаря Google. К счастью, похоже, что в Календаре Google используются те же стандартизированные коды часовых поясов IANA, что и в браузерах (да, хорошие данные!), Что позволяет избежать массивного оператора SWITCH.

var timezone = jstz.determine (); timezone.name (); "Америка / Триатлон"

Но я до сих пор не могу понять, как это сделать. Может ли кто-нибудь помочь пройти эту последнюю милю?

Источник

Работает отлично. Должны добавить:

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

в HTML

Источник
Другие вопросы по тегам