title: fullcalendar, can i add location from gcal and can i give different colors based on different location events (from the same calendar)
body: <p>this is my code, the calendar and events display correctly but i want to give them more color and a location, can somebody please help?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset='utf-8' /&gt;
  &lt;link href='fullcalendar-3.8.0/fullcalendar.min.css' rel='stylesheet' /&gt;
  &lt;link href='fullcalendar-3.8.0/fullcalendar.print.min.css' rel='stylesheet' media='print' /&gt;
  &lt;script src='fullcalendar-3.8.0/lib/moment.min.js'&gt;&lt;/script&gt;
  &lt;script src='fullcalendar-3.8.0/lib/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='fullcalendar-3.8.0/fullcalendar.min.js'&gt;&lt;/script&gt;
  &lt;script src='fullcalendar-3.8.0/gcal.min.js'&gt;&lt;/script&gt;
  &lt;script&gt; 
      $(document).ready(function() {
          $('#calendar').fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
  
              displayEventTime: true, // don't show the time column in list view
              editable: true,       defaultView: 'agendaWeek',
              googleCalendarApiKey: 'private', 
              // Key van de google calender 
              events: { url:'private' },
              eventClick: function(event) {
                  // opens events in a popup window
                  window.open(event.url, 'gcalevent', 'width=700,height=600');
                  return false;
              },
  
              loading: function(bool) {
                  $('#loading').toggle(bool);
              }
          });
      });
  &lt;/script&gt;
  &lt;style&gt;
      body {
          margin: 40px 10px;
          padding: 0;
          font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
          font-size: 14px;   
      }
      #loading {
          display: none;
          position: absolute;
          top: 10px;
          right: 10px;   
      }
  
     #calendar {
         max-width: 900px;
         margin: 0 auto;   }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='loading'&gt;loading...&lt;/div&gt;
      &lt;div id='calendar'&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>