更改GCal事件的时区

Question

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

我已经找到了一些示例，但似乎无法让它们正常工作。我提供了我的基础代码，希望有人能帮助我。

<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显示。

Answer 1

我把这事搞清楚了。

我必须同时添加时区和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: 'YOUR_CALENDAR@group.calendar.google.com',

      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>