Skip to main content

TwistCal

Add to Calendar

Menu

Choose a theme and configure high-contrast mode. Preferences are saved in your browser only.

User Preferences

Theme

Pick a palette or follow your system preference.

High Contrast

Sharper text and borders. System follows your OS setting.

Overview

TwistCal — a lightweight, zero-dependency Add to Calendar web component. Shadow DOM, 19 KB (11 KB slim), 12 languages.

TwistCal is a zero-dependency “Add to Calendar” web component. Shadow DOM style isolation, four calendar services, 12 languages, timezone-aware — 19 KB minified (11 KB slim). Drop one script tag on any page and ship.

Three usage modes

  • Web component — <twist-cal> renders a styled dropdown button
  • Declarative triggers — data-twistcal attributes on any element
  • Programmatic API — import the URL generators and ICS builder directly

Features

  • Shadow DOM — styles don’t leak in or out
  • Four calendars — Google, Outlook, Yahoo, .ics for Apple and everything else
  • 12 languages — auto-detected from lang, <html lang>, or navigator.language
  • Timezone-aware — pin events to any IANA zone, DST-aware via Intl
  • All-day events — all-day="true" for date-only formats
  • Button variants — solid (default) and outline
  • Calendar selection — pick which services to show and in what order
  • Full CSS theming — 25+ --tc-* custom properties
  • Slim builds — drop icons, 19 KB → 11 KB
  • Generators split — import just the URL/ICS logic (3 KB)
  • Keyboard nav — ArrowUp/Down, Home/End, Escape
  • Zero dependencies — no jQuery, no React, no nothing

Next steps