Uso avanzado

1. Usar tu propio estilo CSS

Opciones integradas

Parece obvio, pero a veces se salta directamente a lo complicado cuando las funciones incluidas y fáciles de usar ya ofrecen muchas posibilidades.

Consulta la página de «Configuración» para ver todos los ajustes y funcionalidades disponibles.

Los siguientes ejemplos usan algunas de ellas para mostrar la variedad de estilos incluidos.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  button-style="round"
  hide-icon-button
  hide-background
  label="Mi etiqueta personalizada"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  button-style="flat"
  hide-icon-list
  buttons-list
  hide-background
  label="Plano y directo"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

<add-to-calendar-button
  name="Mi evento genial"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  start-time="10:10"
  end-time="10:40"
  time-zone="Europe/Madrid"
  location="Fantasy Marketplace"
  button-style="date"
  size="5"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Sobrescribir estilos

Por lo general no puedes sobrescribir directamente el CSS porque el botón está en su propio Shadow DOM.
Sin embargo, puedes sobrescribir algunas variables CSS vinculadas al host (= la etiqueta <add-to-calendar-button>).
Indica los valores predeterminados con «styleLight» y los del modo oscuro con «styleDark».

Las variables disponibles cambian según el estilo. Consulta el archivo CSS correspondiente del repositorio ↗ (sección «Global colors and shadows»).

Esto no funciona con el estilo «none» ni con el enfoque atcb_action (consulta el n.º 10).

<add-to-calendar-button
  style-light="--btn-background: #2f4377; --btn-text: #fff; --font: Georgia, 'Times New Roman', Times, serif;"
  style-dark="--btn-background: #000;"
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  hide-icon-button
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Cargar un archivo CSS externo

Otra opción es cargar un archivo CSS externo. Indícalo con «customCss» y establece el estilo del botón en «custom».
El archivo puede estar en tu aplicación, pero no debe agruparse con otros CSS. Por seguridad no se admiten rutas con «../»; se recomiendan URL absolutas.

En este caso debes ocuparte de todos (!) los elementos.
Recomendamos copiar una hoja de estilo del repositorio ↗ y modificarla.

También debes asegurarte de que el sistema permite cargar hojas de estilo externas (por ejemplo, sin reglas Content-Security-Policy que las bloqueen).

En este ejemplo lo mantenemos sencillo y solo cambiamos el color.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  light-mode="bodyScheme"
  custom-css="https://add-to-calendar-button.com/atcb.css"
  button-style="custom"
  list-style="modal"
  language="es"
></add-to-calendar-button>

Seleccionar elementos con ::part

Puedes usar el selector CSS ::part ↗ para aplicar estilos directamente a elementos preseleccionados desde tu CSS habitual.
Los modales (y el botón al usar «forceOverlay») se renderizan en un elemento DOM nuevo; usa el selector general «.add-to-calendar» o «#atcb-btn-identificadorDelBotón-modal-host».

Los siguientes elementos están disponibles:

• atcb-button-wrapper
• atcb-button
• atcb-button-icon
• atcb-button-text
• atcb-list-wrapper
• atcb-list
• atcb-list-item
• atcb-list-item-close
• atcb-list-icon
• atcb-list-text
• atcb-modal-box

<add-to-calendar-button
  id="css-part-example"
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  options="'apple','google','ical'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

<style>
  add-to-calendar-button#css-part-example::part(atcb-button),
  #atcb-btn-css-part-example-modal-host::part(atcb-button),
  #css-part-example::part(atcb-list),
  #atcb-btn-css-part-example-modal-host::part(atcb-list) {
    background-color: #264f3c;
    color: #fff;
  }
  /* or, for all buttons and modals:
  .add-to-calendar::part(atcb-button) {
    background-color: #264f3c;
    color: #fff;
  }
  */
</style>

Usar un objeto personalizado como botón

Por último, puedes conservar un estilo incluido y usar tu propio elemento activador.
Consulta el ejemplo «10. Usar tu propio botón» al final de esta página.

2. Enriquecer la descripción del evento

¡La descripción del evento no tiene que ser texto sin formato!
Puedes usar caracteres especiales HTML y reglas de formato concretas.

Estas reglas se definen como pseudoetiquetas HTML que se transforman automáticamente.
(En el shortcode del plugin de WordPress, «]» rompería el código. Puedes usar {*} en lugar de [*].)
(Apple, Yahoo y Microsoft Teams no son totalmente compatibles; el valor se transforma en texto sin formato y solo conserva saltos de línea e hipervínculos.)

