Finalmente, un Add to Calendar Button que funciona

El caso de uso es bastante simple en muchos casos: Permitir a los usuarios agregar un evento a su calendario preferido a través de un botón o enlace.
Aun así, este caso simple viene con muchos errores y problemas, mientras que la mayoría de los scripts en la web fallan tarde o temprano.

Esta es la historia de cómo llegamos a nuestra tecnología de clase mundial Add to Calendar Button, que alimenta nuestros servicios en Add to Calendar PRO.

Si solo te interesa la solución que funciona, puedes ir directamente a nuestra página de inicio y revisarla.

💡 Cómo empezó todo

En 2021, estaba a punto de planear mi boda.

¡Genial!
Pero viene con obligaciones e implicaciones. Una de ellas ha sido la creación de un sitio web para informar a los invitados sobre la fecha.
Sí, ahorramos en la tarjeta impresa de “reserva la fecha” y queríamos usar un sitio web en su lugar.

Al construir este sitio web, necesitaba incluir una manera sencilla para que los usuarios agregaran este evento a sus calendarios. Como realmente no quería gastar demasiado tiempo en esto, estaba buscando algún script, paquete, o lo que fuera fácil de usar.

😓 El Problema

No encontré nada que cumpliera con mis requisitos.

Básicamente, todos los paquetes y códigos gratuitos que encuentras están de alguna manera desactualizados. Usan esquemas muy antiguos que ya no tienen soporte, o carecen de funcionalidades básicas como crear un archivo iCal/ics.
Si crees que encontraste uno, espera hasta que alguien lo use en algún “entorno extraño” como Chrome en iOS.

Por otro lado, encontré como 2545 referencias a addevent.com.

Con “referencias”, me refiero a entradas en Google, pero aún más, a codepens. Allí, muchas personas (¿o personas falsas? 🙊) simplemente colocaron el código para integrar el botón básico de addevent. No estoy seguro de por qué alguien pondría eso en Codepen, excepto por sus propios motivos de SEO, lo cual es molesto para alguien que busca consejos.

El problema con AddEvent (y también con competidores más recientes, como Calendarlink):
Tienen un nivel gratuito, pero esto limita el botón a un número bastante bajo de clics, lo cual no habría funcionado, incluso para mi pequeño evento de boda. Así que, incluso diría que es completamente inútil, si no se usa solo con fines de prueba. Y aun con la versión de pago, sigue siendo limitado (bien escondido en sus palabras 🤨) y puede fácilmente acabar con tu presupuesto (pero esa es otra historia).

Tienen algunas características adicionales interesantes, pero básicamente no las necesitaba, ninguna de ellas. Y quería agregar una mejor UI/UX.

He terminado construyendo mi propio botón y poniéndolo en código abierto, para que otras personas puedan beneficiarse de mi trabajo y quizás incluso proponer nuevas ideas geniales.

📝 Definiendo los requisitos

• UI/UX genial
• Funciona en Escritorio y Móvil
• Soporta todos los calendarios modernos
• Genera un archivo iCal/ics sobre la marcha para soportar todos los demás calendarios (parte importante aquí: generarlo y no requerir que algún archivo sea creado manualmente antes)

Parece simple.
Pero aún así, hay mil advertencias a nivel de detalle y, como siempre, cuando comienzas a construir algo así, surgen muchos requisitos adicionales uno por uno.

Cuando decides convertirlo en un proyecto de código abierto, también necesitas pensar en otros usuarios (aka desarrolladores). ¿Cómo usarán tu código? ¿Qué tan capacitados están? ¿Cuáles serán sus expectativas? ¿Para quién estás construyendo?

¡Para ser honesto, esta fue la parte más difícil!
Siempre tenía en mente al programador aficionado bastante inexperto. Esas personas deberían poder usar este código con facilidad. Simplemente agregando algunos archivos css y js a su código. Sin preocuparse por nada más. Simplemente tiene que funcionar.
Por otro lado, para hacerlo también atractivo para otros desarrolladores, debería cumplir con sus entornos de trabajo diarios. Estaba pensando en frameworks/bibliotecas modernas de JavaScript como Angular o React.
Entonces, sería necesario poner este proyecto en npm. E importar scripts en esos proyectos funciona un poco diferente a simplemente agregar un fragmento de código estúpido en una página HTML.

