new calendar views

pizzapanther · Dec 8, 2023 · f0de907 · f0de907
1 parent a81633e
commit f0de907
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 109 deletions.
diff --git a/content/events-month.md b/content/events-month.md
@@ -0,0 +1,39 @@
+---
+title: "Calendar of Events"
+menu:
+  main:
+    name: Events
+    weight: -80
+    params:
+      icon: calendar-event
+---
+
+<div class="article-category float-butt">
+  <a href="/events/">View List</a>
+</div>
+
+<link rel="stylesheet" href="/cal.css" />
+<div id="calendar-js" style="clear: both;"></div>
+<script src='/cal.js'></script>
+<script>
+  load_calendar('dayGridMonth');
+</script>
+
+<div class="article-category">
+
+[View on Google Calendar](https://calendar.google.com/calendar/embed?src=62da059a43acfa2924e50e6aaa43e3aed3728f7eda51af7d7a43f0313404e09c%40group.calendar.google.com&amp;ctz=America%2FChicago)
+
+[iCal Calendar Subscription Link](webcal://calendar.google.com/calendar/ical/62da059a43acfa2924e50e6aaa43e3aed3728f7eda51af7d7a43f0313404e09c%40group.calendar.google.com/public/basic.ics)
+
+</div>
+
+<dialog id="dialog" class="main-article text">
+  <div class="article-category" style="float: right; display: block">
+    <a href="javascript:void(0);" onclick="document.querySelector('#dialog').close();" style="font-weight: bold; border-radius: 30px; font-size: 12px;">X</a>
+  </div>
+  <h3>Narf</h3>
+  <hr style="margin: 0; width: 100%;">
+  <section class="article-content">
+    <p>content</p>
+  </section>
+</dialog
diff --git a/content/events.md b/content/events.md
@@ -7,87 +7,17 @@ menu:
     params:
       icon: calendar-event
 ---
-<style>
-  .article-time {
-    display: none;
-  }
 
-  h2.fc-toolbar-title {
-    border-left: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  a.fc-list-day-text {
-    color: #000;
-    font-weight: bold;
-    font-size: 120%;
-  }
-
-  .fc .fc-list-event:hover td {
-    background-color: rgba(55, 136, 216, 0.5);
-  }
-
-  dialog[open] {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-
-  dialog {
-    opacity: 0;
-    transform: scaleY(0);
-    transition:
-      opacity 0.3s ease-out,
-      transform 0.3s ease-out,
-      overlay 0.3s ease-out allow-discrete,
-      display 0.3s ease-out allow-discrete;
-    /* Equivalent to
-    transition: all 0.7s allow-discrete; */
-    background: var(--body-background);
-    color: var(--card-text-color-main);
-    width: 80%;
-    max-width: 500px;
-    height: 320px;
-    max-height: 90%;
-  }
-
-  /*   Before-open state  */
-  /* Needs to be after the previous dialog[open] rule to take effect,
-      as the specificity is the same */
-  @starting-style {
-    dialog[open] {
-      opacity: 0;
-      transform: scaleY(0);
-    }
-  }
-
-  /* Transition the :backdrop when the dialog modal is promoted to the top layer */
-  dialog::backdrop {
-    background-color: rgb(0 0 0 / 0);
-    transition:
-      display 0.3s allow-discrete,
-      overlay 0.3s allow-discrete,
-      background-color 0.3s;
-    /* Equivalent to
-    transition: all 0.7s allow-discrete; */
-  }
-
-  dialog[open]::backdrop {
-    background-color: rgb(0 0 0 / 0.50);
-  }
-
-  /* This starting-style rule cannot be nested inside the above selector
-  because the nesting selector cannot represent pseudo-elements. */
-
-  @starting-style {
-    dialog[open]::backdrop {
-      background-color: rgb(0 0 0 / 0);
-    }
-  }
-</style>
+<div class="article-category float-butt">
+  <a href="/events-month/">View Month</a>
+</div>
 
-<div id="calendar-js"></div>
+<link rel="stylesheet" href="/cal.css" />
+<div id="calendar-js" style="clear: both;"></div>
 <script src='/cal.js'></script>
+<script>
+  load_calendar('list');
+</script>
 
 <div class="article-category">
 

diff --git a/src/cal.js b/src/cal.js
@@ -3,36 +3,51 @@ import iCalendarPlugin from '@fullcalendar/icalendar';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import listPlugin from '@fullcalendar/list';
 
-const calendarEl = document.getElementById('calendar-js');
-const calendar = new Calendar(calendarEl, {
-  plugins: [
-    iCalendarPlugin,
-    dayGridPlugin,
-    listPlugin
-  ],
-  initialView: 'listWeek',
-  events: {
-    url: 'https://faas-sfo3-7872a1dd.doserverless.co/api/v1/web/fn-67f34cf4-c3ed-479c-839e-2f7206029fcb/wildweb/calcache',
-    format: 'ics' // important!
-  },
-  headerToolbar: {
-    left: 'prev,next today',
-    center: 'title',
-    right: 'listWeek,dayGridMonth'
-  },
-  eventClick: (info) => {
-    var e = info.event;
-    var title = e.title + '<br>' + e.start.toLocaleDateString() + ' ' + e.start.toLocaleTimeString();
-    title = title.replace(":00 ", " ");
-    document.querySelector('#dialog h3').innerHTML = title;
-    document.querySelector('#dialog section p').innerHTML = info.event.extendedProps.description || "<strong>no details found</strong>";
-    document.querySelector('#dialog').showModal();
-    setTimeout(() => {
-      document.querySelectorAll('#dialog section a').forEach((item) => {
-        item.target = '_blank';
-      });
-    }, 0);
+function load_calendar(view) {
+  var header = {left: '', right: ''};
+  if (view == 'dayGridMonth') {
+    header = {
+      left: 'title',
+      right: 'prev,next today'
+    };
   }
-});
 
-calendar.render();
+  const calendarEl = document.getElementById('calendar-js');
+  const calendar = new Calendar(calendarEl, {
+    plugins: [
+      iCalendarPlugin,
+      dayGridPlugin,
+      listPlugin
+    ],
+    initialView: view,
+    events: {
+      url: 'https://faas-sfo3-7872a1dd.doserverless.co/api/v1/web/fn-67f34cf4-c3ed-479c-839e-2f7206029fcb/wildweb/calcache',
+      format: 'ics' // important!
+    },
+    headerToolbar: header,
+    visibleRange: function(currentDate) {
+      var startDate = new Date(currentDate.valueOf());
+      var endDate = new Date(currentDate.valueOf());
+      startDate.setDate(startDate.getDate());
+      endDate.setDate(endDate.getDate() + 90);
+      return { start: startDate, end: endDate };
+    },
+    eventClick: (info) => {
+      var e = info.event;
+      var title = e.title + '<br>' + e.start.toLocaleDateString() + ' ' + e.start.toLocaleTimeString();
+      title = title.replace(":00 ", " ");
+      document.querySelector('#dialog h3').innerHTML = title;
+      document.querySelector('#dialog section p').innerHTML = info.event.extendedProps.description || "<strong>no details found</strong>";
+      document.querySelector('#dialog').showModal();
+      setTimeout(() => {
+        document.querySelectorAll('#dialog section a').forEach((item) => {
+          item.target = '_blank';
+        });
+      }, 0);
+    }
+  });
+
+  calendar.render();
+}
+
+window.load_calendar = load_calendar;
diff --git a/static/cal.css b/static/cal.css
@@ -0,0 +1,94 @@
+.article-time {
+  display: none;
+}
+
+h2.fc-toolbar-title {
+  border-left: 0;
+  margin: 0;
+  padding: 0;
+}
+
+a.fc-list-day-text {
+  color: #000;
+  font-weight: bold;
+  font-size: 120%;
+}
+
+.fc .fc-list-event:hover td {
+  background-color: rgba(55, 136, 216, 0.5);
+}
+
+dialog[open] {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+dialog {
+  opacity: 0;
+  transform: scaleY(0);
+  transition:
+    opacity 0.3s ease-out,
+    transform 0.3s ease-out,
+    overlay 0.3s ease-out allow-discrete,
+    display 0.3s ease-out allow-discrete;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+  background: var(--body-background);
+  color: var(--card-text-color-main);
+  width: 80%;
+  max-width: 500px;
+  height: 320px;
+  max-height: 90%;
+}
+
+/*   Before-open state  */
+/* Needs to be after the previous dialog[open] rule to take effect,
+    as the specificity is the same */
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 0);
+  transition:
+    display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete,
+    background-color 0.3s;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+}
+
+dialog[open]::backdrop {
+  background-color: rgb(0 0 0 / 0.50);
+}
+
+/* This starting-style rule cannot be nested inside the above selector
+because the nesting selector cannot represent pseudo-elements. */
+
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0);
+  }
+}
+
+#calendar-js {
+  min-height: calc(100vh - 100px);
+  max-height: calc(100vh - 100px);
+}
+
+.float-butt {
+  display: block;
+  position: relative;
+}
+
+.float-butt a {
+  display: block;
+  position: absolute;
+  margin-top: -50px;
+  right: 0;
+  z-index: 100;
+}
diff --git a/static/overrides.css b/static/overrides.css
@@ -52,3 +52,13 @@ p.j {
 .text .article-content a {
   text-decoration: underline;
 }
+
+@media (max-width: 440px) {
+  .main-container {
+    padding: 0;
+  }
+
+  .article-content {
+    padding: 0 7px;
+  }
+}