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

1. Fetches the public ICS feed from Google (URL is in ICS_URL near the top of the <script> block).
2. 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).
3. For each event, takes the description property — which Google delivers as HTML (<br>, <a href>, entities like & and ').
4. Splits the description at the first <br>, </p>, or newline to isolate the tag-line.
5. HTML-decodes that segment (so & becomes &), then splits on | and trims each piece.
6. 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.
7. Strips the tag-line + -- separator from the description body so users see clean text in the event details dialog.
8. 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).
9. 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".

---

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