Google Calendar Authorization Apps Script - Standalone Web App

Question

I am new to Apps Script and Web Development. I thought it would be nice to make a simple app to get started.

Goal: Display the future events of the user.

Problem: I am stuck on getting user authorization. Currently, the script is displaying my events. Instead, I want the script to display the user's (who is accessing the web app) events.

I found this sample from the documentation. This function gets the list of events of the user. https://developers.google.com/calendar/quickstart/apps-script

Then I wrote a basic index.html file to display the string populated by this above function to the user.

index.html

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
</head>

<body>
    <script>
        function getEventsOnClick() {
            google.script.run.withSuccessHandler(changeDisplay).listAllEvents();
        }

        function changeDisplay(display) {
            var div = document.getElementById('output');
            div.innerHTML = display;
        }
    </script>

    <div id="output"> Hello! </div>
    <button onclick="getEventsOnClick()">Run Function</button>

</body>

</html>

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}


function listAllEvents() {
  var calendarId = 'primary';
  var now = new Date();
  var display = ""
  var events = Calendar.Events.list(calendarId, {
    timeMin: now.toISOString(),
    maxResults: 2500,
  });
  if (events.items && events.items.length > 0) {
    for (var i = 0; i < events.items.length; i++) {
      var event = events.items[i];

      if (event.start.date) {
        // All-day event.
        var start = new Date(event.start.date);
        var end = new Date(event.end.date);
        display = display + 'Start: ' + start.toLocaleDateString() + '; End: ' + end.toLocaleDateString() + ". ";
      } else {
        var start = new Date(event.start.dateTime);
        var end = new Date(event.end.dateTime);
        display = display + 'Start: ' + start.toLocaleString() + '; End: ' + end.toLocaleString() + ". ";
      }
    }
  } else {
    display = 'No events found.';
  }
  Logger.log("%s", display)
  return display

}

Again, nothing is wrong with the above code. It does display events as expected. The problem is that it is displaying my events rather than the user. So, if I give a user URL for the app, then I want this app to request authorization and display their event. How would I do that?

Thanks!

J. G. J. G. · Accepted Answer · 2019-05-21T22:42:45

When you deploy the app, make sure you choose to execute as the user rather than as yourself. (as yourself is the default).

Google Calendar Authorization Apps Script - Standalone Web App

1 Answers