One of our projects required displaying a list of upcoming events on a website. We wanted to enable the site editor to edit these events. We are working in OctoberCMS and it would have been fairly easy to just create a static list or a table, and have the user edit that in the backend, or even to use a plugin to this end; we decided that the best approach would be to tap into the power of google calendars.
The script only works with a public google calendar. This shouldn't be an issue since the website is public so the information in the calendar will be shared online anyway. And it makes the script much simpler, since we don't need to do any kind of fancy authentication.
- Google only allows a certain number of requests to its services, so you will need to create a google developer account. Then, enable the Calendar API, and also create a new public API Key - this is what google will use to track your API usage.
- Create a new google calendar and set it as public
3. Get the calendar ID
4. Create an element in your page where you will load the retrieved calendar events
5. The script makes use of moment.js and google's JS API, so you'll need to add the following somewhere in your page to load these:
<!-- For google calendar integration --> <script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script> <script src="https://apis.google.com/js/api.js"></script>
6. Add the calendar script somewhere, and customize it
You will need to replace YOUR_CALENDAR_ID and YOUR_API_KEY in the script below!
The script is very straightforward, so you should be able to customize it easily to fit your needs!
One issue is that you are making your google calendar API key public. This shouldn't really be an issue, but if you're concerned, an alternative solution would be to do the whole thing on the server side (for example, in PHP) and only serve the results to the user. For that you'll also want to take a look at the Google API Client Library for PHP.
Alternatively, here are some other solutions I found while doing my research: