FullCalendar - 时区不起作用答案

【问题标题】：FullCalendar - Timezone does not workFullCalendar - 时区不起作用
【发布时间】：2019-10-24 21:40:42
【问题描述】：

我正在使用FullCalendar 来启动我的日历应用程序。我花了三个小时试图理解为什么 FullCalendar 会忽略我的时区设置。有趣的是，如果我将Europe/Moscow 更改为local，那么一切正常。是我做错了什么还是 FullCalendar 的错误？

https://jsfiddle.net/9y8ecw1q/

【问题讨论】：

您希望日历上的结果是什么，而不是显示的结果？这并不完全清楚。您的事件数据不包含任何时区信息。 fullcalendar.io/docs/timezone/timezone 谈到特定区域选项：“如果您存储事件的时区信息并且希望它们显示在可自定义的时区中，请使用此模式。”
如果您研究时区演示 fullcalendar.io/js/fullcalendar-3.8.2/demos/timezones.html 您会注意到，当通过下拉菜单更改时区时，日历会向服务器询问新的事件数据，并且服务器会重新发送事件数据开始/结束参数中的新时区偏移量。除非您这样做，否则您的时区设置将无效。

标签： jquery fullcalendar fullcalendar-3

【解决方案1】：

Fullcalendar docs告诉它，虽然有点难找....

在“时区字符串”下，查看 2)（以粗体显示，虽然不是很明显地分开以便于查看...）

2) 然后，您的服务器端脚本应该使用 timezone 参数来计算返回的 ISO8601 日期的时区偏移量！

这里的关键是，为了使其工作，您必须使用服务器端脚本。

【讨论】：

你的意思是日期时间应该已经在正确的时区？
不，它只是意味着，如果你想将这些设置为时区，你需要使用服务器端处理。使用“本地”是“常见的”，因为用户会在自己的时间看到日期（这通常最适合电话会议等），但如果您使用服务器端处理，您可能想要使用数据带时区。基本上，大多数实现都使用“本地”-其他选择是“特殊情况”，具体取决于您的整体设置等。

【解决方案2】：

我已经为这个问题苦苦挣扎了好几个星期了。我已经想出了如何让它在客户端中工作，这样一个新事件就可以在任何时区显示而无需任何服务器调用。

您需要包含四个时刻的时区插件，2 个来自时刻站点，2 个来自完整日历站点。

https://codepen.io/alexgrant999/pen/gOOWLdb?editors=0010

   document.addEventListener('DOMContentLoaded', function() {
  var initialTimeZone = 'UTC';
  var timeZoneSelectorEl = document.getElementById('time-zone-selector');
  var loadingEl = document.getElementById('loading');
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'momentTimezone','interaction', 'dayGrid', 'timeGrid', 'list' ],
    timeZone: initialTimeZone,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    selectable: true,
    eventLimit: true, // allow "more" link when too many events
    events: 'https://fullcalendar.io/demo-events.json',

    select: function(info)
                    {

          thestart = calendar.addEvent({
          title: "Session",
          //constraint: 'businessHours',
          start: info.start,
          end: info.end

          });


                    },

    loading: function(bool) {
      if (bool) {
        loadingEl.style.display = 'inline'; // show
      } else {
        loadingEl.style.display = 'none'; // hide
      }
    },

    eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }
  });

  calendar.render();

  // load the list of available timezones, build the <select> options
  // it's highly encouraged to use your own AJAX lib instead of using enter code hereFullCalendar's internal util
  FullCalendar.requestJson('GET', 'https://fullcalendar.io/demo-timezones.json', {}, function(timeZones) {
    timeZones.forEach(function(timeZone) {
      var optionEl;

      if (timeZone !== 'UTC') { // UTC is already in the list
        optionEl = document.createElement('option');
        optionEl.value = timeZone;
        optionEl.innerText = timeZone;
        timeZoneSelectorEl.appendChild(optionEl);
      }
    });
  }, function() {
    // failure
  });

  // when the timezone selector changes, dynamically change the calendar option
  timeZoneSelectorEl.addEventListener('change', function() {
    calendar.setOption('timeZone', this.value);
  });

});

【讨论】：

【解决方案3】：

我也为此苦苦挣扎。 FullCalendar 在内部使用moment.js。每当事件的日期被序列化以存储时，即使用 PHP 应用程序，您需要知道时间是 GMT/UTC。然后，您可以将其转交给您当地的 TZ。与此相反，FullCalendar 期望浏览器中设置的任何日期，即从浏览器 TZ 中的 ajax 调用中挑选的数据创建事件。

【讨论】：