Etiquetas compatibles:

• [hr]
• [p] ... [/p]
• [br]
• [strong] ... [/strong]
• [u] ... [/u]
• [i] ... [/i], [em] ... [/em]
• [ul] ... [/ul], [ol] ... [/ol], [li] ... [/li]
• [h*] ... [/h*] (← h1, h2, h3, ...)
• [url] ... [/url]
  Define el texto de una URL así: [url]https://....|Texto del enlace[/url]

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  options="'apple','google','ical','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  description="[p][strong]Descubre[/strong] quizá la forma [u]más sencilla[/u] de integrar botones Add to Calendar en tu sitio web. 🚀[/p][p]💻 [em]Visita el sitio oficial para inspirarte:[/em][br]&rarr; [url]https://add-to-calendar-button.com/es/|¡Haz clic aquí![/url][/p]"
  language="es"
></add-to-calendar-button>

3. Ofrecer una suscripción a un calendario

También puedes ofrecer a tus usuarios la posibilidad de suscribirse a un calendario en vez de guardar solo eventos estáticos.

Para ello, define la dirección pública del calendario (un archivo .ics) en «icsFile» y activa «subscribe».

«name» sigue siendo obligatorio, pero puedes omitir los demás parámetros del evento.
En los servicios de Microsoft, «name» se usa como nombre del calendario.
Las suscripciones no generan datos enriquecidos. Microsoft Teams todavía no es compatible y Yahoo ya no lo es; ambos se desactivan automáticamente. Lo mismo ocurre con otros servicios de Microsoft en móviles.
La aplicación Google Calendar para Android solo admite suscripciones de Google Calendar. Chrome abre las demás URL.
(Si el navegador no reconoce ninguna aplicación de calendario instalada, puede aparecer una pantalla en blanco. La versión PRO lo mitiga con una pantalla intermedia explicativa.)

<add-to-calendar-button
  name="[Suscripción de prueba] Add to Calendar Button"
  subscribe
  ics-file="https://add2cal.github.io/ics-demo/demo-calendar.ics"
  options="'apple','google','ical','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

4. Texto personalizado

Puedes cambiar cualquier bloque de texto.

Para el texto del botón, usa simplemente «label».

Para los demás textos (como «Cerrar» en una lista modal), usa «customLabels».
Debes indicar una estructura JSON con los textos que quieras sobrescribir.
Consulta el archivo atcb-i18n.js ↗ del repositorio para ver las claves disponibles.
Cualquier texto personalizado sobrescribe también la traducción.

(Si solo quieres traducir los textos, consulta primero la opción «language».)

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  label="¡Púlsame para guardar!"
  options="'apple','google','ical','outlookcom','yahoo'"
  list-style="modal"
  customLabels='{"close":"Cerrar la lista","apple":"Apple me sirve","google":"Añadir a Google Calendar","outlookcom":"Usar Outlook","yahoo":"¿Yahoo, de verdad?","ical":"¡iCal gana!"}'
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

5. Usar propiedades iCal avanzadas

Si dominas los ajustes poco habituales de iCal, puedes usar «uid», «sequence», «ics-created», «ics-updated», «attendee» y «status» (tentative, confirmed, cancelled).
Estas opciones sobrescriben sus valores predeterminados.

Estas opciones solo son compatibles con los enlaces de iCal y Apple Calendar.

Para actualizar un evento existente (por ejemplo, su estado), aumenta «sequence», usa una fecha «ics-updated» más reciente, conserva «ics-created» y «uid», e indica el organizador (nombre y correo electrónico).

Algunos calendarios también requieren «attendee». Si la actualización no cambia el estado a «cancelled», es obligatorio en todos los casos.
El attendee debe ser la persona que guarda el evento. Usa esta función solo si conoces ese dato.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  label="Añadir el evento"
  description="Un ejemplo bastante especial para personalizar Add to Calendar Button al máximo.[br]Más información en [url]https://add-to-calendar-button.com/es/[/url]"
  options="ical"
  organizer="Juan Pérez|juan.perez@mail.com"
  uid="7060df05-7b3d-4baa-b215-689b85769e5b"
  sequence="1"
  ics-created="20221201T103000Z"
  ics-updated="20221205T154500Z"
  status="confirmed"
  ical-file-name="Evento-confirmado"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  label="Cancelar el evento"
  description="Un ejemplo bastante especial para personalizar Add to Calendar Button al máximo.[br]Más información en [url]https://add-to-calendar-button.com/es/[/url]"
  options="ical"
  organizer="Juan Pérez|juan.perez@mail.com"
  uid="7060df05-7b3d-4baa-b215-689b85769e5b"
  sequence="2"
  ics-created="20221201T103000Z"
  ics-updated="20221218T154500Z"
  status="cancelled"
  ical-file-name="Evento-cancelado"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

