GAS Calendar - Pitchfork Basic

code.gs

function doGet() {
  var root = XmlService.createElement('CALENDAR');                                                  // Set variable "root" equal to a new node of our XML structure named CALENDAR
  var calendarId = '0e7imu3th31s61s05p0kthvup4@group.calendar.google.com';                          // Public calendar we're connecting to
  var calendar = CalendarApp.getCalendarById(calendarId);                                           // Connection to Calendar
  var calendarName = calendar.getName();                                                            // Set variable "calendarName" equal to the calendar.getName value
  var calendarDesc = calendar.getDescription();                                                     // Set variable "calendarDesc" equal to the calendar.getDescription value
  var optionalArgs = {                                                                              // Parameters to filter results. See all parameters at https://bit.ly/GAScal_eventlist
    timeMin: (new Date()).toISOString(),
    showDeleted: false,
    singleEvents: true,
    orderBy: 'startTime'
  };
  var response = Calendar.Events.list(calendarId, optionalArgs);                                    // Get the calendar content, based on parameters
  var events = response.items;
  var meta = XmlService.createElement('META');                                                      // Set variable "meta" equal to a new node of our XML structure named META
  var url = XmlService.createElement('URL').setText(calendarId);                                    // Set variable "url" equal to a new node of our XML structure named URL and insert the value of calendarId in the node
  var name = XmlService.createElement('NAME').setText(calendarName);                                // Set variable "name" equal to a new node of our XML structure named NAME and insert value of calendarName in the node
  var desc = XmlService.createElement('DESC').setText(calendarDesc);                                // Set variable "desc" equal to a new node of our XML structure named DESC and insert value of calendarDesc in the node
  meta.addContent(url);                                                                             // Add the nodes and values of variables url, name, desc to the META node
  meta.addContent(name);
  meta.addContent(desc);
  root.addContent(meta);                                                                            // Add the META node to the root CALENDAR node
  if (events.length > 0) {
    for (i = 0; i < events.length; i++) {
      var event = events[i];
      var child = XmlService.createElement('EVENT');                                                // For each of the events returned, create a new child node in our XML structure named EVENT
      var EVENT_START = XmlService.createElement('EVENT_START').setText(events[i].start.date);      // Set variable "EVENT_START" equal to a new node of our XML structure named EVENT_START and insert the value of start.date in the node
      var EVENT_END = XmlService.createElement('EVENT_END').setText(events[i].end.date);            // Set variable "EVENT_END" equal to a new node of our XML structure named EVENT_END and insert the value of end.date in the node
      var EVENT_NAME = XmlService.createElement('EVENT_NAME').setText(events[i].summary);           // Set variable "EVENT_NAME" equal to a new node of our XML structure named EVENT_NAME and insert the value of summary in the node
      var EVENT_DESC = XmlService.createElement('EVENT_DESC').setText(events[i].description);       // Set variable "EVENT_DESC" equal to a new node of our XML structure named EVENT_DESC and insert the value of description in the node
      var EVENT_LOC = XmlService.createElement('EVENT_LOC').setText(events[i].location);            // Set variable "EVENT_LOC" equal to a new node of our XML structure named EVENT_LOC and insert the value of location in the node
      child.addContent(EVENT_START);                                                                // Add the nodes and values of variables EVENT_START, EVENT_END, EVENT_NAME, EVENT_DESC, EVENT_LOC to the EVENT node
      child.addContent(EVENT_END);
      child.addContent(EVENT_NAME);
      child.addContent(EVENT_DESC);
      child.addContent(EVENT_LOC);
      root.addContent(child);                                                                       // Add the EVENT node to the root CALENDAR node
      }
  var document = XmlService.createDocument(root);                                                   // Create an XML document from root (CALENDAR node) containing all child nodes and their content
  var xml = XmlService.getPrettyFormat().format(document);                                          // Set variable "xml" equal to a human readable format of our XML document
  Logger.log(xml);                                                                                  // For good measure and basic GAS testing, log our formatted XML document to the logger
  return ContentService.createTextOutput(xml).setMimeType(ContentService.MimeType.XML);             // createTextOutput is a requirement to "Deploy as Web App" and allows us to access the XML data from other files
  } else {
    Logger.log('No upcoming events found.');                                                        // If this shows up in the log, something is wrong. Did you create the calendar? Is it public? Are there events on it?
  } 
}

