@firdaus.lubis/add-to-calendar

Standalone React + TypeScript add-to-calendar library with its own implementation.

This project no longer depends on add-to-calendar-button. It now ships a local calendar engine for:

• Google / Apple / iCal / Yahoo / Outlook.com / Microsoft 365 / Microsoft Teams links
• on-the-fly ICS generation
• multi-date events
• recurring events
• calendar subscriptions
• structured event metadata
• programmatic launch flows via atcb_action

What you get

• AddToCalendarButton React component
• atcb_action helper for imperative launches
• advanced helpers:
  • atcb_generate_timestring
  • atcb_decorate_data_dates
  • atcb_generate_ty
• cssStyles preset map for quick CSS-variable starting points
• local TypeScript exports:
  • AddToCalendarButtonType
  • AddToCalendarActionType
  • CalendarOption
  • EventDate
  • CustomLabelsObjectType
• built-in light/dark modes, button styles, inline mode, split-button mode, dropdown/modal overlays, and custom labels
• ESM + CommonJS bundles with generated .d.ts files

Install

Use it locally from the sibling folder

pnpm add ../add-to-calendar

Use it after publishing to npm

pnpm add @firdaus.lubis/add-to-calendar

react and react-dom are peer dependencies and must exist in the consuming app.

Usage

'use client';

import { AddToCalendarButton } from '@firdaus.lubis/add-to-calendar';

export function EventCalendarButton() {
  return (
    <AddToCalendarButton
      name="IFEX Opening Day"
      startDate="2026-06-10"
      startTime="09:00"
      endDate="2026-06-10"
      endTime="17:00"
      timeZone="Asia/Jakarta"
      location="Jakarta International Expo"
      options={['Google', 'Apple', 'iCal', 'Outlook.com']}
      buttonStyle="round"
      lightMode="light"
    />
  );
}

Programmatic usage

import { atcb_action } from '@firdaus.lubis/add-to-calendar';

export function OpenCalendarButton() {
  return (
    <button
      type="button"
      onClick={(event) => {
        void atcb_action(
          {
            name: 'Community Meetup',
            startDate: '2026-06-15',
            startTime: '19:00',
            endTime: '21:00',
            timeZone: 'Asia/Jakarta',
            options: ['Google', 'iCal', 'Outlook.com'],
            listStyle: 'modal',
          },
          event.currentTarget,
        );
      }}
    >
      Open calendar picker
    </button>
  );
}

Advanced helper usage

import {
  atcb_decorate_data_dates,
  atcb_generate_timestring,
  cssStyles,
} from '@firdaus.lubis/add-to-calendar';

const subtitles = atcb_generate_timestring([
  {
    name: 'Launch Day',
    startDate: '2026-06-10',
    startTime: '09:00',
    endTime: '17:00',
    timeZone: 'Asia/Jakarta',
  },
]);

const decorated = atcb_decorate_data_dates({
  name: 'Launch Day',
  startDate: '2026-06-10',
  options: ['Google', 'iCal'],
});

const roundPreset = cssStyles.round;

Supported capability set

The standalone implementation covers the main public feature surface that made the original tool useful in apps:

• timed and all-day events
• recurring events via RRULE or simplified recurrence props
• multi-date event series
• subscription links via subscribe + icsFile
• provider-specific options via options, optionsMobile, and optionsIOS
• inline rendering, split buttons, hidden trigger mode, modal/overlay/dropdown rendering
• custom labels, language selection, button themes, and CSS variable overrides
• generated JSON-LD rich data when event metadata is sufficient

Compatibility notes

This package keeps the familiar prop names so migration is easy.

Some properties from the broader upstream ecosystem are still accepted for compatibility, but hosted/PRO-only behavior is not re-created here. That means props such as proKey, proOverride, rsvp, ty, proxy, and similar service-backed fields do not connect to any external SaaS system in this standalone package.

Client / SSR notes

The component is safe to import in SSR builds, but interactive UI should still be used from client components in frameworks such as Next.js.

Server rendering works for static markup output, while dropdown/modal interaction and programmatic overlays activate on the client.

Scripts

pnpm install
pnpm build
pnpm type-check
pnpm test

Publishing

1. Update the package name or scope if needed.
2. The package already includes author, homepage, and packageManager metadata. Add repository, bugs, and optional funding once you publish from your canonical repo.
3. Run the release checks:
   • pnpm build
   • pnpm type-check
   • pnpm test
4. Publish the package:
   • npm publish --access public

License

This repository is licensed under MIT via the included LICENSE file.