AAGeek Events
A single-file, client-side events calendar that pulls events from a public Google Calendar feed — plus the NETA 65 Grapevine / La Viña events feed — and lets users filter them by class, category, venue, and day-of-week — without any server.
The app is one index.html plus a few static files that make it an installable, offline-capable app (manifest.webmanifest, sw.js, icons/, screenshots/). Drop the folder on GitHub Pages, Netlify, Cloudflare Pages, S3, or any static host. No build step.
How the filtering works (the important part)
Google Calendar gives you an event title, a start/end time, a location, and a description — but no structured way to tag events with custom labels like "this is a Speaker meeting" or "this is virtual."
The trick this app uses: the first line of every event's description carries the tags, in a fixed format:
<Class>|<Category>|<Venue>
That single tag-line is followed by <br><br>--<br> (a visual divider used by Google Calendar's rich text editor) and then the human-readable event description. Example:
AAGeek|Speaker|Virtual<br><br>--<br>
As Bill Sees It<br>
George H — Nobleton, ON (CA) & Harold L — St Louis, MO<br>
ID: 82694310797 PW: 124145<br>
https://us06web.zoom.us/j/82694310797?pwd=...
When you create or edit an event in Google Calendar, the first line of the Description must be exactly the three pipe-separated tags. The rest of the description is whatever you'd normally write.
The tag vocabulary
| Dimension | Allowed values |
|---|
| Class | AAGeek · NETA65 · AAWSNY |
| Category | Study · Seminar · Speaker · Series · Story · Service · Session |
| Venue | Virtual · Physical · Hybrid |
Tags are case-insensitive in the parser, but please write them in the canonical form above so the calendar stays consistent. Order doesn't matter — Virtual|AAGeek|Speaker is parsed identically to AAGeek|Speaker|Virtual.
What the parser does, step by step
- Fetches the public ICS feed from Google (URL is in
ICS_URL near the top of the <script> block).
- Parses with ical.js which handles the full iCalendar spec — line folding, escape sequences, recurring events (
RRULE), exception dates (EXDATE), recurrence overrides (RECURRENCE-ID), and time zones (TZID).
- For each event, takes the
description property — which Google delivers as HTML (<br>, <a href>, entities like & and ').
- Splits the description at the first
<br>, </p>, or newline to isolate the tag-line.
- HTML-decodes that segment (so
& becomes &), then splits on | and trims each piece.
- For each piece, case-insensitive matches it against the three tag vocabularies above. The first piece that matches the Class list becomes the event's class; same for category and venue. Pieces that don't match are ignored.
- Strips the tag-line +
-- separator from the description body so users see clean text in the event details dialog.
- Sanitizes the remaining HTML through a manual allow-list (
<br>, <a>, <p>, <strong>, <em>, <ul>/<ol>/<li>, etc.) and validates link schemes (only http, https, mailto, tel, zoommtg, zoomus, webcal are allowed — everything else gets unwrapped, preventing javascript: injection).
- Stores both the sanitized HTML (for the event dialog) and a plain-text version (for card previews and search) on the event object.
If an event's first line doesn't include |, or doesn't match any known tag, that event simply ends up with no tags — it'll show up under "All" filters but disappear from any specific filter.
NETA 65 Grapevine events (automatic)
Everything on the NETA 65 Grapevine / La Viña events page comes into the app on its own, from that site's calendar feed (https://grapevine.neta65.org/events.ics). Don't also add those events to Google Calendar — they would show up twice.
Those events have no tag line, so the app gives each one the line a hand-entered event would have, NETA65|Service|<Venue>, before the normal parser sees it:
| The event has… | Venue |
|---|
| a web link (Zoom, etc.) as its location | Virtual |
| a street address, and an online-meeting link in its description | Hybrid |
| a street address, or no location yet ("venue to be announced") | Physical |
| no location, but an online-meeting link in its description | Virtual |
Image attachments on those events (the flyers, usually Google Drive images) become IMG: lines, so they show in the event dialog like any other event image. The feed lists each date of a monthly event separately; dates of the same event are grouped back together, so they get the 🔁 badge and a summary such as "Monthly · third Wednesday".
This is the beginning of the README. Read the rest at the original. Read the full README ↗
