full calendar call to google throws No 'Access-Control-Allow-Origin' header present

Question

I am trying to use full calendar to embed my google calendar in my website. I have included the fullcalendar using bower and both the css and js files are in my index file. I also have the div included with id 'calendar'.

I followed the docs on http://fullcalendar.io/docs/google_calendar/

In my init.js file I have the following code:

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    },
    googleCalendarApiKey: 'myApiKey',
    eventSources: [
      {
        url: "https://www.google.com/calendar/feeds/mycalendarid/public/basic",
        dataType : 'jsonp'
      }
    ],
    eventClick: function(event) {
      // opens events in a popup window
      window.open(event.url, 'gcalevent', 'width=700,height=600');
      return false;
    }
  });

I also tried events instead of eventSources:

events: 'https://www.google.com/calendar/feeds/mycalendarid/public/basic',

But I keep receiving the following error message:

XMLHttpRequest cannot load https://www.google.com/calendar/feeds/mycalendarid/public/basic?start=2015-04-26&end=2015-06-07&_=1431414654809. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

In the console I have my my api key with my referrers set to 'http://localhost:9000' so my origin should be okay. I also set my calendar public.

What else could I be doing wrong?

tsaiid tsaiid · Accepted Answer · 2015-07-11T09:58:07

I met this problem today, and I found it was revolved after including fullcalendar/gcal.js.

<script type='text/javascript' src='fullcalendar/gcal.js'></script>

Detailed information please check the Dependencies section on FullCalendar Docs.

full calendar call to google throws No 'Access-Control-Allow-Origin' header present

1 Answers