Changing Timezone for GCal Events - fullcalendar

Question

I have a "List" view of events coming directly from Google Calendar. The Google Calendar is set to the 'America/Central' Time zone. I need to display the events in 'America/Eastern' Time Zone.
I have found examples, but can't seem to get them to work. I am providing my base code in hopes that someone can help me out.
<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>
Currently my events are being displayed in just UTC.

Answer 1

I got this figured out.
I had to add both timezone and timezoneParam to get the calendar to adjust the time to the right timezone. Here is my final code with the keys removed.
<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>