title: Google calendar API v3 javascript format
body: <p>I'm utilizing the new Google calendar API to create a list of events on a website, and I'm having trouble formatting the output. I followed the tutorial at this link:
  <a href="https://developers.google.com/google-apps/calendar/quickstart/js" rel="nofollow">https://developers.google.com/google-apps/calendar/quickstart/js</a></p>
  
  <p>By following the tutorial I was able to get everything up and running quickly. I wanted to style the list of events for my website but I'm not sure how to format the output. In the tutorial I followed I used OAuth to give me a client ID instead of an API key. Right now in this tutorial the output of events is a solid block of text thats generated with <code>createTextNode()</code>.</p>
  
  <p>Here is a portion from the tutorial above that prints the calendar events to the website:</p>
  
  <pre><code>     /**
     * Print the summary and start datetime/date of the next ten events in
     * the authorized user's calendar. If no events are found an
     * appropriate message is printed.
     */
    function listUpcomingEvents() {
      var request = gapi.client.calendar.events.list({
        'calendarId': 'primary',
        'timeMin': (new Date()).toISOString(),
        'showDeleted': false,
        'singleEvents': true,
        'maxResults': 10,
        'orderBy': 'startTime'
      });
  
      request.execute(function(resp) {
        var events = resp.items;
        appendPre('Upcoming events:');
  
        if (events.length &gt; 0) {
          for (i = 0; i &lt; events.length; i++) {
            var event = events[i];
            var when = event.start.dateTime;
            if (!when) {
              when = event.start.date;
            }
            appendPre(event.summary + ' (' + when + ')')
          }
        } else {
          appendPre('No upcoming events found.');
        }
  
      });
    }
  
    /**
     * Append a pre element to the body containing the given message
     * as its text node.
     *
     * @param {string} message Text to be placed in pre element.
     */
    function appendPre(message) {
      var pre = document.getElementById('output');
      var textContent = document.createTextNode(message + '\n');
      pre.appendChild(textContent);
    }
  </code></pre>
  
  <p>And the result is a list of events with the title of the event and the date in the ISO format. </p>
  
  <p>QUESTION: How can you format this information so that the title of each event will be in a <code>h1</code> tag and the date/time will be in a <code>h2</code> tag instead of all of the output in one giant text node? </p>
  
  <p>Also, I'm using a private calendar.</p>
  
  <p>EDIT:
  I found this repo
  <a href="https://github.com/MilanKacurak/FormatGoogleCalendar" rel="nofollow">https://github.com/MilanKacurak/FormatGoogleCalendar</a>
  This looks exactly like the kind of formatting I'm looking for, but it only works for public calendars. Does anyone know if there is a way utilize something like this with a private calendar?</p>