fullcalendar - 更改 GCal 事件的时区

Question

我有一个直接来自 Google 日历的事件的“列表”视图。Google 日历设置为“美国/中部”时区。我需要在“美国/东部”时区显示事件。

我找到了例子，但似乎无法让它们发挥作用。我正在提供我的基本代码，希望有人可以帮助我。

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
    defaultView: 'list',
    defaultDate: '2019-01-20',
    duration:  {
        days: 180
    },

      header: {
        left: '',
        center: 'title',
        right: ''
      },

      displayEventTime: true, // don't show the time column in list view
        height: 450,

      // THIS KEY WON'T WORK IN PRODUCTION!!!
      // To make your own Google API key, follow the directions here:
      // http://fullcalendar.io/docs/google_calendar/
      googleCalendarApiKey: 'REALKEY',

      // US Holidays
      events: 'REALCALENDAR',

      eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
      },

      loading: function(bool) {
        $('#loading').toggle(bool);
      }

    });

  });



</script>
<style>


  #loading {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>

目前，我的事件仅以 UTC 显示。

标签： fullcalendar

Answer 1

我想通了。

我必须同时添加 timezone 和 timezoneParam 才能让日历将时间调整到正确的时区。这是我删除了键的最终代码。

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
    defaultView: 'list',
    defaultDate: '2019-04-01',


    timezone: 'America/New_York',
    timezoneParam   : "America/New_York",


    duration:  {
        days: 7
    },

      header: {
        left: '',
        center: '',
        right: ''
      },

      displayEventTime: true, // don't show the time column in list view
        height: 450,

      // THIS KEY WON'T WORK IN PRODUCTION!!!
      // To make your own Google API key, follow the directions here:
      // http://fullcalendar.io/docs/google_calendar/
      googleCalendarApiKey: 'YOUR_KEY',

      // US Holidays
      events: '[e-mail]',

      eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
      },

      loading: function(bool) {
        $('#loading').toggle(bool);
      }

    });

  });


</script>