Der Anwendungsfall ist in der Regel einfach: Benutzers ermöglichen, ein Event über eine Schaltfläche oder einen Link zu ihrem bevorzugten Kalender hinzuzufügen.
Dennoch bringt dieser einfache Fall so viele Fallstricke und Probleme mit sich, bei denen die meisten Skripte im Web früher oder später nicht mehr funktionieren.
Dies ist die Geschichte, wie wir zu unserer weltklasse "Add to Calendar"-Button-Technologie kamen, die unsere Dienste bei Add to Calendar PRO antreibt.
Falls du nur an der funktionierenden Lösung interessiert bist, kannst du direkt zu unserer Homepage gehen und sie dir ansehen!
💡 Wie alles begann
Im Jahr 2021 war ich dabei meine Hochzeit zu planen.
Großartig!
Allerdings geht derartiges auch mit Verpflichtungen und Konsequenzen einher. Eine davon war die Erstellung einer Website, um die Gäste über das Datum zu informieren.
Ja, wir haben an den gedruckten Save-the-Date-Karten gespart und wollten stattdessen eine Website nutzen.
Beim Erstellen dieser Website musste ich eine einfache Möglichkeit einbauen, damit die Nutzer dieses Event zu ihren Kalendern hinzufügen können. Da ich wirklich nicht viel Zeit damit verbringen wollte, suchte ich nach einem einfach zu verwendenden Skript, Package oder ähnlichem.
😓 Das Problem
Ich fand nichts, was meinen Anforderungen entsprach.
Grundsätzlich sind alle kostenlosen Pakete und Codes, die man findet, irgendwie veraltet oder dysfunktional. Sie verwenden entweder sehr alte, nicht mehr unterstützte Schemata – oder es fehlt grundlegende Funktionalität wie das Erstellen einer iCal/ics-Datei. Wenn du denkst, du hast etwas gefunden, warte bis es jemand in einem „seltsamen Setup“ wie Chrome auf iOS verwendet.
Auf der anderen Seite fand ich ungefähr 2545 Verweise auf addevent.com.
Mit „Verweisen“ meine ich Google-Einträge, aber noch mehr Codepens. Dort haben viele Leute (oder Fake-Personen? 🙊) einfach den Code platziert, um den Addevent-Basis-Button zu integrieren. Ich bin mir nicht sicher, warum man das auf Codepen stellen sollte, wenn nicht aus eigenen SEO-Bemühungen - nervig für jemanden, der Rat sucht.
Das Problem mit AddEvent (und auch neueren Konkurrenten wie Calendarlink):
Sie bieten zwar eine kostenlose Lizenz an, diese beschränkt den Button aber auf eine ziemlich niedrige Anzahl an Klicks, was selbst für meine kleine Hochzeit nicht funktioniert hätte. Ich würde sogar sagen, es ist völlig nutzlos, wenn es nicht nur zu Testzwecken verwendet wird. Und selbst mit der kostenpflichtigen Version kämpft man mit Beschränkungen (gut versteckt durch "nettes" Wording 🤨) und kann damit leicht dein Budget sprengen (aber das ist eine andere Geschichte).
Sie haben einige zusätzliche coole Funktionen, aber die brauchte ich nicht – keine davon. Und ich wollte eine bessere UI/UX nutzen.
Am Ende habe ich meinen eigenen Button gebaut und Open Source veröffentlicht, damit andere von meiner Arbeit profitieren und vielleicht sogar neue großartige Ideen einbringen können.
📝 Die Anforderungen definieren
- Coole UI/UX
- Funktioniert auf Desktop und Mobilgeräten
- Unterstützt alle modernen Kalender
- Generiert eine iCal/ics-Datei, um alle anderen Kalender zu unterstützen (wichtiger Punkt hier: Dynamische Generierung, so dass keine Datei vorher manuell erstellt werden muss)
Klingt einfach.
Auf der Detail-Ebene verstecken sich dann aber doch unendlich viele Fallstricke. Und wie immer, wenn man anfängt so etwas zu bauen, ergeben sich viele Anforderungen erst nach und nach.
Wenn du beschließt, derartiges zu einem Open-Source-Projekt zu machen, musst du zudem an andere Benutzer (Entwickler) denken. Wie werden sie deinen Code verwenden? Wie erfahren sind sie? Was werden ihre Erwartungen sein? Für wen baust du?
Um ehrlich zu sein war das der schwierigste Teil!
Ich hatte immer den eher unerfahrenen Hobby-Coder im Kopf. Diese Leute sollten in der Lage sein, diesen Code mit Leichtigkeit zu verwenden, indem sie einfach einige CSS- und JS-Dateien zu ihrem Code hinzufügen. Ohne sich um etwas anderes zu kümmern. Es muss einfach funktionieren.
Andererseits, um es auch für andere Entwickler ansprechend zu machen, sollte es mit deren täglichen Workflows harmonieren. Ich dachte dabei an moderne JavaScript-Frameworks/Bibliotheken wie Angular oder React.
Also wäre es notwendig, dieses Projekt auf npm zu veröffentlichen. Etc. pp.
In Bezug auf weitere Anforderungen muss man (mit Blick auf die Zielgruppen) zwischen funktionalen und technischen Anforderungen unterscheiden.
Auf der funktionalen Seite sollte alle Konfiguration unkompliziert durch das Hinzufügen einer einfachen HTML-Struktur möglich sein. Man könnte dies auch als technische Anforderung sehen, aber für mich ist es irgendwie Teil der UX.
Betrachtet man die Events, die man verwenden möchte, so können diese jederzeit beginnen und jederzeit enden. Sie könnten ganztägig oder zu bestimmten Zeiten stattfinden. Aber man muss auch unterschiedliche Zeitzonen berücksichtigen!
Hast du schon einmal mit Zeitzonen gearbeitet? Verrückte Sache – also haben wir unsere eigene Bibliothek dafür gebaut, um unseren Dienst für eine globale Zielgruppe noch stabiler zu gestalten.
Das Hinzufügen eines Ereignistitels, einer Beschreibung und eines Orts fühlt sich offensichtlich an.
Aber wie sieht es mit den Add-to-Calendar-Optionen aus? Vielleicht möchte man Yahoo Calendar nicht anbieten und es einfach halten?
Was die Interaktion betrifft, halte ich Hover für einen guten Auslöser, um das Dropdown zu öffnen. Vielleicht wäre in anderen Fällen aber ein Klick der bessere Auslöser!
Last but not least, vielleicht möchte ein Benutzer kein statisches Event teilen, sondern es flexibel halten – indem es immer 10 Tage ab dem aktuellen Tag stattfindet.
Auf der technischen Seite war mir wichtig, dass alles sehr detailliert dokumentiert ist. Persönlich hasste ich es in meinen frühen Tagen, wenn Code nicht (gut oder überhaupt) dokumentiert war.
Der Code sollte gut strukturiert, aber trotzdem leicht lesbar sein! Das bedeutet, dass das Aufteilen in zu viele abstrakte Dinge die Leute zu sehr verwirren könnte – auch wenn es ein saubererer Code wäre (inzwischen ist der Code etwas zu groß geworden, um dieses Kriterium noch zu erfüllen, aber es steht auf der Roadmap).
🛠️ Der Aufbau
Zur ersten Version zu gelangen war der eher einfache Teil.
Die Welt blickt nun auf einen Add to Calendar Button, der tatsächlich funktioniert – und in weniger als 1 Minute implementiert werden kann!
Wir hatten eine großartige Hochzeit – und Website – und ich erhielt viel positives Feedback aus der Community auf GitHub. Ich habe es auch auf ProductHunt gestellt, es zum #1 Product of the Day gebracht und noch mehr Feedback erhalten.
Viele weitere Entwickler brachten ihre Gedanken und Ideen ein.
Mit der Zeit kamen immer mehr Leute auf mich zu und fragten nach einer noch einfacheren Lösung.
Das kam natürlich eher von Nicht-Entwicklern. Aber selbst auf technischer Ebene fragten die Leute nach zusätzlichen Features, wie RSVP, was eine Full-Stack Softwarelösung erfordern würde - anstelle des JavaScript-Snippets.
Es gibt zudem ein weiteres Problem mit dem kostenlosen Open-Source Add-to-Calendar-Button, das per Design existiert. Ics-Dateien werden clientseitig direkt im Browser des Benutzers generiert. Dies funktioniert in 90% der Fälle einwandfrei, scheitert jedoch bei allen anderen - normalerweise aufgrund restriktiver Umgebungen, Sicherheits-Browser-Plugins und anderem seltsamen Zeug.
Add to Calendar PRO war geboren – zumindest als Idee.
🚀 Zur PRO-Version gelangen
Ende 2023 haben wir unseren neuen Dienst und unser Unternehmen gestartet, um Add-to-Calendar-Buttons, ics-Dateierstellung, RSVP-Management und mehr für alle zugänglich zu machen – egal ob Entwickler:in, Event-Manager:in oder du einfach nur deine eigene Hochzeit planst.
Wir haben einen fairen und transparenten Preis auf das Ganze geklebt und seitdem viele Menschen glücklich gemacht.
Add to Calendar Buttons funktionieren auf diese Weise noch besser, da du von der Stabilität und transparenten Natur des Open-Source-Codes profitierst, während du aber eine vollständig verwaltete Lösung, mit einer einfachen No-Code-Webanwendung nutzt - in der du deine Events ohne technisches Wissen verwalten und definieren kannst.
Dank der Serverunterstützung werden ics-Dateien perfekt gerendert, während wir sogar den Kalenderanbieter vorab überprüfen (zum Beispiel ist Yahoo von Zeit zu Zeit nicht erreichbar) und den Benutzer durch Alternativen führen, falls etwas schief geht.
Und wir sind noch lange nicht am Ende!
Teste unser Angebot kostenfrei und ohne Risiko!
→ Hier anmelden und ausprobieren...
