title: How do i import google calendar events in a html calendar?
body: <p>I want to add events from google calendar to my html calendar that's published on a website. below is the code i tried to use...</p>
  
  <p>i tried to implement some java code with an plugin called sourcerer. Tried to find a lot of other solutions but cant get this to work.</p>
  
  <pre><code>    {source}
  
  &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
  &lt;body bgcolor="black" text="white" link="#00ffff" vlink="green" alink="yellow"&gt;
  &lt;script&gt;
  
  var clientId = '9nu4mq883opnp9sdhl38uatqi0@group.calendar.google.com'; //choose web app client Id, redirect URI and Javascript origin set to http://localhost
  var apiKey = 'AIzaSyBu0ntKF5OdCGr3pFlzaQvj3kp6nVi5ATA'; //choose public apiKey, any IP allowed (leave blank the allowed IP boxes in Google Dev Console)
  var userEmail = "robertkruizinga@gmail.com"; //your calendar Id
  var userTimeZone = "Amsterdam"; //example "Rome" "Los_Angeles" ecc...
  var maxRows = 10; //events to shown
  var calName = "Villa Valencia beschikbaarheid"; //name of calendar (write what you want, doesn't matter)
  
  var scopes = 'https://www.googleapis.com/auth/calendar';
  
  //--------------------- Add a 0 to numbers
  function padNum(num) {
      if (num &lt;= 9) {
          return "0" + num;
      }
      return num;
  }
  //--------------------- end    
  
  //--------------------- From 24h to Am/Pm
  function AmPm(num) {
      if (num &lt;= 12) { return "am " + num; }
      return "pm " + padNum(num - 12);
  }
  //--------------------- end    
  
  //--------------------- num Month to String
  function monthString(num) {
           if (num === "01") { return "JAN"; } 
      else if (num === "02") { return "FEB"; } 
      else if (num === "03") { return "MAR"; } 
      else if (num === "04") { return "APR"; } 
      else if (num === "05") { return "MAJ"; } 
      else if (num === "06") { return "JUN"; } 
      else if (num === "07") { return "JUL"; } 
      else if (num === "08") { return "AUG"; } 
      else if (num === "09") { return "SEP"; } 
      else if (num === "10") { return "OCT"; } 
      else if (num === "11") { return "NOV"; } 
      else if (num === "12") { return "DEC"; }
  }
  //--------------------- end
  
  //--------------------- from num to day of week
  function dayString(num){
           if (num == "1") { return "mon" }
      else if (num == "2") { return "tue" }
      else if (num == "3") { return "wed" }
      else if (num == "4") { return "thu" }
      else if (num == "5") { return "fri" }
      else if (num == "6") { return "sat" }
      else if (num == "0") { return "sun" }
  }
  //--------------------- end
  
  //--------------------- client CALL
  function handleClientLoad() {
      gapi.client.setApiKey(apiKey);
      checkAuth();
  }
  //--------------------- end
  
  //--------------------- check Auth
  function checkAuth() {
      gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }
  //--------------------- end
  
  //--------------------- handle result and make CALL
  function handleAuthResult(authResult) {
      if (authResult) {
          makeApiCall();
      }
  }
  //--------------------- end
  
  //--------------------- API CALL itself
  function makeApiCall() {
      var today = new Date(); //today date
      gapi.client.load('calendar', 'v3', function () {
          var request = gapi.client.calendar.events.list({
              'calendarId' : userEmail,
              'timeZone' : userTimeZone, 
              'singleEvents': true, 
              'timeMin': today.toISOString(), //gathers only events not happened yet
              'maxResults': maxRows, 
              'orderBy': 'startTime'});
      request.execute(function (resp) {
              for (var i = 0; i &lt; resp.items.length; i++) {
                  var li = document.createElement('li');
                  var item = resp.items[i];
                  var classes = [];
                  var allDay = item.start.date? true : false;
                  var startDT = allDay ? item.start.date : item.start.dateTime;
                  var dateTime = startDT.split("T"); //split date from time
                  var date = dateTime[0].split("-"); //split yyyy mm dd
                  var startYear = date[0];
                  var startMonth = monthString(date[1]);
                  var startDay = date[2];
                  var startDateISO = new Date(startMonth + " " + startDay + ", " + startYear + " 00:00:00");
                  var startDayWeek = dayString(startDateISO.getDay());
                  if( allDay == true){ //change this to match your needs
                      var str = [
                      '&lt;font size="4" face="courier"&gt;',
                      startDayWeek, ' ',
                      startMonth, ' ',
                      startDay, ' ',
                      startYear, '&lt;/font&gt;&lt;font size="5" face="courier"&gt; @ ', item.summary , '&lt;/font&gt;&lt;br&gt;&lt;br&gt;'
                      ];
                  }
                  else{
                      var time = dateTime[1].split(":"); //split hh ss etc...
                      var startHour = AmPm(time[0]);
                      var startMin = time[1];
                      var str = [ //change this to match your needs
                          '&lt;font size="4" face="courier"&gt;',
                          startDayWeek, ' ',
                          startMonth, ' ',
                          startDay, ' ',
                          startYear, ' - ',
                          startHour, ':', startMin, '&lt;/font&gt;&lt;font size="5" face="courier"&gt; @ ', item.summary , '&lt;/font&gt;&lt;br&gt;&lt;br&gt;'
                          ];
                  }
                  li.innerHTML = str.join('');
                  li.setAttribute('class', classes.join(' '));
                  document.getElementById('events').appendChild(li);
              }
          document.getElementById('updated').innerHTML = "updated " + today;
          document.getElementById('calendar').innerHTML = calName;
          });
      });
  }
  //--------------------- end
  &lt;/script&gt;
  &lt;script src='https://apis.google.com/js/client.js?onload=handleClientLoad'&gt;&lt;/script&gt;
      &lt;div id='content'&gt;
      &lt;h1 id='calendar' style="color:grey"&gt;LOADING . . . .&lt;/h1&gt;
      &lt;ul id='events'&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;p id='updated' style="font-size:12; color:grey"&gt;updating . . . . .&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  &lt;div class="calendar"&gt;
  &lt;div class="calendar__picture"&gt;
  &lt;h2&gt;,11 Sunday&lt;/h2&gt;
  &lt;h3&gt;Augustus&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="calendar__date"&gt;
  &lt;div class="calendar__day"&gt;M&lt;/div&gt;
  &lt;div class="calendar__day"&gt;T&lt;/div&gt;
  &lt;div class="calendar__day"&gt;W&lt;/div&gt;
  &lt;div class="calendar__day"&gt;T&lt;/div&gt;
  &lt;div class="calendar__day"&gt;F&lt;/div&gt;
  &lt;div class="calendar__day"&gt;S&lt;/div&gt;
  &lt;div class="calendar__day"&gt;S&lt;/div&gt;
  &lt;div class="calendar__number"&gt;&lt;/div&gt;
  &lt;div class="calendar__number"&gt;&lt;/div&gt;
  &lt;div class="calendar__number"&gt;&lt;/div&gt;
  &lt;div class="calendar__number"&gt;1&lt;/div&gt;
  &lt;div class="calendar__number"&gt;2&lt;/div&gt;
  &lt;div class="calendar__number"&gt;3&lt;/div&gt;
  &lt;div class="calendar__number"&gt;4&lt;/div&gt;
  &lt;div class="calendar__number"&gt;5&lt;/div&gt;
  &lt;div class="calendar__number"&gt;6&lt;/div&gt;
  &lt;div class="calendar__number"&gt;7&lt;/div&gt;
  &lt;div class="calendar__number"&gt;8&lt;/div&gt;
  &lt;div class="calendar__number"&gt;9&lt;/div&gt;
  &lt;div class="calendar__number"&gt;10&lt;/div&gt;
  &lt;div class="calendar__number"&gt;11&lt;/div&gt;
  &lt;div class="calendar__number"&gt;12&lt;/div&gt;
  &lt;div class="calendar__number"&gt;13&lt;/div&gt;
  &lt;div class="calendar__number"&gt;14&lt;/div&gt;
  &lt;div class="calendar__number"&gt;15&lt;/div&gt;
  &lt;div class="calendar__number"&gt;16&lt;/div&gt;
  &lt;div class="calendar__number"&gt;17&lt;/div&gt;
  &lt;div class="calendar__number calendar__number--current"&gt;18&lt;/div&gt;
  &lt;div class="calendar__number"&gt;19&lt;/div&gt;
  &lt;div class="calendar__number"&gt;20&lt;/div&gt;
  &lt;div class="calendar__number"&gt;21&lt;/div&gt;
  &lt;div class="calendar__number"&gt;22&lt;/div&gt;
  &lt;div class="calendar__number"&gt;23&lt;/div&gt;
  &lt;div class="calendar__number"&gt;24&lt;/div&gt;
  &lt;div class="calendar__number"&gt;25&lt;/div&gt;
  &lt;div class="calendar__number"&gt;26&lt;/div&gt;
  &lt;div class="calendar__number"&gt;27&lt;/div&gt;
  &lt;div class="calendar__number"&gt;28&lt;/div&gt;
  &lt;div class="calendar__number"&gt;29&lt;/div&gt;
  &lt;div class="calendar__number"&gt;30&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;{/source}
  </code></pre>
  
  <p>The source tags are from a plugin called sourcerer, i used it for the java-code.
  I tried to find other solutions like changing the css for an imported google calendar but i cant change the layout like i want. It just keeps resetting to the standard google layout.</p>
  
  <p>So here's another edit, i tried to follow the quickstart tutorial from google in dreamweaver. I've added the following code to a new index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Google Calendar API Quickstart&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;Google Calendar API Quickstart&lt;/p&gt;
  
      &lt;!--Add buttons to initiate auth sequence and sign out--&gt;
      &lt;button id="authorize_button" style="display: none;"&gt;Authorize&lt;/button&gt;
      &lt;button id="signout_button" style="display: none;"&gt;Sign Out&lt;/button&gt;
  
      &lt;pre id="content" style="white-space: pre-wrap;"&gt;&lt;/pre&gt;
  
      &lt;script type="text/javascript"&gt;
        // Client ID and API key from the Developer Console
        var CLIENT_ID = '&lt;111283467407-ia17tmh2tslj37be3r1ak8p2784ut37n.apps.googleusercontent.com&gt;';
        var API_KEY = '&lt;AIzaSyB_NUYfmr2FlZgC2oMYmWKk9lTQo0VnN_0&gt;';
  
        // Array of API discovery doc URLs for APIs used by the quickstart
        var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
  
        // Authorization scopes required by the API; multiple scopes can be
        // included, separated by spaces.
        var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
  
        var authorizeButton = document.getElementById('authorize_button');
        var signoutButton = document.getElementById('signout_button');
  
        /**
         *  On load, called to load the auth2 library and API client library.
         */
        function handleClientLoad() {
          gapi.load('client:auth2', initClient);
        }
  
        /**
         *  Initializes the API client library and sets up sign-in state
         *  listeners.
         */
        function initClient() {
          gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
          }).then(function () {
            // Listen for sign-in state changes.
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
  
            // Handle the initial sign-in state.
            updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
            authorizeButton.onclick = handleAuthClick;
            signoutButton.onclick = handleSignoutClick;
          }, function(error) {
            appendPre(JSON.stringify(error, null, 2));
          });
        }
  
        /**
         *  Called when the signed in status changes, to update the UI
         *  appropriately. After a sign-in, the API is called.
         */
        function updateSigninStatus(isSignedIn) {
          if (isSignedIn) {
            authorizeButton.style.display = 'none';
            signoutButton.style.display = 'block';
            listUpcomingEvents();
          } else {
            authorizeButton.style.display = 'block';
            signoutButton.style.display = 'none';
          }
        }
  
        /**
         *  Sign in the user upon button click.
         */
        function handleAuthClick(event) {
          gapi.auth2.getAuthInstance().signIn();
        }
  
        /**
         *  Sign out the user upon button click.
         */
        function handleSignoutClick(event) {
          gapi.auth2.getAuthInstance().signOut();
        }
  
        /**
         * Append a pre element to the body containing the given message
         * as its text node. Used to display the results of the API call.
         *
         * @param {string} message Text to be placed in pre element.
         */
        function appendPre(message) {
          var pre = document.getElementById('content');
          var textContent = document.createTextNode(message + '\n');
          pre.appendChild(textContent);
        }
  
        /**
         * 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() {
          gapi.client.calendar.events.list({
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime'
          }).then(function(response) {
            var events = response.result.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.');
            }
          });
        }
  
      &lt;/script&gt;
  
      &lt;script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When i execute this i get the following error:</p>
  
  <p>Google Calendar API Quickstart</p>
  
  <pre><code>{
    "error": {
      "errors": [
        {
          "domain": "usageLimits",
          "reason": "keyInvalid",
          "message": "Bad Request"
        }
      ],
      "code": 400,
      "message": "Bad Request"
    }
  }
  </code></pre>
  
  <p>Anyone who can help me solve this?</p>