FullCalendar using Database and Google Calendar - php

Question

It is possible to display both custom event coming from the database and Google Calendar using FullCalendar? I've done to display my custom event from database and I want to display also the holidays in my country using Google Calendar. My question is, it is possible to do that in FullCalendar? Here's my code:
googleCalendarApiKey: 'AIzaSyBTYvbg3gKLNi0A8qOXMyk6q-EnzM6DZq4',
events: [ googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com',
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>

Answer 1

events: [ googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com'...JS arrays can't contain named items...not sure this will even compile in the browser. Are you getting a console error, by any chance? Even if this was valid JS, you can't specify a google calendar as one item of your events array, fullCalendar is expecting "events" to be either a URL or an array of objects, not a combination. If you want to combine data from your database with data from an external source e.g. google calendar, then what you're probably looking for is "event sources" (see https://fullcalendar.io/docs/eventSources)
This way you can give fullCalendar a list of different ways to get events. The first entry can be the data generated by your PHP code, and the second can be your Google Calendar details, which tell it to go away and download the events from Google Calendar:
Remove your events: option from the code and instead specify:
eventSources: [
//first event source:
[
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
],
//second event source:
{
googleCalendarId:'en.philippines#holiday#group.v.calendar.google.com'
}
]
N.B. If you want to incorporate Google Calendar events, make sure you've also followed al the steps outlined at https://fullcalendar.io/docs/google-calendar

Answer 2

You should be able to do that with addEventSource:
$('#myCal').fullCalendar( ‘addEventSource’, source );
where
Source may be an Array/URL/Function just as in the events option.
Events will be immediately fetched from this source and placed on the
calendar.
So, source could be either the Google url or an array with your events.

Answer 3

Use:
eventSources: [{googleCalendarId: 'xxxxxxxxx#gmail.com', className: 'gcal-event'},{url:'events.php',}],