My full calendar does not show events. (From Google Calendar)

I am using the "fullcalendar" plugin for JavaScript and also the google calendar module to view the google calendar on a web page. The problem is that no events are displayed and there are no accompanying error messages in the console.

An empty calendar is displayed normally.

I created an API key and got the id of the calendar that I want to display.

My JS looks like this:

    $(document).ready(function(){
      console.log("Function running");
      var calendar = $('#calendar'); 
      calendar.fullCalendar({
        googleCalendarApiKey: 'my-api-key',
        events: {
          googleCalendarId: 'my-calendar-id'
        }
      });
     });

      

        
        
        
      

    

The head in my html looks like this:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href='style.css' rel='stylesheet' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script src='app.js' type='text/javascript'></script>
<script src='calendar.js' type='text/javascript'></script>

      

        
        
        
      

    

The reason I have so many links is because I am simultaneously using the Calendar API for a slightly different part of the application. I went through the network tab in chrome dev tools trying to identify something like JSON, delivering event data to the site and nothing.

I know fullcalendar uses AJAX to update the calendar on the screen, so I tried to create a new event in my google calendar and view the network tab in case I saw a change, but nothing.

console.log()

works happily so i know js is loading.

I tried to revert to an older method using gcal feed, but is $.fullcalendar.gcalFeed(url)

no longer a function (which is fair enough). I have the latest version of a file gcal.js

(V2.0 no longer works, so minor changes should be made to this file).

If anyone can either figure out where I am going wrong, or point me in a new direction in relation to other things to try, I would be extremely grateful, now I am pretty much out of ideas.

Update

Instead of using the calendar id, I'm trying to use the feed from the calendar (by selecting the xml option in the calendar settings and copying it to JQuery instead). This gives me an error:

XMLHttpRequest cannot load     https://google.com/calendar/feeds/ed.prince5769%40gmail.com/public/basic?start=2015-06-28&end=2015-08-09&_=1436196005956. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://edprince.uk' is therefore not allowed access. The response had HTTP status code 404.

      

        
        
        
      

    

If I follow this url I get what I am looking for, an XML download including all the details of the events in my calendar. So I think this is a problem, for some reason I am unable to upload all this data to my site. Now I'm going to look into this.

Update # 2

I just read this fantastic article on the problem. There seem to be 3 ways to approach it using JSONP, server-side proxy or CORS. The author refers to the first two solutions creating potential security vulnerabilities, and this project cannot allow this. CORS looks like a possible route.