Incrustando un Botón de Agregar al Calendario en React

Si estás construyendo una plataforma de eventos o un flujo de registro de webinars en React (o Next.js), proporcionar una experiencia fluida de "Agregar al Calendario" es fundamental.

Aunque podrías construir un generador de archivos ICS desde cero y construir manualmente las URL de Google Calendar, a menudo es mucho más rápido usar enlaces pregenerados.

Construyendo un Componente React Simple

Aquí hay un ejemplo básico de un componente de botón AddToCalendar en React que soporta Google Calendar y Apple Calendar (descarga de ICS):

import React from 'react';
 
type AddToCalendarProps = {
  googleUrl: string;
  icsUrl: string;
};
 
export default function AddToCalendar({ googleUrl, icsUrl }: AddToCalendarProps) {
  return (
    <div className="flex gap-4">
      <a 
        href={googleUrl} 
        target="_blank" 
        rel="noopener noreferrer"
        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
      >
        Agregar a Google
      </a>
      <a 
        href={icsUrl} 
        download="evento.ics"
        className="px-4 py-2 bg-slate-800 text-white rounded-md hover:bg-slate-900"
      >
        Apple / Outlook
      </a>
    </div>
  );
}

¿De dónde vienen las URLs?

Para que el componente anterior funcione, necesitas el googleUrl y el icsUrl reales.

Construir una URL de Google Calendar requiere formatear con precisión las fechas en cadenas ISO 8601 y codificar en URL el título, la descripción y la ubicación. Construir el archivo ICS requiere alojar un punto final dinámico que devuelva el tipo de contenido text/calendar.

El Enfoque de Invitly

En lugar de escribir puntos finales de backend personalizados, simplemente puedes crear tu evento en Invitly. Invitly te dará URLs permanentes y rastreadas que puedes pasar directamente a los props de tu componente React:

<AddToCalendar 
  googleUrl="https://invitlyapp.com/api/events/123/google" 
  icsUrl="https://invitlyapp.com/api/events/123/ics" 
/>

Esto asegura que tus fechas, zonas horarias y reglas recurrentes sean manejadas perfectamente por el motor de Invitly, mientras tu interfaz React permanece limpia y completamente bajo tu control.