6. Definir un ID personalizado

Cada botón generado recibe un ID con el patrón «atcb-btn-X», donde «X» es un número ascendente.
Los enlaces de calendario reciben el ID del botón más el tipo de calendario, por ejemplo «atcb-btn-5-google».

Puedes reemplazar la «X» automática por un valor único mediante «identifier».
Esto puede ayudarte a seguir las interacciones con mayor precisión.

Este ID debe ser único y no puede usarse en ningún otro elemento.

Con la función personalizada atcb_action, el script puede usar primero el ID del elemento activador antes de recurrir al patrón descrito.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  options="'apple','google','ical','outlookcom','ms365','msteams','yahoo'"
  identifier="my-custom-id"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

7. Seguimiento

Registramos todas las acciones que ocurren con un botón.
Puedes leer estos datos de dos maneras.

1. Observa el atributo atcb-last-event que se añade a cada botón. Contiene el último evento y su activador (esquema: «EVENT:TRIGGER»; ejemplo: «openList:atcb-btn-1»).
2. Accede al Data Layer.

Enviamos los eventos directamente al Data Layer, que puede leer, por ejemplo, Google Tag Manager y Google Analytics.

Eventos disponibles:

• initialization
• openList
• closeList
• openCalendarLink
• openSingletonLink
• openSubEventLink
• success

(Pruébalo interactuando con un botón de este sitio y escribiendo «dataLayer» en la consola de JavaScript.)

8. Usar la zona horaria del navegador

En casos muy poco frecuentes, quizá no tengas un evento con lugar y hora concretos, sino una hora vinculada a la zona horaria de cada usuario.
Por ejemplo, un recordatorio para lavarse los dientes a las 8:00.

En esos casos, establece «timeZone» en «currentBrowser».
La hora del evento se ajustará automáticamente a la zona horaria de cada usuario.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:00"
  end-time="11:00"
  time-zone="currentBrowser"
  location="World Wide Web"
  description="Descubre quizá la forma más sencilla de integrar botones Add to Calendar en tus proyectos web:[br]→ [url]https://add-to-calendar-button.com/es/|¡Haz clic aquí![/url]"
  options="'apple','google','ical'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

9. WebView

En móviles, las aplicaciones que usan «WebView» tienen problemas con la generación y entrega dinámica de archivos .ics.
Por eso detectamos esos casos, copiamos la URL de datos al portapapeles y mostramos una guía breve.

Es la práctica recomendada para sitios y aplicaciones web, pero quizá no para tu propia aplicación nativa o híbrida, donde controlas la configuración de WebView.

Aunque la generación dinámica seguiría sin funcionar, al menos puedes entregar directamente archivos ICS externos existentes.
En ese caso, desactiva la solución alternativa con «bypassWebViewCheck».

Asegúrate de que se cumpla lo siguiente en tu proyecto.

• Estás desarrollando tu propia aplicación nativa o híbrida.
• Abres el navegador predeterminado del dispositivo en lugar de una WebView integrada.
• Tienes un archivo .ics específico en un servidor y puedes referenciarlo mediante «icsFile».

(El botón siguiente no debería funcionar en una WebView integrada como la de Instagram, pero sí en tu aplicación.)

<add-to-calendar-button
  name="Título"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  options="ical"
  ics-file="https://add-to-calendar-button.com/demo-event.ics"
  bypass-web-view-check
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

10. Usar tu propio botón

Para quienes quieran una personalización absolutamente extrema, también ofrecemos la opción de abrir manualmente la lista de enlaces de calendario.
Así puedes usar cualquier elemento como botón o incluso activarlo mediante código.

En teoría no necesitas un botón, aunque lo recomendamos porque mejora mucho la experiencia (por ejemplo, devuelve el foco al cerrar el modal).
Sin un botón, la lista aparece automáticamente como modal. Con uno, puedes elegir la lista desplegable superpuesta mediante «listStyle» (las demás opciones no se admiten con atcb_action). Se recomienda encarecidamente el estilo modal.

