0

Goal

Get access to https://calendar.google.com/ (Google Calendar) in a Google Web App HTML page that can be altered with HTML/CSS/JavaScript.

Questions

How do you place a google service directly into a GAS web app? Are there any indirect methods to achieve this?

Background:

I have been developing full stack Google web apps for businesses for a few years and repeatedly have clients asking to have Google Calendars or other google services integrated into these tools. When it comes to the maps service there is currently full functionality. However when it comes to calendar, there only seems to be an option to embed a limited and simplified version. It lacks the capability to be edited directly within the webpage, the style overrides any CSS attempts I have made, and the ability to even set the color of the events within a displayed calendar are unavailable. I've tried to open https://calendar.google.com/ directly into an iframe through Google Apps Script (GAS) and altering restrictions but all attempts made return an error.

Other questions I have seen on this topic only ever discuss embedding that dumbed-down calendar. That is not what I am after.

I also cannot use most third party resources due to the sensitive nature of the company data that will be in use.

Thank you for your time.

Independent Programmer
  • 1
  • 1
  • Update: I have found plenty of developed booking software that could be embedded into a frame. It's a more useful solution than using Google Calendar but those tried so far lack customization freedom or a reliable API to be considered useful. I have resorted to using fullCalendar due to it's relative security but haven't yet been able to get that to successfully install let alone use it in an Apps Script environment. – Independent Programmer Jan 07 '22 at 14:28

1 Answers1

1

I believe there are 3 ways in achieving this:

  1. embed an iframe, google has instructions here there are some limited customisation you can do via the google settings page.

  2. build your own calendar page, and use google calendar API to fetch calendars and events for that calendar, integrating it into your calendar page

  3. (as pointed out in the comment, which i was also not aware of before), GAS has some internal API which can access calendar

There isn't any easy way to embed and have full control (style or function) over google calendar aside from approach #2 as far as i am aware of. Hope this answer your question.

Edit: Add option 3 as pointed out in the comment.

WTJ
  • 111
  • 4
  • 1
    You might also want to mention this [internal api](https://developers.google.com/apps-script/reference/calendar?hl=en) in Google apps script. – TheMaster Jan 03 '22 at 07:37
  • Thanks for pointing it out, we learn new thing everyday. – WTJ Jan 03 '22 at 10:17
  • Thank you. Option 1 is the simple version I am trying to avoid. Option 3 is great for altering a calendar programmatically, which is how I've done this in the past. But I'm looking for a way to directly alter the calendar; examples being like add events by clicking the empty spots in calendar or edit existing calendar entry by clicking on it. Option 2 might be the "Goldilocks" way to go but I'm lost how to develop my own calendar from scratch that integrates back into Google Calendar. – Independent Programmer Jan 03 '22 at 11:41
  • @IndependentProgrammer you can use FullCalendar and fetch all the google calendar events into FullCalendar https://fullcalendar.io/docs/google-calendar – anonymous Jan 03 '22 at 12:03