17 October Building a Single-Day Events Calendar That Runs Entirely Client-Side — 58 Observances, 3 Pages, No Server

Title: Building a Single-Day Events Calendar That Runs Entirely Client-Side — 58 Observances, 3 Pages, No Server

TL;DR: 58 observances, 3 static pages, for a single day (17 October 2026). No framework, no server, no tracking. Just HTML + CSS + ~200 lines of JS. Live demo: https://www.2026.lat/day/17/index.html

Hello 😁🤍🇮🇸

I wanted to share a small project I've been building and get some honest feedback. It's a single-day events calendar for 17 October 2026, and it ended up being a lovely exercise in doing a lot with very little.

🔗 Live demo: https://www.2026.lat/day/17/index.html

The core idea: one day, three pages, fifty-eight observances — global UN days, national holidays, and local cultural events. Everything runs in the browser. No framework, no build step, no backend.

The Stack (or Lack Thereof)

• Plain HTML — three files: index.html, index1.html, index2.html
• One CSS file — dark navy theme, white text, custom CSS properties
• One JS file — about 200 lines, no dependencies
• Zero external requests — no fonts, no CDN, no analytics, no cookies

Everything is served as static files. You could open it from a USB stick and it would still work (except for the Wikipedia links).

What's Inside

The pages are split geographically:

• Page 1 — 9 verified observances (3 global UN days + Argentina's Loyalty Day + 5 cultural events in Colombia, Argentina, and Switzerland)
• Page 2 — 21 events across the Nordic countries and Europe
• Page 3 — 28 events across Oceania and the Americas

Each event card includes:

• A Finnish and English description side by side
• Wikipedia links in both languages
• A "Listen" button (Web Speech API — FI and EN voices)
• A copy-to-clipboard button

The three pages are linked with a simple navigation bar at the top, so navigation feels continuous.

A Focus on the Nordic Region (and Iceland in Particular)

Since I lean toward the North, Page 2 relies heavily on Nordic and Icelandic events. Some highlights from Iceland on 17 October 2026:

🌺 Day of Intangible Cultural Heritage — the National Museum of Iceland hosts an event celebrating sagas, rímur poetry, folk dance, and craft traditions

🏛️ Museum Weekend in Suðurnes — museums across the Reykjanes peninsula open for free, covering local history, geology, and fishing traditions

⚔️ Víkingaheimar — the Viking museum in Njarðvík opens for free, including the Íslendingur ship replica that sailed from Iceland to North America following Leif Erikson's route

🐉 Dragon-making workshop — Garðabær Public Library runs a free children's workshop inspired by Icelandic folklore

✍️ Creative writing workshop — for children aged 8–12, continuing Iceland's long storytelling tradition

🎬 Nordic Film Festival — Reykjavík screens new films from Iceland, Norway, Sweden, Denmark, and Finland

Alongside those, there are Finnish, Norwegian, and Swedish events too — the Välke light festival in Kuopio, the Matlyst food festival in Brumunddal, and a Robyn concert in Stockholm, among others.

I found it genuinely interesting how much local cultural life happens on a single ordinary Saturday in October — most of it unlisted on any official calendar.

Technical Decisions Worth Discussing

A few things I'd love feedback on:

1. document.readyState instead of DOMContentLoaded alone
Scripts loaded at the end of <body> can miss the DOMContentLoaded event entirely. I use a small onReady() helper that checks document.readyState first, so the init runs regardless of script placement.

2. Dynamic toast creation
The memo widget has a #memo-toast element, but the "Listen" and "Copy" buttons can be clicked before the memo section is reached. So showToast() now creates the toast element on demand if it's missing, instead of silently failing.

3. sessionStorage instead of localStorage
The memo (a small "notes about today" widget) uses sessionStorage so it clears when the tab closes. No permanent tracking, no data persistence across visits. This felt like the right privacy default for a calendar that explicitly says "no tracking, no cookies."

4. Adaptive maxlength
The memo's character limit is read directly from the textarea's maxlength attribute, so the JS and HTML can never disagree.

5. Speech Synthesis voice matching
Some browsers delay loading voices. I hook onvoiceschanged and try to match by full locale first (fi-FI), then fall back to language prefix (fi), then to browser default. It's not perfect but it's noticeably better than ignoring voices entirely.

Questions for You

1. Is the three-page split the right call? With 58 events on one page it would be a wall of text, but maybe there's a better pattern (search, filter, collapsible sections)?
2. How do you handle "unverified" events? Pages 2 and 3 include events from local listings and calendars that I couldn't fully confirm. They're marked with a small "ℹ️ Local notice" badge, but I wonder if there's a cleaner approach.
3. Accessibility: the pages use ARIA labels, prefers-reduced-motion, prefers-contrast, and print styles. Anything obvious missing?
4. Performance: the HTML files are large (each ~40–60 KB) because everything is inline. Is this fine for a static site, or would you break the event data into a JSON file loaded via fetch?

Final Thoughts

This project reminded me that static, hand-crafted HTML can still be powerful in 2026. No build tools, no dependencies, no framework — just a small idea, some careful CSS, and a lot of copy about why bread, repair, and Viking ships matter.

I'm simply enjoying it.
Every day is an opportunity to learn a craft, a language, a culture, a hobby, reading — or just to sit and reflect.

🔗 Try it yourself: https://www.2026.lat/day/17/index.html

Thank you 😁🇮🇸🤍