Nota: si en un dispositivo Apple solo está configurada la opción Apple o iCal, se abre una ventana intermedia antes de guardar. Así el archivo generado puede abrirse y guardarse de forma fiable. Este paso se omite cuando se proporciona un archivo ICS estático.

Paso 1: importación

Si usas el script mediante CDN, omite este paso.
Si usas el paquete npm, primero importa la función «atcb_action» de esta forma:

import { atcb_action } from "add-to-calendar-button";

Paso 2: configuración y activador

Después debes definir la configuración y el activador.
Esto puede variar mucho según tu entorno; tú eres quien lo conoce.

En el ejemplo usamos un botón bastante sencillo para la demostración.

<button id="my-default-button">Haz clic aquí</button>

<script type="application/javascript">
  const config = {
    name: "[Recordatorio] Probar Add to Calendar Button",
    description: "Descubre quizá la forma más sencilla de integrar botones Add to Calendar en tus proyectos web:[br]→ [url]https://add-to-calendar-button.com/es/|¡Haz clic aquí![/url]",
    startDate: "2026-10-18",
    startTime: "10:15",
    endTime: "23:30",
    options: ["google", "ical"],
    timeZone: "Europe/Madrid",
    language: "es"
  };
  const button = document.getElementById('my-default-button');
  if (button) {
    button.addEventListener('click', () => atcb_action(config, button));
  }
</script>

11. Estrategias de carga

Lo primero:
Siempre que es posible, cargamos el script de forma asíncrona para no bloquear el renderizado.
El script también está dividido de forma radical: el bundle solo contiene el núcleo, el estilo predeterminado y el inglés.
Cada estilo adicional (unos pocos KB) y cada idioma (unos 3 KB) se carga automáticamente cuando hace falta desde el mismo lugar que el script.

Normalmente no tienes que hacer nada. Pero puedes tomar el control:

1. Al empaquetar, importa exactamente lo que utilizas; nunca habrá una solicitud para ello:

import 'add-to-calendar-button'; // núcleo + estilo predeterminado + inglés
import 'add-to-calendar-button/styles/3d'; // los estilos que usas
import 'add-to-calendar-button/i18n/de'; // los idiomas que ofreces

Para cargar todos los estilos o idiomas a la vez, usa los módulos agregados: import 'add-to-calendar-button/styles/all' e import 'add-to-calendar-button/i18n/all'.

2. Con la etiqueta script, los recursos se cargan desde el origen del script. Cambia la ubicación mediante styleSource si los alojas en otro sitio.
3. Si cambias buttonStyle en tiempo de ejecución, activa loadAllStyles para precargar todas las diferencias.

12. Renderizado en servidor

El botón puede renderizar una estructura base en el servidor.
La entrada add-to-calendar-button/ssr genera mediante Shadow DOM declarativo un marcador con el estilo y tamaño correctos: se pinta antes de ejecutar JavaScript y el script del cliente lo actualiza en el mismo lugar sin saltos de diseño.

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

const html = atcb_generate_ssr_html({
  name: 'Launch Party',
  startDate: '2050-06-15',
  buttonStyle: '3d',
  language: 'de',
});
// inserta la cadena devuelta en la página renderizada por el servidor

En la entrada del cliente, registra todos los estilos e idiomas no predeterminados antes de cargar el módulo principal:

import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button';

Para eventos PRO, usa la función asíncrona atcb_generate_ssr_html_async. Obtiene y combina la configuración alojada del proKey antes de renderizar la estructura. Sin proKey, se comporta como la función síncrona.

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

const html = await atcb_generate_ssr_html_async({
  proKey: 'YOUR_PRO_KEY',
});

La estructura respeta el estilo y tamaño del botón, el modo claro, los idiomas de derecha a izquierda y la etiqueta (la predeterminada traducida o tu valor «label»). Durante la primera actualización del cliente, los nodos de estilo coincidentes permanecen para evitar un fotograma sin estilos durante la hidratación.
Los botones de estilo fecha, RSVP en línea y resúmenes de grupo muestran esqueletos sutiles porque necesitan lógica del cliente. Todo lo demás ocurre durante la hidratación.

Los navegadores sin Shadow DOM declarativo simplemente ignoran la estructura y se inicializan solo en el cliente; no hace falta ningún tratamiento adicional.