I have been building a Google Apps Script web app to display my Google Calendar events. The calendar service won’t allow an editable calendar to be used so I have been using Full Calendar to complete this task. When I use the google calendar api to import events, they all come in but they all have the same color. The coloring is essential and depends on the event description (e.g. if “specified string” is in the event description the color is yellow, otherwise grey). I then tried to import them as JSON and limited to title & start times in an array. Using some test cases I know this works, but when I try to import the events, the calendar remains blank. What am I doing wrong?
// This Does NOT Work.
var yellowEvents = [];
var greyEvents = [];
function loadEvents(importedData) {
// importedData is coming in as
// importedData = [
// {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"},
// {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"},
// ...]
for (var k in importedData) {
var event = importedData[k];
if (event.color == 'yellow') {
yellowEvents.push({ title: event.title, start: event.start, end: event.end });
} else {
greyEvents.push({ title: event.title, start: event.start, end: event.end });
}
}
}
google.script.run.withSuccessHandler(loadEvents).getCalenderEventsAsJson();
var calendar = new FullCalendar.Calendar(calendarEl, {
eventSources: [{
events: yellowEvents,
color: "yellow"
}, {
events: greyEvents,
color: "blue"
},
]
});
// This Works.
document.addEventListener('DOMContentLoaded', function() {
var calendar = new FullCalendar.Calendar(calendarEl, {
eventSources: [{
events: [
{title: "TEST", start: new Date().toISOString()},
],
color: "red"
}, {
events: [
{title: "TEST", start: new Date(2022, 0, 23, 12, 30).toISOString(), end: new Date(new Date().setHours(18)).toISOString()},
],
color: "blue"
},
]
});
calendar.render();
}
From checking the options object before calendar creation through the console, I am certain the events are making it into the calendar options. The final options look like this:
{...,
eventSources: {
0: {color: "yellow",
events: [
0: {title: 'Some Person', start: '2022-01-23T16:00:00.000Z', end: '2022-01-23T18:00:00.000Z'},
1: {title: 'Some OtherPerson', start: '2022-01-24T16:00:00.000Z', end: '2022-01-24T18:00:00.000Z'},
...
]
},
1: {color: "grey",
events: [
0: {title: 'Some Person', start: '2022-01-23T12:00:00.000Z', end: '2022-01-23T14:00:00.000Z'},
1: {title: 'Some OtherPerson', start: '2022-01-24T12:00:00.000Z', end: '2022-01-24T14:00:00.000Z'},
...
]
}
},
...}
I also see them pre & post rendering in Calendar.currentData.eventSources.{SOME_NUMBER}.meta.
