1

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

https://jsfiddle.net/9y8ecw1q/

4

3 回答 3

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);
  });

});
于 2019-10-24T13:40:42.260 回答
2

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

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

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

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

于 2018-02-18T15:10:16.840 回答
0

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

于 2018-02-18T15:16:42.633 回答