Hi everyone,
Currently, I am working on issue #604 of the sef-site GitHub repository (https://github.com/sef-global/sef-site/issues/604). The purpose of the task is to display upcoming Onelive events on the sef site. For that, I created an API endpoint on the sef-data-holder using Google Calendar API. And it is nice if you can help me with your knowledge on this topic for the further development of this. And feel free to give your suggestions.
1 Like
I encountered a problem using the google calendar events because there wasn’t a direct way to get images and links from the Calendar event. The Google calendar only allows adding images on google drive as attachments.
The fileUrl which we get from the JSON payload looks like this:
“https://drive.google.com/file/d/1DK0Uy7vmNM4mC8Q9EsdwdyowwAR5iuEf/view?usp=drive_web”
It can’t be used as a html img src on the site (Because the ability to host an image directly from Google Drive has been discontinued by Google).
So its great if you can suggest a way to resolve this.
1 Like
@piumal1999 Shall we go without images for the initial parse?
@piumal1999 When I go through your great work done in on the data holder. I realized that API returns both past and upcoming events. There might be a way to get only the upcoming events from the Google calendar events API. 
@jaye Yeah, we can. But I have already written a function to resolve the issue with photos.
Wow! you are a genius! 
How did you solved it?
Maybe it’s not a good method.
Anyway, (with the help of stackoverflow.com 
) I found out that we can use a URL like this to see a google drive image file without login to a google account
https://drive.google.com/uc?export=view&id={image-id}
The image-id of the attached google drive image comes with the JSON payload. So I rearranged the URL to that format.
json payload:
rearranged URL:
https://drive.google.com/uc?export=view&id=1DK0Uy7vmNM4mC8Q9EsdwdyowwAR5iuEf
*Check the rearranged URL. I don’t whether it works for everyone.
1 Like
OMG! It works!!!
This is excellent!! 
I tried creating a UI component to display upcoming events. Can you please take a look and give your comments.
2 Likes
Wow! This is nice! 
Also, you can get inspiration from here:
https://dribbble.com/search/upcoming%20events
1 Like
I sent a pull request for the design I sent.
I’m currently designing another one. And also if anyone likes to design a component, reply to the thread.
1 Like
That’s incredible! 
I just add some comments. check them.
1 Like
Currently, the calendar API returns the array of events by ordering according to the last modification time. So it was updated to order by starting time of the events. “orderBy” parameter was used to solving this issue.
1 Like
I created a new branch called “onelive-event” on sef-site repo for testing purposes. And sent a PR to load upcoming onelive events using the calendarAPI on sef-dataholder. I used mustache.js to render data to a given template.
1 Like
This is great! Requested a small formatting change for this.
This has been already merged but I’ve added some comments. @piumal1999 @Gravewalker Could you please check it back?
1 Like
Merged! Thanks @piumal1999!