Instalación: nextjs | Add to Calendar Button

Paso 1: Instalación con npm

Como Next.js se basa en React 19, admite Web Components completamente y sin configuración adicional. Usa directamente el Web Component Add to Calendar Button.

Instala el paquete desde el registro de npm.

npm install add-to-calendar-button

Paso 2: Importarlo

Importa el módulo en el componente donde quieras usar el botón.

import 'add-to-calendar-button';

Paso 3: Usarlo

Empieza añadiendo una etiqueta <add-to-calendar-button> al código HTML, con las opciones como atributos.

Sí, así de sencillo.

Tu bloque de código podría ser como el siguiente.

<add-to-calendar-button
  name="Título"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-10-18"
  end-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  language="es"
></add-to-calendar-button>

Ten en cuenta que el botón solo funciona en el cliente. Añade 'use client'; cuando corresponda.

Estilos e idiomas

El script incluye el estilo de botón «default» y el paquete de inglés, por lo que funciona y se ve bien sin configuración adicional.

Al cargar directamente el script del navegador, los demás estilos e idiomas se descargan automáticamente cuando se necesitan (unos pocos KB cada uno). Las integraciones empaquetadas deben registrar explícitamente los módulos necesarios como se muestra abajo.

Empaquetado con npm (recomendado para frameworks)

Al empaquetar el script, importa los módulos de estilo e idioma necesarios antes del módulo principal. Así quedan registrados sin solicitudes antes de que se actualice el custom element, también durante la hidratación SSR:

import 'add-to-calendar-button/styles/3d';   // any style besides "default"
import 'add-to-calendar-button/i18n/de';       // any language besides English
import 'add-to-calendar-button';             // load the component last

Para cargar todos los estilos o idiomas en una sola instrucción, usa los módulos agregados: import 'add-to-calendar-button/styles/all' e import 'add-to-calendar-button/i18n/all'.

Consulta las opciones «button-style» y «language» de la página Configuración para ver todos los detalles.

Server Side Rendering (SSR)

El botón también puede prerenderizar una envoltura en el servidor para ofrecer un primer renderizado instantáneo y estable. Durante la hidratación, conserva los estilos coincidentes hasta que el botón del cliente esté completamente estilizado. Consulta la sección «Renderizado del lado del servidor» de la página de uso avanzado. Renderizado del lado del servidor

Un ejemplo completo podría ser el siguiente.

// app/components/atcb-client.tsx (client upgrade)
'use client';
import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button'; // load last

type AtcbClientProps = {
  html: { __html: string };
};

export default function AtcbClient({ html }: AtcbClientProps) {
  return <div dangerouslySetInnerHTML={html} />;
}

// app/page.tsx (server component)
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';
import AtcbClient from './components/atcb-client';

export default function Page() {
  const html = {
    __html: atcb_generate_ssr_html({
      name: 'Reminder to check the add-to-calendar-button demo',
      options: ['Apple', 'Google'],
      location: 'World Wide Web',
      startDate: '2026-10-18',
      endDate: '2026-10-18',
      startTime: '10:15',
      endTime: '23:30',
      timeZone: 'Europe/Berlin',
      buttonStyle: '3d',
      language: 'de',
    }),
  };
  return <AtcbClient html={html} />;
}

Cómo instalar Add to Calendar Button con Next.js