der3k/google-calendar-events.html

## google-calendar-events.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Kalendář CB Lištná</title>
</head>

<body>
  <script type="text/javascript">

    function resolveAccessToken() {
      const client_id = '122939969451-nm6pc9104kg6m7avh3pq8sn735ha9jja.apps.googleusercontent.com';
      const client_secret = 'iFas6FSxexJ0ztqx6QfUH8kK';
      const refresh_token = '1/4tbmdLZ3tItmdMx1zIoc9ZdlBZ8E854-t1whajGynYw';
      const grant_type = 'refresh_token';
      const authData = { client_id, client_secret, refresh_token, grant_type };

      return new Promise((resolve, reject) => {
        const nowMillis = (new Date()).getTime();
        window.accessToken = sessionStorage.getItem('cblistnaAccessToken') || '';
        window.accessTokenExpiresAt = sessionStorage.getItem('cblistnaAccessTokenExpiresAt') || nowMillis - 1;
        if (window.accessTokenExpiresAt < nowMillis) {
          postJson('/oauth2/v4/token', authData)
            .then(auth => {
              window.accessToken = auth.access_token;
              window.accessTokenExpiresAt = nowMillis + (auth.expires_in * 1000);
              sessionStorage.setItem('cblistnaAccessToken', window.accessToken);
              sessionStorage.setItem('cblistnaAccessTokenExpiresAt', window.accessTokenExpiresAt);
              console.log('refreshed access token: ' + window.accessToken);
              resolve(window.accessToken);
            })
            .catch(reject);
        } else {
          resolve(window.accessToken);
        }
      });
    }

    function ajax(method, url, headers, data) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        if (data) {
          data = Object.keys(data)
            .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
            .join('&');
        }
        if (method === 'GET') {
          url += '?' + data;
        }
        xhr.open(method, url, true);
        Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 400) {
            resolve(JSON.parse(xhr.responseText));
          } else {
            reject(xhr.responseText);
          }
        }
        xhr.onerror = () => {
          reject(xhr.responseText);
        }
        if (method === 'POST') {
          xhr.send(data);
        } else {
          xhr.send();
        }
      });
    }

    function postJson(path, data) {
      const apiPrefix = 'https://www.googleapis.com'
      return ajax(
        'POST',
        `${apiPrefix}${path}`,
        { 'Content-Type': 'application/x-www-form-urlencoded' },
        data);
    }

    function getJson(path, query) {
      const apiPrefix = 'https://www.googleapis.com'
      return ajax(
        'GET',
        `${apiPrefix}${path}`,
        { 'Authorization': `Bearer ${accessToken}` },
        query);
    }

    function appendEvents(events) {
      const outlet = document.getElementById('events');
        const header = document.createElement('h3');
        header.innerText = events.summary;
        outlet.appendChild(header);
        events.items.forEach(event => {
          const div = document.createElement('p');
          div.textContent = `${event.start.dateTime ? event.start.dateTime : event.start.date} ${event.summary}`;
          outlet.appendChild(div);
        });
    }

    const now = new Date();
    const queryDefaults = {
        timeMin: now.toISOString(),
        singleEvents: true,
        orderBy: 'startTime',
        maxResults: 10
    };

    function presentEvents(calendar, query) {
      return () => new Promise((resolve, reject) => {
        getJson(calendar, query)
          .then(events => {
            appendEvents(events);
            resolve();
          })
          .catch(reject);
      });
    }

    resolveAccessToken()
      .then(() => {
        const query = Object.assign(
          { timeMax: (new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)).toISOString() },
          queryDefaults);
        return presentEvents(
          '/calendar/v3/calendars/cblistna@gmail.com/events',
          query)();
      })
      .then(presentEvents(
          '/calendar/v3/calendars/seps8o249ihvkvdhgael78ofg0@group.calendar.google.com/events',
          queryDefaults))
      .then(presentEvents(
          '/calendar/v3/calendars/852scvjhsuhhl97lv3kb8r7be8@group.calendar.google.com/events',
          queryDefaults))
      .catch(console.error);

  </script>
  <h1>Kalendář CB Lištná</h1>
  <div id="events"></div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Kalendář CB Lištná</title>
	</head>

	<body>
	<script type="text/javascript">

	function resolveAccessToken() {
	const client_id = '122939969451-nm6pc9104kg6m7avh3pq8sn735ha9jja.apps.googleusercontent.com';
	const client_secret = 'iFas6FSxexJ0ztqx6QfUH8kK';
	const refresh_token = '1/4tbmdLZ3tItmdMx1zIoc9ZdlBZ8E854-t1whajGynYw';
	const grant_type = 'refresh_token';
	const authData = { client_id, client_secret, refresh_token, grant_type };

	return new Promise((resolve, reject) => {
	const nowMillis = (new Date()).getTime();
	window.accessToken = sessionStorage.getItem('cblistnaAccessToken') \|\| '';
	window.accessTokenExpiresAt = sessionStorage.getItem('cblistnaAccessTokenExpiresAt') \|\| nowMillis - 1;
	if (window.accessTokenExpiresAt < nowMillis) {
	postJson('/oauth2/v4/token', authData)
	.then(auth => {
	window.accessToken = auth.access_token;
	window.accessTokenExpiresAt = nowMillis + (auth.expires_in * 1000);
	sessionStorage.setItem('cblistnaAccessToken', window.accessToken);
	sessionStorage.setItem('cblistnaAccessTokenExpiresAt', window.accessTokenExpiresAt);
	console.log('refreshed access token: ' + window.accessToken);
	resolve(window.accessToken);
	})
	.catch(reject);
	} else {
	resolve(window.accessToken);
	}
	});
	}

	function ajax(method, url, headers, data) {
	return new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest();
	if (data) {
	data = Object.keys(data)
	.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
	.join('&');
	}
	if (method === 'GET') {
	url += '?' + data;
	}
	xhr.open(method, url, true);
	Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
	xhr.onload = () => {
	if (xhr.status >= 200 && xhr.status < 400) {
	resolve(JSON.parse(xhr.responseText));
	} else {
	reject(xhr.responseText);
	}
	}
	xhr.onerror = () => {
	reject(xhr.responseText);
	}
	if (method === 'POST') {
	xhr.send(data);
	} else {
	xhr.send();
	}
	});
	}

	function postJson(path, data) {
	const apiPrefix = 'https://www.googleapis.com'
	return ajax(
	'POST',
	`${apiPrefix}${path}`,
	{ 'Content-Type': 'application/x-www-form-urlencoded' },
	data);
	}

	function getJson(path, query) {
	const apiPrefix = 'https://www.googleapis.com'
	return ajax(
	'GET',
	`${apiPrefix}${path}`,
	{ 'Authorization': `Bearer ${accessToken}` },
	query);
	}

	function appendEvents(events) {
	const outlet = document.getElementById('events');
	const header = document.createElement('h3');
	header.innerText = events.summary;
	outlet.appendChild(header);
	events.items.forEach(event => {
	const div = document.createElement('p');
	div.textContent = `${event.start.dateTime ? event.start.dateTime : event.start.date} ${event.summary}`;
	outlet.appendChild(div);
	});
	}

	const now = new Date();
	const queryDefaults = {
	timeMin: now.toISOString(),
	singleEvents: true,
	orderBy: 'startTime',
	maxResults: 10
	};

	function presentEvents(calendar, query) {
	return () => new Promise((resolve, reject) => {
	getJson(calendar, query)
	.then(events => {
	appendEvents(events);
	resolve();
	})
	.catch(reject);
	});
	}

	resolveAccessToken()
	.then(() => {
	const query = Object.assign(
	{ timeMax: (new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)).toISOString() },
	queryDefaults);
	return presentEvents(
	'/calendar/v3/calendars/cblistna@gmail.com/events',
	query)();
	})
	.then(presentEvents(
	'/calendar/v3/calendars/seps8o249ihvkvdhgael78ofg0@group.calendar.google.com/events',
	queryDefaults))
	.then(presentEvents(
	'/calendar/v3/calendars/852scvjhsuhhl97lv3kb8r7be8@group.calendar.google.com/events',
	queryDefaults))
	.catch(console.error);

	</script>
	<h1>Kalendář CB Lištná</h1>
	<div id="events"></div>
	</body>

	</html>