Google calendar API v3 javascript format

Question

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: https://developers.google.com/google-apps/calendar/quickstart/js

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 createTextNode().

Here is a portion from the tutorial above that prints the calendar events to the website:

     /**
   * 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 > 0) {
        for (i = 0; i < 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);
  }

And the result is a list of events with the title of the event and the date in the ISO format.

QUESTION: How can you format this information so that the title of each event will be in a h1 tag and the date/time will be in a h2 tag instead of all of the output in one giant text node?

Also, I'm using a private calendar.

EDIT: I found this repo https://github.com/MilanKacurak/FormatGoogleCalendar 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?

j_lemon j_lemon · Accepted Answer · 2015-11-12T19:47:54

With a little more digging I was able to find a similar question and was able to use it to solve my problem.

In this link, the answer to this question helped solve my question.

Retrieve Google Calendar events using API v3 in javascript

In this link it says it is for public calendars, but I was able to use it with my private calendar as well. I guess the biggest problem I was having was figuring out how to format the response from the api to include custom css class names and styles. If you know of a different/better answer please let me know.

Google calendar API v3 javascript format

1 Answers