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

i trying use full calendar embed google calendar in website. have included fullcalendar using bower , both css , js files in index file. have div included id 'calendar'.

i followed docs on http://fullcalendar.io/docs/google_calendar/

in init.js file have 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 popup window       window.open(event.url, 'gcalevent', 'width=700,height=600');       return false;     }   }); 

i tried events instead of eventsources:

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

but keep receiving 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 present on requested resource. origin 'http://localhost:9000' therefore not allowed access.

in console have my api key referrers set 'http://localhost:9000' origin should okay. set calendar public.

what else doing wrong?

i met problem today, , found revolved after including fullcalendar/gcal.js.

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

detailed information please check dependencies section on fullcalendar docs.