FullCalendar - Timezone does not work

Question

I am using FullCalendar to power up my calendar app. And I have spent three hours trying to understand why FullCalendar would ignore my timezone setting. The interesting thing is that if I change Europe/Moscow to local, then everything works. Is there something I am doing wrong or is this a bug of FullCalendar ?

https://jsfiddle.net/9y8ecw1q/

Answer 1

I have been struggling with this problem for weeks.. I have figured out how to make it work in the client so that a new event can be displayed in any timezone without any server calls..

You need to include the four-moment timezone plugins, 2 from the moment site and 2 from the full calendar site in this order.

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

});

Answer 2

Fullcalendar docs tell it, though it is a bit hard to find....

Under 'Timezone string, look at 2) (in bold, though not really strongly separated to easily see...)

2) Your server-side script is then expected to use the timezone parameter to calculate the timezone offset of the returned ISO8601 dates!

The key thing here is that, in order for this to work, you must be using server-side scripts.