Add to Calendar,
without the bloat.

Zero dependencies. Shadow DOM. 19 KB (11 KB slim). Drop it on any page. Your visitors get Google, Outlook, Yahoo, and .ics in one click.

Try the playground GitHub

What you actually get.

Zero dependencies

No jQuery, no React, no nothing. One file. 19 KB full, 11 KB slim.

Shadow DOM

Styles don't leak in or out. Your CSS is safe.

Three modes

Web component, declarative triggers, or programmatic API.

Four calendars

Google, Outlook, Yahoo, and .ics for Apple and everything else.

12 languages

Auto-detected from lang attribute, <html lang>, or navigator.language.

Timezone-aware

Pin events to any IANA zone. DST handled via Intl.

All-day events

Set all-day="true" for date-only ICS and Google/Yahoo formats.

Keyboard nav

ArrowUp/Down, Home/End, Escape. Accessible by default.

Apache-2.0

Own the source. Fork it. Ship it. No strings.

Three lines. Done.

No build step required. Load from CDN, drop the element, ship.

npm install @freshjuice/twistcal

or load from CDN:

<twist-cal
  title="My Event"
  start="2026-02-10T14:00:00"
  end="2026-02-10T15:30:00">
</twist-cal>

<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal@1.0.0/dist/twistcal.min.js"></script>

Try the playground

Your AI agent can build this.

TwistCal ships an MCP server. Claude, Cursor, VS Code Copilot, Windsurf, any MCP client can query the config schema, read the API reference, and generate install snippets without scraping docs.

Setup guide

Add to any MCP client

{
  "mcpServers": {
    "twistcal": {
      "url": "https://twistcal.com/mcp"
    }
  }
}

Then ask your agent to build a calendar button. It calls the MCP server, gets the schema, and returns a ready-to-paste snippet.

19 KBminified (11 KB slim)

0dependencies

12languages built-in

4calendar services

Drop it in. Ship today.

No account. No signup. Just a script tag.

Try the playground Star on GitHub

Add to Calendar,without the bloat.