En términos de requisitos adicionales, necesitas diferenciar (mirando las audiencias objetivo) entre requisitos funcionales y técnicos.

En el lado funcional, toda la configuración debería poder hacerse fácilmente agregando una estructura HTML simple. Uno también podría ver esto como un requisito técnico, pero para mí, es parte de la experiencia de usuario de alguna manera.

Al mirar los eventos que se quisiera usar; pueden comenzar en cualquier momento, terminar en cualquier momento. Podrían ser todo el día o tener horarios específicos. ¡Pero también necesitas considerar diferentes zonas horarias!
¿Alguna vez has trabajado con zonas horarias? Cosa loca: así que construimos nuestra propia biblioteca para ello, haciendo nuestro servicio aún más estable para una audiencia global.
Agregar el asunto, la descripción y la ubicación de un evento parece obvio.
¿Pero qué pasa con las opciones de agregar al calendario? ¿Quizás uno no quiere ofrecer Yahoo Calendar y mantenerlo simple?
Con respecto a la interacción, considero que pasar el cursor es un buen desencadenante para abrir el desplegable. ¡Tal vez, en otros casos, hacer clic sería el desencadenante mejor!
Por último, pero no menos importante, tal vez un usuario no quiera hacer que sea un evento estático, sino mantenerlo flexible, ¿siempre a 10 días desde el día actual?

En el lado técnico nuevamente, sentí que debería estar documentado a un nivel muy detallado. Personalmente, lo odié en mis primeros días, cuando el código no estaba documentado (bien o en absoluto).
¡El código debería estar bien estructurado, pero aún así ser fácilmente legible! Esto significa que dividirlo en demasiadas cosas abstractas podría confundir demasiado a las personas, ¡aunque podría ser un código más limpio (mientras tanto, la base de código creció un poco demasiado como para seguir cumpliendo este requisito, pero está en la hoja de ruta).

🛠️ Construyéndolo

Llegar a la primera versión fue la parte bastante fácil.
El mundo ahora tiene un Add to Calendar Button que realmente funciona, ¡y se puede implementar en menos de 1 minuto!

Tuvimos una boda increíble - y un sitio web - y recibí muchos comentarios positivos de la comunidad sobre GitHub. Incluso lo publiqué en ProductHunt, lo hice Producto #1 del día y recibí aún más comentarios.
Muchos más desarrolladores añadieron sus pensamientos e ideas.

Con el tiempo, cada vez más personas se acercaban a mí, pidiendo una solución aún más simple.
Esto, por supuesto, venía de personas que no eran desarrolladores. Pero incluso a nivel técnico, la gente pedía servicios adicionales, como RSVP, lo que requeriría una solución de software de pila completa en lugar del snippet JavaScript.
Hay aún más problemas con el Add to Calendar Button gratuito y de código abierto, que de alguna manera es por diseño. Los archivos Ics se generan en el lado del cliente, directamente en el navegador del usuario. Esto funciona bien en el 90% de los casos, pero falla para todos los demás. Usualmente debido a entornos restrictivos, complementos de seguridad del navegador y otras cosas extrañas.

Add to Calendar PRO nació - al menos como una idea.

🚀 Llegando a la versión PRO

A finales de 2023, lanzamos nuestro nuevo servicio y empresa, haciendo que Add to Calendar Buttons, la generación de archivos ics, la gestión de RSVP y más, fueran accesibles para todos - sin importar si eres desarrollador, gestor de eventos o estás organizando tu propia boda.
Le pusimos un precio justo y transparente y hemos hecho muy felices a muchas personas desde entonces.

Add to Calendar Buttons funcionan aún mejor de esa manera, ya que te beneficias de la estabilidad y la naturaleza transparente del código abierto, mientras que es una solución completamente gestionada, con una aplicación web fácil y sin necesidad de código, donde puedes gestionar y definir tus eventos sin ningún conocimiento técnico.

Gracias al soporte del servidor, los archivos ics se muestran perfectamente, mientras que incluso pre-verificamos el proveedor del calendario (por ejemplo, Yahoo está caído de vez en cuando) y guiamos al usuario a través de alternativas, si algo sale mal.

Y aún no hemos terminado. ¡Mantente atento!

¡Prueba nuestra oferta sin ningún riesgo y de forma gratuita!
→ Regístrate aquí…