The use case is quite simple in many cases: Enabling users to add an event to their preferred calendar via a button or link.
Still, this simple case comes with so many pitfalls and issues, while most scripts on the web break sooner or later.
This is the story of how we got to our world-class Add to Calendar Button technology, which is powering our services at Add to Calendar PRO.
If you are only interested in the working solution, you can directly go to our homepage and check it out!
💡 How it all started
In 2021, I was about to plan my wedding.
Awesome!
But it comes with obligations and implications. One of them has been the creation of a website to inform guests about the date.
Yes, we saved on the printed save-the-date card and wanted to use a website instead.
Building this website, I needed to include a simple way for the users to add this event to their calendars. Since I really did not want to spend too much time on this, I was looking for some easy to use script, package, whatsoever.
😓 The Problem
I did not find anything, which matched my requirements.
Basically all free packages and code you find, is somehow outdated. It uses either some very old, no longer supported, schemes — or lacks some basic functionality like creating an iCal/ics file.
If you think you found one, wait until somebody uses it on some “strange setup” like Chrome on iOS.
On the other side, I found like 2545 references to addevent.com.
With “references”, I mean Google entries, but even more, codepens. There, many people (or fake people? 🙊) simply placed the code to integrate the addevent basic button. I am not sure why you would put that on codepen, except for your own SEO reasons - which is annoying for somebody looking for advice.
The problem with AddEvent (and also newer competitors, like Calendarlink):
They have a free tier, but this limits the button to a fairly low number of clicks, which would not have worked — even for my little wedding event. So, I would even say it is completely useless, if not used for testing purposes only. And even with the paid version, it is still limited (well hidden in their wording 🤨) and can easily kill your budget (but this is another story).
They have some additional cool features, but I basically did not need them — none of them. And I wanted to add a better UI/UX.
I've ended up building my own button and putting it open source, so other people could benefit from my work and maybe even come up with new great ideas.
📝 Defining the requirements
- Cool UI/UX
- Works on Desktop and Mobile
- Supports all modern calendars
- Generates an iCal/ics file on the fly to support all other calendars (important part here: generate it and not require some file to be created manually before)
Seems simple.
But still, there are a thousand caveats on the detail level and, as always, when you start to build such a thing, a lot of additional requirements pop up one by one.
When you decide to make it an open source project, you also need to think about other users (aka developers). How will they use your code? How skilled are they? What will be their expectations? Who are you building for?
To be honest, this was the hardest part!
I always had the rather inexperienced hobby-coder in mind. Those people should be able to use this code with ease. By simply adding some css and js files to their code. Without caring about anything else. It simply needs to work.
On the other side, to make it also appealing to other developers, it should comply with their daily work environments. I was thinking about modern JavaScript frameworks/libraries, like Angular or React.
So, it would be necessary to put this project on npm. And importing scripts into those projects works a little bit different than adding some stupid code snippet into an HTML page.
In terms of further requirements, you need to differentiate (looking at the target audiences) between functional and technical requirements.
On the functional side, all configuration should be easily doable by adding some simple HTML structure. One could also see this as a technical requirement, but for me, it is part of the UX somehow.
Looking at the events, one would want to use; they can start anytime, end anytime. They could be all-day or have specific times. But you also need to consider different time zones!
Have you ever worked with time zones? Crazy thing - so we built our own library for it, making our service even more stable for a global audience.
Adding an event's subject, description, and location feels obvious.
But how about the add-to-calendar options? Maybe one does not want to offer Yahoo Calendar and keep it simple?
Regarding the interaction, I consider hover as a good trigger to open the dropdown. Maybe, in other cases, click would be the better trigger!
Last but not least, maybe a user does not want to make it a static event, but keep it flexible — by being always 10 days from the current day on?
On the technical side again, I felt that it should be documented at a very detailed level. Personally, I hated it in my early days, when code was not documented (well or at all).
The code should be well structured, but still easily readable! This means that splitting it into too many abstract things might confuse people too much — even if it might be a cleaner code though (in the meantime, the code base grew a little too much to still match this requirement, but it is on the Roadmap).
🛠️ Building it
Getting to the first version was the rather easy part.
The world now has an Add to Calendar Button that actually works - and can be implemented in under 1 minute!
We had an awesome wedding - and website - and I received a lot of positive feedback from the community on GitHub. I even put it on ProductHunt, made it #1 Product of the Day and got even more feedback.
Many more developers added their thoughts and ideas.
Over time, more and more people approached me, asking for an even simpler solution.
This, of course, came from non-developers. But even on the technical level, people asked for additional services, like RSVP, which would require a full-stack software solution instead of the JavaScript snippet.
There is even more problem with the free open source Add to Calendar Button, which is somehow by design. Ics files are generated on the client side, right within the user's browser. This works fine in 90% of the cases, but fails for everybody else. Usually due to restrictive environments, security browser plugins, and other strange stuff.
Add to Calendar PRO was born - at least as an idea.
🚀 Getting to the PRO version
End of 2023, we launched our new service and company, making Add to Calendar Buttons, ics file generation, RSVP management, and more accessible to everybody - no matter if you are a developer, event manager, or planning your own wedding.
We put a fair and transparent price tag on it and have made many people very happy since then.
Add to Calendar Buttons work even better that way, as you benefit from the stability and transparent nature of the open source code, while it is a fully managed solution, with an easy no-code web application, where you can manage and define your events without any technical knowledge.
Due to the server support, ics files are rendered perfectly, while we even pre-check the calendar provider (for example, Yahoo is down from time to time) and guide the user through alternatives, if anything goes wrong.
And we are not done yet. Stay tuned!
Test our offering without any risk and free of cost!
→ Sign-up here...
