Integrating Google Calendar/fullcalendar.io into a page on Squarespace

Question

My group doesn't yet have a published site, so we're still working on edit mode, and we're trying to integrate fullcalendar. We're referencing this to do so. So far, what we've done is gone to page settings> advanced and added in this code to the head:

<style> 
  html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
  }
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'list', 'googleCalendar' ],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,listYear'
    },

    displayEventTime: false, // don't show the time column in list view

    // To make your own Google API key, follow the directions here:
    // http://fullcalendar.io/docs/google_calendar/
    googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',

    // US Holidays
    events: 'en.usa#holiday@group.v.calendar.google.com',

    eventClick: function(arg) {

      // opens events in a popup window
      window.open(arg.event.url, '_blank', 'width=700,height=600');

      // prevents current tab from navigating
      arg.jsEvent.preventDefault();
    }

  });

  calendar.render();
});
</script> 

Then, we went back to edit the page, added in a code block, selected html, and typed in this html:

<div id='calendar'></div>

But nothing displays. Are we doing something wrong?

Answer 1

Looking at the page you have setup, you're correct that you've not loaded the necessary external libraries. So that's the first step.

To see the external libraries that are being used, you can go to settings within Codepen. See here:

Those external libraries need to be loaded before your custom code. So where you have your <script> for loading JQuery, you'd add:

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.0.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@4.0.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@4.0.1/main.min.js"></script>

See this Codepen for a modified example where the external libraries are visibly loaded as part of the HTML.

Then, make sure that you're placing your JavaScript (including the script elements mentioned above) within Footer code injection, not Header.

That'll at least get things loaded.

As an aside, the code, as written, doesn't seem to require JQuery, though perhaps some of your other code on your site does.