Изменение часового пояса для событий GCal - PullRequest
0 голосов
/ 16 января 2019

У меня есть «Список» просмотра событий, поступающих непосредственно из Календаря 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.

1 Ответ

0 голосов
/ 23 января 2019

Я понял это.

Мне пришлось добавить и часовой пояс, и часовой пояс, чтобы получить календарь, чтобы настроить время на правильный часовой пояс. Вот мой окончательный код с удаленными ключами.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...