new calendar

.gitignore

@@ -140,3 +140,5 @@ static/app.js
 static/app.js.map
 static/web.*.js
 static/web.*.js.map
+static/cal.js
+static/cal.js.map

content/events.md

@@ -11,15 +11,31 @@ menu:
   .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);
+  }
 </style>
 
+<div id="calendar-js"></div>
+<script src='/cal.js'></script>
+
 <div class="article-category">
 
 [View Full Calendar](https://calendar.google.com/calendar/embed?src=62da059a43acfa2924e50e6aaa43e3aed3728f7eda51af7d7a43f0313404e09c%40group.calendar.google.com&amp;ctz=America%2FChicago)
 
-</div>
-
-<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FChicago&mode=AGENDA&src=NjJkYTA1OWE0M2FjZmEyOTI0ZTUwZTZhYWE0M2UzYWVkMzcyOGY3ZWRhNTFhZjdkN2E0M2YwMzEzNDA0ZTA5Y0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%2333B679" width="600" height="600" frameborder="0" scrolling="no" style="margin: 10px auto; width: 100%; border: 0;"></iframe>
-<br>
-
 [iCal Calendar Subscription Link](webcal://calendar.google.com/calendar/ical/62da059a43acfa2924e50e6aaa43e3aed3728f7eda51af7d7a43f0313404e09c%40group.calendar.google.com/public/basic.ics)
+
+</div>

package.json

@@ -9,6 +9,11 @@
     "@capacitor/ios": "^5.5.1",
     "@capgo/capacitor-updater": "^5.3.26",
     "@capgo/cli": "^3.14.42",
+    "@fullcalendar/core": "^6.1.9",
+    "@fullcalendar/daygrid": "^6.1.9",
+    "@fullcalendar/icalendar": "^6.1.9",
+    "@fullcalendar/list": "^6.1.9",
+    "ical.js": "^1.5.0",
     "parcel": "^2.9.3"
   },
   "targets": {
@@ -17,6 +22,12 @@
       "distDir": "static",
       "context": "browser",
       "outputFormat": "global"
+    },
+    "cal": {
+      "source": "src/cal.js",
+      "distDir": "static",
+      "context": "browser",
+      "outputFormat": "global"
     }
   }
 }

src/cal.js

@@ -0,0 +1,25 @@
+import { Calendar } from '@fullcalendar/core';
+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: 'listMonth',
+  events: {
+    url: '/basic.ics',
+    format: 'ics' // important!
+  },
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'listYear,dayGridMonth'
+  }
+});
+
+calendar.render();