FullCalendar Cross Domain Issue

Question

I'm trying to set up FullCalendar on my localhost to test it out. Here's the code:

$( '.calendar' ).fullCalendar( {
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventSources: [
        {
            url: "http://www.google.com/calendar/feeds/feed_one",
            className: 'feed_one'
        },
        {
            url: "http://www.google.com/calendar/feeds/feed_two",
            className: 'feed_two'
    ]
} )

I got this error in my console instead, and the events are not displayed:

XMLHttpRequest cannot load http://www.google.com/calendar/feeds/feed_one. 
Origin http://localhost is not allowed by Access-Control-Allow-Origin. localhost:1

XMLHttpRequest cannot load http://www.google.com/calendar/feeds/feed_two. 
Origin http://localhost is not allowed by Access-Control-Allow-Origin. localhost:1

From my research it seems like this is a Cross-Origin-Resource-Sharing issue, but I don't know how to fix it.

Would appreciate it if someone could help me out, or point me in the right direction.

Answer 1

You would need to make a JSONP request for cross domain access. Could you please set the following properties and check if this works out for you.

You can get the detailed description of JSONP over here...

eventSources: [
    {
        url: "http://www.google.com/calendar/feeds/feed_one",
        dataType : 'jsonp',
        className: 'feed_one'
    },
    {
        url: "http://www.google.com/calendar/feeds/feed_two",
        dataType : 'jsonp',
        className: 'feed_two',
]

Answer 2

I had this issue. It was fixed after adding to code <script type='text/javascript' src='fullcalendar-1.6.2/fullcalendar/gcal.js'></script>