Untitled

<!DOCTYPE html>
<html>

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

<body>
    <script>
        function myFunction() {
            document.getElementById("data").innerHTML = "Clicked!";
            listAllEvents()
        }


    function listAllEvents() {
        document.getElementById("data").innerHTML = "In Function!";
        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);
        document.getElementById("data").innerHTML = "Almost There";
        document.getElementById("data").innerHTML = display;
    }
</script>

<div id="data"> Hello! </div>
<button onclick="myFunction()">Run Function</button>