Displaying a List of Events using Google Calendar API
Mmm… So you are going to read my first Medium post. Thanks for coming here. Here I’m going to share my experience of using Google Calendar API with SpringBoot. Hope you are familiar with Google APIs. No..?? Nothing to be afraid. Because I also never had used Google APIs before using them on this “SEF OneLive Upcoming Events” thing. (That’s the project name)
So I’ll start with the background story. I am working on the Tech team of an Organization called “Sustainable Education Foundation”. “OneLive” is one of the main programs in that Education. I’m not going to explain about the organization or the “Onelive” program. Anyway, a few months ago, I was assigned to display the Upcoming Onelive Events on the SEF website.
First I tried to use Facebook APIs to get the upcoming events. Unfortunately, It doesn’t give public access for page events unless you are the owner of the page. And it doesn’t give page access tokens without a verification process. So, I decided to use Google Calendar API. (While writing this post I just checked the Facebook API references again. The problem was still there. So I couldn’t figure out a way)
What we need is to get a list of events from a Google Calendar. So First, we have to create a Calendar on Google. And make it “available to public” on calendar settings.
Then go to Google APIs. The one we want is the Calendar events list. So here’s the link for it. (I suggest you to go to this link. There’s a feature to try it on live data) This will make it easy for you if you are new to Google APIs.
The basic parameter required is Calendar id. you can find it from calendar settings. And also you need to get an API key from google developer console and add it to the end of the Request URL like this.
https://www.googleapis.com/calendar/v3/calendars/{calendar-id}/events?key={API-key}
Then we have to create a wrapper using spring boot to get the events using the URL. Here’s my code. (I have added a few more parameters for the URL which are not mandatory)
This is the component that I created to display the events.
And also I created a simple mobile view.
As usual, I used JavaScript and Ajax to send the request and to get the payload. Go to the below link, you can find the code and get an idea. See the “loadUpcomingEvents()” function.
https://github.com/sef-global/sef-site/blob/master/src/main/webapp/onelive/functions.js
I used Mustache.js to render the content to the page. You can use any other way which you are familiar with. This is the link for the UI code and the mustache template.
Also, I have added a few more things to the code for a better User Experience. And the requirements were fulfilled.
I hope you would like to see the outcome. So here it is.
I think this post had helped you if you were struggling to find a way to display a list of Google Calendar events on your web page. So I’ll stop here. Anyway, thanks for reading!!
