Getting started

Install

npm install @freshjuice/twistcal

Or load from a CDN — no build step required:

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

Build variants

File	Format	Size	Icons	Languages
dist/twistcal.min.js	IIFE	19 KB	Yes	All 12
dist/twistcal.slim.min.js	IIFE	11 KB	No	All 12
dist/twistcal.esm.min.js	ESM	19 KB	Yes	All 12
dist/twistcal.slim.esm.min.js	ESM	11 KB	No	All 12
dist/twistcal.{lang}.min.js	IIFE	17 KB	Yes	Single lang
dist/twistcal.{lang}.slim.min.js	IIFE	9 KB	No	Single lang

{lang} is a language code: en, de, es, fr, it, pt, nl, pl, uk, ru, ja, zh. See Internationalization.

CDN examples (self-executing, no build step):

<!-- Full build with icons -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.min.js"></script>

<!-- Slim build, no icons -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.slim.min.js"></script>

<!-- Single language (e.g. German only) -->
<script defer src="https://cdn.jsdelivr.net/npm/@freshjuice/twistcal/dist/twistcal.de.min.js"></script>

First usage

Drop <twist-cal> on the page. It renders a button with a dropdown menu. All styles live in a Shadow DOM root — no bleed in either direction.

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

<twist-cal
  title="Product Launch Webinar"
  start="2026-02-10T14:00:00"
  end="2026-02-10T15:30:00"
  location="Online"
  description="Join us for the launch of TwistCal v1.">
</twist-cal>

That’s it. title, start, and end are the only required attributes — see the full attributes table.

What’s next

• Web component — all attributes, calendar selection, JSON event data
• Declarative triggers — use your own buttons with data-twistcal
• API — import the generators directly