Guías

Ejemplos

Los siguientes ejemplos muestran las funcionalidades más interesantes.
Te recomendamos experimentar con la demo para descubrir todas las variantes.

Los botones Add to Calendar de esta página comparten algunos parámetros. Todos usan las mismas fechas (excepto el ejemplo dinámico), el estilo predeterminado y se adaptan al lightMode del sitio web.

Para casos expertos más avanzados, consulta la página de «Uso avanzado».

Ejemplo 1: El habitual

Esta es una configuración más o menos estándar con todos los tipos de calendario disponibles y una zona horaria definida.

<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"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 2: Evento de día completo

Para un evento de día completo, basta con omitir la información de la hora.
En este caso incluso puedes omitir la zona horaria.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="2026-10-18"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 3: Fechas dinámicas

En lugar de usar una fecha fija, también puedes utilizar fechas dinámicas.

Usa «today» para seleccionar siempre el día actual.
Si añades un número como «+7» después de la fecha (p. ej., «2025-04-18+7»), se sumarán 7 días. En el ejemplo combinamos ambas opciones para que el evento sea siempre dentro de 2 días.

Por cierto: este ejemplo también genera en segundo plano datos enriquecidos de un evento en línea, ya que la ubicación es una URL.

<add-to-calendar-button
  name="[Recordatorio] Probar Add to Calendar Button"
  start-date="today+2"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Madrid"
  location="https://add-to-calendar-button.com/es/"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 4: Evento recurrente

Puedes definir eventos recurrentes mediante una RRULE.
La regla debe ser válida técnica y lógicamente. No todos los calendarios la admiten, por lo que en este ejemplo no aparecen las opciones indicadas de Yahoo y Outlook.com (ni Google en iOS).

<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"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=6"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

También puedes expresar la regla de una forma más sencilla.
Consulta la página de «Configuración» para obtener más detalles.

<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"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  recurrence="weekly"
  recurrence-interval="1"
  recurrence-count="6"
  recurrence-by-day="WE,FR"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 5: Evento con varias fechas

Los eventos también pueden tener varias fechas que no sean recurrentes.
Por ejemplo, un taller compuesto por 2 partes.

Define esas partes como objetos independientes dentro de un array dates.
La fecha y la hora de cada parte son obligatorias. Los valores raíz sobrescriben los individuales (excepto el nombre cuando hay más de una fecha: en ese caso será el título de la serie).
Los eventos se ordenan automáticamente según su startDate.
Si es necesario, puedes omitir los caracteres inicial «[» y final «]» (p. ej., al usar el shortcode de WordPress).

<add-to-calendar-button
  name="Serie de eventos"
  dates='  [
    {
      "name": "Recordatorio 1/3 para probar Add to Calendar Button",
      "description": "Esta es la primera parte para probar el script Add to Calendar Button en [url]https://add-to-calendar-button.com/es/[/url]",
      "startDate": "today+3",
      "startTime": "10:15",
      "endTime": "23:30"
    },
    {
      "name": "Recordatorio 3/3 para probar Add to Calendar Button",
      "description": "Esta es la tercera parte para probar el script Add to Calendar Button en [url]https://add-to-calendar-button.com/es/[/url]",
      "startDate": "today+8",
      "startTime": "09:00",
      "endTime": "19:00"
    },
    {
      "name": "Recordatorio 2/3 para probar Add to Calendar Button",
      "description": "Esta es la segunda parte para probar el script Add to Calendar Button en [url]https://add-to-calendar-button.com/es/[/url]",
      "startDate": "today+5",
      "startTime": "11:30",
      "endTime": "20:00"
    }
  ]'
  time-zone="Europe/Madrid"
  location="World Wide Web"
  options="'apple','google','ical','outlookcom','yahoo'"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 6: Etiqueta personalizada

Puedes personalizar la etiqueta del botón y todos los demás textos.
En el ejemplo también establecemos listStyle como una lista superpuesta, reducimos ligeramente el tamaño y definimos un nombre personalizado para el archivo ics.

Para cambiar otros textos, usa la opción «customLabels». Consulta la página de «Configuración» y nuestro ejemplo avanzado para obtener más detalles.

<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"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  label="¡Guárdame!"
  ical-file-name="Reminder-Event"
  list-style="overlay"
  size="5"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 7: Botón en línea

De forma predeterminada, el botón es un elemento de bloque que abre un desplegable al pasar el cursor.
Como alternativa, también puedes mostrarlo en línea.

En este ejemplo también establecemos «listStyle» como «modal», lo que activa automáticamente el clic como disparador.

Hazlo! →
<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"
  location="World Wide Web"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  label="¡Haz clic fuerte!"
  inline
  list-style="modal"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 8: Un solo tipo de calendario

Si defines un único tipo de calendario, no se creará ninguna lista.
El propio botón se convierte en el enlace directo al calendario.

<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"
  description="Descubre probablemente la forma más sencilla de incluir botones Add to Calendar en tus proyectos web:[br]→ [url]https://add-to-calendar-button.com/es/|¡Haz clic aquí![/url]"
  options="google"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

Ejemplo 9: Dividir un botón

La opción «buttonsList» permite dividir el botón en varios, uno por cada tipo de calendario.

En este ejemplo también usamos el estilo de botón redondo y ocultamos su etiqueta.

<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"
  description="Descubre probablemente la forma más sencilla de incluir 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','outlookcom','yahoo'"
  buttons-list
  hide-text-label-button
  button-style="round"
  light-mode="bodyScheme"
  language="es"
></add-to-calendar-button>

¡Probemos directamente la mayoría de las opciones en nuestra zona de pruebas!

Empezar a probar

Si buscas personalizaciones atrevidas, visita la «zona de peligro».

Uso avanzado