Implement an Add to Calendar Button in under 1 Minute
The all new version 2 of the popular open-source script!
Fasten your seat belt!
The all new V2 of the Add to Calendar Button is here.
You are looking for a finally working and easy to handle, yet free, solution to generate calendar links and offer your users a convenient solution to add events to their calendars? You found it!
In 2021, the need for a stable and free Add to Calendar Button started a wild journey of writing celebrated lines of code.
The Add to Calendar Button script became the “Product of the Day” at ProductHunt, got featured on multiple software development blogs and soon became one of the most popular repositories on GitHub. ⭐
With the new, second major version, we are now pushing the whole tool to the next level. Making event sharing and calendar handling even more convenient.
🤩 What to expect
The new version of the tool, script, widget, component (call it what you want) is built as a web component. This means that it perfectly integrates in all common Frontend tech stacks and feels like any other native HTML element. We even created plugins and wrappers, where it might get even a little bit more difficult otherwise (for example with WordPress).
You can find specific integration guides at the demo page:
Each guide only holds very few steps, which makes it easy to get it running in extremely short time.
The main focus always is “ease of use” for both, you and your users.
Integrating it should feel easy — especially if you have a close look at the demo page with its examples, guides, and the interactive playground.
For users, on the other side, it should feel natural to access the element. From catching all kinds of edge cases to supporting all kinds of interaction (may it be touch, keyboard, mouse, or programmaticaly).
Bottom line: Expect a solution for your use case, that comes without any trouble, big effort, and hidden pain.
✨ Features
Let’s have a quick look at the main features.
- Supports calendars at Apple, Google, Yahoo, Microsoft (365, Teams, Outlook), iCal, and more.
- Timed and all-day events. One-time, multi-date, and recurring. Supporting calendar subscriptions.
- All kinds of easy customization options and multiple pre-defined templates.
- Dynamic UX for mouse, touch, keyboard; and all types of screen sizes (mobile friendly).
- Live adjustment of the button to changing attributes (incl. its style).
- Comprehensive debug mode that guides you through the setup.
- Supporting 20+ languages, incl. RTL text for Arabic; but also custom labels and text blocks (i18n).
- Optimized for SEO with Schema.org rich snippet auto-generation.
- Fully GDPR, CCPA, and LGPD compliant.
- And it is free to use. 😉
Bare in mind that the maybe strongest one is the simple setup while being fully transparent about what is going on.
🚀 Go PRO
If this is not enough or still to complicated for your setup, you should also check our latest PRO offering at add-to-calendar-pro.com!
This brings you even more features, like RSVP functionality; and makes the major part of the setup completely no-code.
⏱️ The “under 1 Minute” Challenge
The best way of experiencing the joy of using the Add to Calendar Button, is by visiting the demo page and trying out the playground example.
After that, you should immediately try to integrate it with your development environment.
We claim that this should be possible in under 1 minute.
If that’s really true, can only be fully validated by yourself, putting it to test.
However, we also took the challenge and recorded it. Enjoy!
(In the video, the content got copied from the installation guides at the demo page.)
🛠️ How do I get it to work?
Generally, you should have a look at the demo page, which holds a lot of detailed guides. In addition, we have created a collection at Stackblitz, which shows you in a complete project example how to use it with all kinds of stacks.
To have at least a first glance here in this post…
You would either use the script via CDN by add the following somewhere to your page:
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>If you are familiar with npm, you can also install the npm package instead:
npm install add-to-calendar-buttonIn the npm case, you would then import the script with:
import 'add-to-calendar-button';Now, in both cases, you can simply create a new button with the following scheme:
<add-to-calendar-button
name="Title"
options="'Apple','Google'"
location="World Wide Web"
startDate="2023-02-03"
endDate="2023-02-03"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
></add-to-calendar-button>Again, the demo page holds more documentation 😉.
👀 Looking back
Before looking into what the future brings, it is always interesting minding the roots.
This whole project started when I was about to get married and could not find any proper free solution. You can read the whole story in the original Medium post (click here).
It is funny how an urgent need at the right time, combined with some entrepreneurial drive, can kick-off cool projects.
The ongoing positive feedback kept the project going; and this is also what will keep the project alive in the future.
So, spread the word, leave some good reviews, and tell your friends.
This all helps to support such kind of projects and free software.
What’s next?
Well, the most obvious step would be to check out our demo page and install the button in your environment! 😉
Next, you should have at least a quick look at the PRO version 🚀.
Besides that, if you are interested in our journey and a lot of cool stuff coming up in the next months, you should also follow us wherever it feels most comfortable for you:
- 🗒️ Medium: https://medium.com/add-to-calendar
- 🖥️ GitHub: https://github.com/add2cal/add-to-calendar-button
- 🐦 Twitter: https://twitter.com/add2calendar
Looking forward to seeing you play with the Add to Calendar Button!
