Pokémon Events Calendar

A single-page, dependency-light web calendar showing competitive Pokémon events (TCG, VGC, GO, prereleases, community) from six public Google Calendars. Plain HTML/CSS/JS — no framework, no build step. Deployed on GitHub Pages and embedded into carrd.co pages as an auto-sizing iframe widget.

Live: https://pizzacatz.github.io/pokemon-calendar-webapp/

Architecture

pokedata.ovh ICS feeds
      │  (Google Apps Script sync, daily — lives in the private
      │   pizzacatz/pokemon-calendar repo; copies in *.gs here)
      ▼
6 public Google Calendars  ──Google Calendar API──▶  this app (FullCalendar 6.1.21)
                                                          │
                                                          ▼
                                             GitHub Pages ─▶ carrd.co iframes

File	Role
index.html	page shell, CDN script tags, filter panel + modal markup
app.js	config, calendar setup, filtering, custom week view, modals, embed plumbing
styles.css	dark theme (#1A1A1A / #1F1F1F / gold #FFD180), mobile rules
pokemon_calendar_sync*.gs	reference copies of the Apps Script pipeline (not used by the app)
pokemon-events-calendar-PRD.md	original spec + addendum of post-launch changes

Configuration (top of app.js)

• GOOGLE_CALENDAR_API_KEY — public by design; must stay restricted in Google Cloud Console to the Calendar API + HTTP referrers (pizzacatz.github.io/*, localhost:8000/*).
• DISPLAY_TIME_ZONE — fixed America/New_York; times are labeled "ET".
• CALENDARS — one entry per category (id, chip label, color, Google Calendar ID). Add/remove categories by editing only this list.

Every calendar must be public with "See all event details" — the free/busy-only sharing level strips titles/locations and events render as "(untitled)".

Embedding (carrd.co or any site)

Important: carrd "pages" are sections of ONE HTML document, so every embed on the site coexists in the same DOM. Never target the iframe by id (ids collide and all height messages land on the first iframe — some embeds stay clipped, others inflate with empty space). Match by e.source instead.

Each embed is just an iframe (vary view=/cats= per page):

<iframe
  src="https://pizzacatz.github.io/pokemon-calendar-webapp/?embed=1"
  style="width:100%; height:900px; border:0;"
  scrolling="no"
  allow="clipboard-write"
  title="Pokémon Events Calendar"></iframe>

Plus this listener once anywhere on the site (per-embed duplicates are harmless — it routes each message to the iframe that sent it):

<script>
window.addEventListener('message', function (e) {
  if (e.origin !== 'https://pizzacatz.github.io') return;
  if (!e.data || e.data.type !== 'pokecal:height') return;
  document.querySelectorAll('iframe').forEach(function (f) {
    if (f.contentWindow === e.source) f.style.height = e.data.height + 'px';
  });
});
</script>

The app posts its content height (pokecal:height) whenever it changes — view switches, data loads, modals opening/closing — so each iframe grows AND shrinks to fit and the page never double-scrolls. The 900px is only a pre-load fallback.

Per-page URL parameters

Param	Values	Effect
embed=1	—	bare widget: hides the app's own header/footer
view=	month, week, list (alias agenda)	initial view; default month
cats=	comma list of tcg-cups, tcg-challenges, vgc, go, prerelease(s), community	pre-activates those filter chips at load (visitors can still change them)

Examples for dedicated pages:

TCG page (month):        ?embed=1&view=month&cats=tcg-cups,tcg-challenges
VG/GO page (agenda):     ?embed=1&view=agenda&cats=vgc,go
Prerelease page (agenda): ?embed=1&view=agenda&cats=prereleases
Everything (default):    ?embed=1

Any number of widgets can coexist — the e.source-matching listener above routes each height message to its own iframe automatically.

Features

• Views: Month, custom "Week" (7-day strip with per-category activity dots + one-day list, like the old eventscalendar.co widget), and a List.
• List view: the next 30 days starting today (never past events first); prev/next step 30 days. "View all" (toolbar and list footer) shows every upcoming event for the next 12 months, with no paging. Day headers read "October 24, 2026 - Saturday" ("Oct 24 - Sat" on phones) with a per-day event count; today's is marked. Busy days are never capped — the point is to see everything. An empty range offers "View all" instead of a dead end.
• Filtering: chips are filters, not visibility toggles — nothing selected (the "All" chip lit) shows everything; tapping a category shows only the selected categories (additive); "All" resets. Works in every view (adds/removes FullCalendar event sources). Empty filter results show a "tap All to reset" note.
• Mobile (≤767px): month cells show dots instead of chips (up to 4; busy days show 3 dots + a "+N" count); tapping a day with events opens a list modal (title, time below, › chevrons); list rows stack title / time / address; toolbar stacks; modals get a full-width bottom Close button and anchor near the tap inside embeds.
• Busy days on desktop: Month cells show up to 4 rows, then a "+n more" link that opens the same day-list modal as a phone tap (not FullCalendar's popover, which the embed clipped). Names for each overlay are in docs/VOCABULARY.md → "UI names".
• Event popup: title, when (ET), where (Google Maps directions link), description text (URLs become "Event page" links), inline images from Drive attachments or direct image URLs in the description. Never links to the Google Calendar event page. Opened from a day list, it has a ‹ Back button returning to that list.
• Copy event details: two icon buttons in the popup, there to make sharing an event elsewhere (especially Discord) a one-click job. The clipboard icon copies title / when / where / official link as plain text; the Discord icon copies the same lines with a bold title, the address as a Google Maps markdown link and the URL as an "Official event page" link (both wrapped in <…> so Discord shows no preview). The official link is the first non-image URL in the description. Uses navigator.clipboard with an execCommand('copy') fallback, so it works inside cross-origin iframes even without allow="clipboard-write".
• Locations are cleaned of the upstream feed's , US, , City/US tail.

Community event submissions (Google Form)

Visitors submit events through a Google Form; the owner approves them in the linked response sheet; an Apps Script (community_event_form.gs) publishes approved rows to the Community Events calendar, which the widget already displays. Nothing goes live without approval.

Form questions — titles must match community_event_form.gs's Q map exactly:

Question title	Type	Required
Game	Multiple choice (TCG / VGC / GO / Other)	no (becomes the title prefix)
Event name	Short answer	yes
Event Date	Date	yes
Start Time	Time	no (blank = all-day event)
End Time	Time	no (blank = start + 2h)
Venue name	Short answer	yes (goes in the title: "… @ VENUE")
Venue Address	Short answer	yes
Description	Paragraph	no
Event link	Short answer	no
Image url	Short answer	no (renders in the event popup)

Published titles follow the site convention GAME Event name @ VENUE, and the location field is Venue name, Venue Address.

Setup: create the form → link responses to a new spreadsheet → in that spreadsheet Extensions → Apps Script → paste community_event_form.gs → set the project time zone to America/New_York (Project Settings) → run setup() once and authorize. Recommended form settings: collect email addresses (verified) to deter spam.

Moderation: each submission emails NOTIFY_EMAIL and sits at PENDING. In the sheet, set Status to APPROVED to publish (script fills in the Event ID and flips it to PUBLISHED), REJECTED to decline, or REMOVE on a published row to delete the event. The sheet's "Community events → Process all rows now" menu re-sweeps everything if a trigger is ever missed.

Development

python3 -m http.server 8000    # serve from the repo root
# http://localhost:8000        (localhost:8000 must be in the API key's referrer list)

Deploy = git push — the "Deploy to GitHub Pages" Actions workflow (.github/workflows/pages.yml) publishes the repo as-is, typically in under a minute. Check on a deploy with gh run list. (The legacy Jekyll Pages build was abandoned in July 2026 after repeated 20-minute stalls and opaque "Page build failed" errors.)

Gotchas (hard-won)

• Fake-UTC dates: with a named timeZone and no timezone plugin, FullCalendar's event.start/end are Dates whose UTC fields hold the Eastern wall time. Format with timeZone:'UTC' and label "ET" manually; formatting with America/New_York double-shifts.
• Iframe height: body.scrollHeight misses the last element's collapsed bottom margin and floors fractional heights — report +16px or the bottom border clips. Modals are position:fixed (invisible to body height), so they're measured separately.
• Modal position in the embed: fixed + centered = middle of the whole grown iframe, not the visitor's screen. The app anchors modal boxes to the last click's Y position when embedded.
• Injected DOM vs FullCalendar: FC recreates its view harness on view changes and can strand foreign elements (the week strip); re-check position each update, not just isConnected.
• Drive attachments only display if the file itself is shared "anyone with the link" — a public calendar does not make its attachments public. Failed images fall back to plain links.
• Headless Chrome clamps windows to 500px wide — "phone" screenshots below that are crops, not reflows. Synthetic MouseEvents can lose coordinates in iframes; only trusted input proves click-anchoring.