calendar.html

---
layout: page
styles:
  - /css/calendar.css
  - https://unpkg.com/@fullcalendar/core@4.2.0/main.min.css
  - https://unpkg.com/@fullcalendar/daygrid@4.2.0/main.min.css
  - https://unpkg.com/@fullcalendar/list@4.2.0/main.min.css
scripts:
  - /js/calendar.js
  - https://unpkg.com/@fullcalendar/core@4.2.0/main.min.js
  - https://unpkg.com/@fullcalendar/daygrid@4.2.0/main.min.js
  - https://unpkg.com/@fullcalendar/list@4.2.0/main.min.js
  - https://unpkg.com/@fullcalendar/google-calendar@4.2.0/main.min.js
calendar_url: https://calendar.google.com/calendar/embed?src=kg5v9k480jn2qahpmq33h8g7cs%40group.calendar.google.com&ctz=Europe%2FLondon
---

<div class="calendar-controls">
  <button class="calendar-button hideable" id="css-calendar-switch">Switch View</button>
  <a class="calendar-button" href="{{ page.calendar_url }}">Add to own Calendar</a>
</div>

<div class="calendar-container">
  <div class="calendar-event" id="calendar-event">
      <pre class="event-pre"><h2 class="event-tag">Event:</h2><span class="event-text" id="event-text-title"></span></pre>
      <pre class="event-pre"><h2 class="event-tag">Date:</h2><span class="event-text" id="event-text-date"></span></pre>
      <pre class="event-pre"><h2 class="event-tag">Location:</h2><span class="event-text" id="event-text-location"></span></pre>
      <pre class="event-pre"><h2 class="event-tag">More info:</h2><span class="event-text" id="event-text-description"></span></pre>
      <div class="event-buttons">
        <button class="calendar-button" id="facebook-link">Go to Facebook Event</button>
        <button class="calendar-button" id="event-close">Close</button>
      </div>
  </div>
  <div class="calendar" id="css-calendar"></div>
</div>