index.php

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

<head>
  <meta charset="UTF-8">
  <title>Pitchfork Guide to Music Festivals (GAS Calendar)</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='css/xjvpgo.css'>
  <link rel="stylesheet" href="css/style.css">
  <link data-react-helmet="true" rel="shortcut icon" type="image/png" href="https://cdn.pitchfork.com/assets/misc/favicon-32.png"/>
  <!-- This grid/flexbox layout is based on https://codepen.io/tutsplus/pen/YGQKAy -->
</head>

<body>

<div class="support-grid"></div>
      
<?php

// Load the XML data using the web app URL provided after publish
$xml = simplexml_load_file('https://script.google.com/macros/s/AKfycbxR3xH9lc_jEM0684pEZkbLSAjtQ51Rwq_eCR7ssRzUkzpZmBU/exec');

// Format the Google calendar name as page heading
echo "<div class=\"header\"><h1 class=\"main-heading\">".$xml->META->NAME."</h1>";

// Format the Google calendar description as page sub-heading
echo "<h2 class=\"sub-heading\">".$xml->META->DESC."</h2>";

// Format the Google calendar URL to provide Subscribe and See All links
echo "<a class=\"\" target=\"_blank\" href=\"https://calendar.google.com/calendar/render?cid=".$xml->META->URL."\"><h4>Subscribe to Calendar</h4></a>";
echo "<a class=\"\" target=\"_blank\" href=\"https://calendar.google.com/calendar/embed?src=".$xml->META->URL."\"><h4>See All</h4></a></div>";

// Start events container
echo "<div class=\"band\">";

// Start an increment variable to create unique id's for each event
$i = 1;

// Event loop
foreach($xml->EVENT as $festivals) {
      echo "<div class=\"item-".$i."\">";
            echo "<a href=\"#\" class=\"card\">";
              echo "<article>";
                echo "<h1>".$festivals->EVENT_NAME."</h1>";
                echo "<p>".$festivals->EVENT_DESC."</p>";
                $startDate = date('F d, Y', strtotime($festivals->EVENT_START));
                $endDate = date('F d, Y', strtotime($festivals->EVENT_END));
                echo "<span>".$startDate." - ".$endDate."</span>";
              echo "</article>";
            echo "</a>";
      echo "</div>";
  $i++;
}

?>

  </div></div>
</body>
</html>

ou-asset.php

<?php include '/path/to/your/file/index.php'; ?>

style.css

/* Solving Problems With CSS Grid and Flexbox: The Card UI https://codepen.io/tutsplus/pen/YGQKAy  */

html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 20px 0;
}
a:hover, a:focus, a:active {
  cursor: auto;
}
.header {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2em;
}
.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

/*h1, h2, h3 {
  font-weight: 700;
  letter-spacing: 2px;
}*/

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }  
  .item-1 {
  grid-column: 1/ span 2;
  }
  .item-1 h1 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* card */

.card {
  min-height: 100%;
  background: white;
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.card:hover {
/*  top: -2px;
  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,0.2);
          box-shadow: 0 4px 5px rgba(0,0,0,0.2);*/
  cursor: auto;
}

.card article {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-flex: 1;
  
      -ms-flex: 1;
  
          flex: 1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  
}
.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p { 
  -webkit-box-flex: 1; 
      -ms-flex: 1; 
          flex: 1; /* make p grow to fill available space*/
  line-height: 1.4;
}

/* typography */
h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}