Question

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

https://jsfiddle.net/9y8ecw1q/

Answer 1

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

在＆＃39;时区字符串下，看看2）（以粗体显示，但不是真正强烈分隔，以便轻松看到......）

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

这里的关键是，为了实现这一点，您必须使用服务器端脚本。

Answer 2

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

Answer 3

我已经在这个问题上苦苦挣扎了数周。.我已经弄清楚了如何使其在客户端中起作用，以便可以在任何时区中显示新事件而无需任何服务器调用。

您需要按顺序包括四个时刻的时区插件，其中两个来自即时站点，两个来自完整日历站点。

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

});

FullCalendar - 时区不起作用

3 个答案: