Cómo instalar Add to Calendar Button

Paso 1: Integración mediante CDN

Carga el script añadiendo la siguiente etiqueta en la sección head de tu sitio web.
El script se cargará sin bloquear la página, así que no tienes que preocuparte por su ubicación exacta.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3" async defer></script>

Paso 2: 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>

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.

Carga mediante CDN (JavaScript nativo)

Con la etiqueta de script del CDN, los estilos e idiomas bajo demanda se obtienen del mismo origen que el script. Si lo alojas tú, apunta el atributo «style-source» al directorio que contiene las carpetas styles/ y locales/.

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