How to integrate Buttons and RSVP Forms with Svelte

Step 1: npm installation

Install the package from the npm registry.

npm install add-to-calendar-button

Step 2: Import and use it

Load the core package in onMount so this example also works with SvelteKit and server rendering.

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    void (async () => {
      await Promise.all([
        import('add-to-calendar-button/styles/all'),
        import('add-to-calendar-button/i18n/de'),
      ]);
      await import('add-to-calendar-button');
    })();
  });
</script>

<add-to-calendar-button prokey="prokey-of-your-event"></add-to-calendar-button>

Bring your own button

Open the button or form as a modal from a click handler. The dynamic import runs in the browser when clicked. Pass the trigger element for focus handling.

<script>
async function openEvent(event) {
  const trigger = event.currentTarget;
  const { atcb_action } = await import('add-to-calendar-button');
  atcb_action({ prokey: 'prokey-of-your-event' }, trigger);
}
</script>

<button onclick={openEvent}>Open event</button>

Styles and languages

The npm package includes only the default style and English by default. The example mixes add-to-calendar-button/styles/all with add-to-calendar-button/i18n/de, which is valid: use add-to-calendar-button/styles/3d when your style is fixed, or add-to-calendar-button/styles/all when remote PRO configuration can change it without deployment. Import the specific language or small known set, such as add-to-calendar-button/i18n/de, by default; use add-to-calendar-button/i18n/all only when languages can change unpredictably at runtime. Both /all imports increase the bundle because they include every respective asset.

Alternatively, load styles and languages dynamically from jsDelivr by setting style-source="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3/dist/styles/" on the element. Apply the same strategy to custom triggers; the option is named styleSource in atcb_action.

Optional: Server-side rendering

The package provides a separate SSR entry to pre-render a button shell. Use its asynchronous variant on the server for PRO data. Full interaction and RSVP forms still initialize in the browser. See SSR with PRO and the Button Svelte guide.