Cómo instalar Add to Calendar Button con Astro

Paso 0: Elegir la arquitectura adecuada

Puedes usar el Web Component directamente donde lo necesites o indirectamente mediante un componente como add-to-calendar.astro, que se importa en la página correspondiente.

Recomendamos el uso directo si solo necesitas un elemento. Para más de uno, utiliza el componente auxiliar que se explica abajo. Si lo usas directamente, no crees el componente y coloca la etiqueta add-to-calendar-button donde la necesites.

Paso 1: Instalar el paquete

Instala el paquete desde el registro de npm.

npm install add-to-calendar-button

Paso 2: Crear el componente

Crea un componente add-to-calendar.astro, normalmente en ./src/components/.

Paso 3: Definir las props

Define las props del componente. Como mínimo, deben incluir la fecha de inicio y el nombre.

import type { AddToCalendarButtonType } from 'add-to-calendar-button';

interface Props {
  name: AddToCalendarButtonType['name'];
  startDate: AddToCalendarButtonType['startDate'];
  endDate: AddToCalendarButtonType['endDate'];
  startTime: AddToCalendarButtonType['startTime'];
  endTime: AddToCalendarButtonType['endTime'];
  timeZone: AddToCalendarButtonType['timeZone'];
}

const { name, startDate, endDate, startTime, endTime, timeZone } = Astro.props as Props;

Añadir el script

Añade la etiqueta del Web Component:

<add-to-calendar-button
  name={name}
  start-date={startDate}
  end-date={endDate}
  start-time={startTime}
  end-time={endTime}
  time-zone={timeZone}
  language="es"
></add-to-calendar-button>

A continuación, importa el script:

<script>
  import 'add-to-calendar-button';
</script>

Paso 4: Usarlo

Impórtalo y úsalo en cualquier otra página o componente. Ajusta la ruta a la estructura de tu proyecto.

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

---
import AddToCalendarButton from '../components/add-to-calendar.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <AddToCalendarButton
    name="Título"
    start-date="2026-10-18"
    end-date="2026-10-18"
    start-time="10:15"
    end-time="23:30"
    time-zone="Europe/Madrid"
  language="es"
  />
</Layout>

Sí, así de sencillo.

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.

---
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';

const html = atcb_generate_ssr_html({
  name: 'Reminder to check the add-to-calendar-button demo',
  options: ['Apple', 'Google'],
  location: 'World Wide Web',
  startDate: '2050-06-15',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
  buttonStyle: '3d',
  language: 'de',
});
---
<Fragment set:html={html} />
<script>
  import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button'; // client-side upgrade; load last
</script>