A Closer Look at the Add-to-Calendar Button Widget
Jens Kuerschner has put together a handy little UI component: an add-to-calendar button. Click it and you're presented with a list of calendar services. Pick the one you use and you're handed exactly what you need, whether that’s a custom URL or a downloadable .ics file. Getting it running is straightforward—the library loads from a CDN with separate JavaScript and CSS files.
It's a clever tool, but there's plenty of room for discussion on how it's built and how it could be improved.
Starting with Accessibility
The most pressing issue is that the interactive trigger is a <div> wired up entirely with JavaScript. That means no Tab focus, no keyboard activation, and no real CSS states—just classes updated by script. Swapping it for a proper <button> would be a solid first step. From there, the options list could take advantage of the <dialog> element, with a dialog::backdrop handling the background and freeing up backdrop-filter for visual flair.
Questioning the JSON Configuration
The setup stores configuration as a large JSON string directly in the HTML. It works—the parent uses display: none; so the text isn't rendered—but it feels a bit hacky. A cleaner approach would be placing that data inside a <script type="application/ld+json"> tag, which is a more conventional and arguably more maintainable pattern.
What Happens Without JavaScript?
If the script fails to load or execute, there's no fallback whatsoever. That might be acceptable—this feels like a progressive enhancement sitting alongside real event content that users can still manually add to their calendar. A non-functional button labeled "Add to Calendar" would be worse than nothing, but perhaps a simple hyperlink could serve as a graceful fallback.
The Case for a Web Component
This kind of widget seems like a perfect candidate for a web component. An <add-to-calendar> element would keep its styles and scripts isolated and safer for broad use. The open question there is configuration: every property as an attribute? Something like <add-to-calendar options="Apple, Google" startTime="10:15" />? It's a different design trade-off, but one worth exploring.
Constructive thoughts for Jens—this is a useful little tool and worth iterating on.
