📅 Calendarizer

Calendarizer is a lightweight, zero-dependency Web Component (<calendarizer>) that lets users instantly add events to their favorite calendar apps: Google, Outlook, Yahoo, or download a universal .ics file compatible with Apple Calendar, Outlook Desktop, and more.

Fully customizable. Themed or theme-free. Plug & play.

📘 También disponible en: Español 🇲🇽

🚀 Quick Start

1. Include the script

Embed it locally:

<script src="calendarizer.js" type="module"></script>

Or use a minified version (e.g. CDN):

<script src="calendarizer.min.js" type="module"></script>

2. Add the component

<calendarizer
  title="Product Launch"
  date-start="2025-08-01T09:00"
  date-end="2025-08-01T10:30"
  timezone="America/Mexico_City"
  location="Mexico City"
  organizer="mailto:[email protected]"
  content="Join us for the new product release.<br>Live demo and Q&A included."
  button="Add to calendar"
  theme="dark"
  theme-url="https://yoursite.com/custom-calendar-theme.css"
/>

📌 Attributes

| Attribute | Type | Required | Description | | ------------ | -------------------- | -------- | --------------------------------------------------- | | title | string | ✅ | Event title | | date-start | ISO string | ✅ | Start datetime (YYYY-MM-DDTHH:mm) | | date-end | ISO string | ✅ | End datetime | | timezone | IANA string | ✅ | Timezone (e.g. America/New_York, UTC) | | location | string | ✅ | Event location (physical or virtual) | | content | string (HTML-safe) | ✅ | Event description (supports <br> for line breaks) | | organizer | string | ❌ | Optional organizer info (mailto: or name) | | button | string | ❌ | Button label (default: "Add to calendar") | | theme | string | ❌ | Built-in theme: light, dark, neon, etc. | | theme-url | URL | ❌ | Optional custom CSS URL — overrides built-in themes |

📆 Calendar Support

• ✅ Google Calendar
• ✅ Outlook (Web & Desktop)
• ✅ Yahoo Calendar
• ✅ Apple Calendar (.ics)
• ✅ Thunderbird & all .ics-compatible clients

🎨 Theming & Styling

• Use theme="light" or theme="dark" for built-in styles.
• Use theme-url="..." to override styles with custom CSS.
• theme-url always takes precedence over theme.
• Encapsulated via Shadow DOM for full style isolation.

Built-in themes:

• light (default)
• dark
• warm
• smoke
• neon
• soft

🔧 Build System

Calendarizer ships with a flexible CLI build tool.

🛠 CLI Flags

| Flag | Description | | ---------------- | --------------------------------------------------- | | --theme=name | Build a single theme (e.g. neon, smoke) | | --default=name | Set the default theme in full/all builds | | --core | Build only the core module (no themes included) | | --mode=type | Choose: all (default), full, theme, or core | | --no-minify | Skip .min.js output | | --help | Show help text |

🧪 Build Examples

pnpm run build --theme=neon
pnpm run build --default=dark --mode=full
pnpm run build --core
pnpm run build --all --no-minify

📦 Output Bundles

| File | Description | | -------------------------- | --------------------------------------- | | calendarizer.full.js | All themes embedded, default is light | | calendarizer.min.js | Minified version of full build | | calendarizer.core.js | Core only, requires theme-url | | calendarizer.core.min.js | Minified core build | | calendarizer.dark.js | Single-theme bundle (e.g. dark only) | | calendarizer.dark.min.js | Minified single-theme version | | ... and others per theme | Based on src/themes/*.css |

⚙️ Framework Support

Works seamlessly in any modern frontend stack:

<calendarizer
  title="Launch Meeting"
  date-start="2025-08-01T15:00"
  date-end="2025-08-01T16:00"
  timezone="America/Los_Angeles"
  content="Live Zoom event with our team"
  button="Add it"
/>

• ✅ React
• ✅ Vue
• ✅ Svelte
• ✅ Astro
• ✅ Vanilla HTML

📁 .ics File Structure

Generated .ics files follow RFC 5545 spec and include:

• DTSTART / DTEND with proper UTC or TZID
• UID, DTSTAMP, ORGANIZER, and DESCRIPTION
• Proper line folding, escaping, and timezone handling

🛡 Security Notes

• Uses rel="noopener" to prevent window hijacking
• Sanitizes content before .ics export
• IANA timezone support built-in (tzdata fallback optional)

🧪 Dev Scripts

"scripts": {
  "build": "node scripts/build.js",
  "build:help": "node scripts/build.js --help",
  "build:core": "node scripts/build.js --core",
  "build:all": "node scripts/build.js --all --default=dark",
  "build:theme": "node scripts/build.js --theme=warm",
  "build:theme:neon": "node scripts/build.js --theme=neon",
  "build:theme:dark": "node scripts/build.js --theme=dark",
  "build:theme:smoke": "node scripts/build.js --theme=smoke",
  "build:full": "node scripts/build.js --mode=full",
  "build:full:dark": "node scripts/build.js --default=dark --mode=full",
  "build:full:neon": "node scripts/build.js --default=neon --mode=full",
  "build:dev": "node scripts/build.js --all --no-minify",
  "dev": "npm run build:dev"
}

📄 License

MIT © 2025 David Garay

Made with ❤️ by David Garay