<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Calendar API</title>
</head>
<body>
<h1>Events:</h1>
<div id="js-gcal-event">
<!-- SVG loader By Sam Herbert (@sherb). http://goo.gl/7AJzbL -->
<svg aria-hidden="true" width="35" height="35" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#2c2a29"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle></g></svg>
<p>Loading...</p>
</div>
<p>Solution from László L. L. on <a href="https://stackoverflow.com/a/56496854/908059">Stack Overflow</a>, modified to use lighter dependencies (MomentJS > DayJS, jQuery > vanilla javascript).</p>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?version=3.52.1&features=Array.prototype.forEach,console,Date.prototype.toISOString,document,Intl,Map,Promise,Set"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.23/plugin/localizedFormat.js"></script>
<script>dayjs.extend(window.dayjs_plugin_localizedFormat)</script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="google-calendar.js"></script>
</body>
</html>