Search code examples
javascriptfullcalendargoogle-calendar-apiicalendargcal

Receive Google Calender events from 'ics' file and use it with FullCalendar


I've put my google calendar public and I'm trying to use the ics file but I'm getting a problem with XMLHttpRequest

What I've tried so far:

It works if I use my googleCalendarId and googleCalendarApiKey:

   $('#calendar').fullCalendar({
        googleCalendarApiKey: '*************myApiKey**************',

        events: {
          googleCalendarId: '[email protected]'
        },

        eventClick: function(event) {
            console.log(event.start);
            console.log(event.end);
            return false;
        }, 

        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

Then when I try and use the actual ics file like so:

   $('#calendar').fullCalendar({        
        events: {
          url: 'https://calendar.google.com/calendar/ical/chris.beckett%40schoolspider.co.uk/public/basic.ics'
        },

        eventClick: function(event) {
            console.log(event.start);
            console.log(event.end);
            return false;
        }, 

        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

It shows the following error in the console log:

XMLHttpRequest cannot load https://calendar.google.com/calendar/ical/chris.beckett%40schoolspider.co.uk/public/basic.ics. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8887' is therefore not allowed access.

I've tried setting also the following:

//htaccess file
Header set Access-Control-Allow-Origin "*"
//php 
header("Access-Control-Allow-Origin: *");
//xhr 
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

Solution

  • I've managed to get the ICS file on to fullcalendar by using this method -

    function icsToArray($paramUrl) {
            $icsFile = file_get_contents($paramUrl);
    
            $icsData = explode("BEGIN:", $icsFile);
    
            foreach($icsData as $key => $value) {
                $icsDatesMeta[$key] = explode("\n", $value);
            }
    
            foreach($icsDatesMeta as $key => $value) {
                foreach($value as $subKey => $subValue) {
                    if ($subValue != "") {
                        if ($key != 0 && $subKey == 0) {
                            $icsDates[$key]["BEGIN"] = $subValue;
                        } else {
                            $subValueArr = explode(":", $subValue, 2);
                            $icsDates[$key][$subValueArr[0]] = $subValueArr[1];
                        }
                    }
                }
            }
            return $icsDates;
        }