A useful little UI widget thingy here from Jens Kuerschner. Click the add-to-calendar button, get a list of calendar apps, the user selects which one they actually use, and they get what they need for that calendar. Could be a specialized URL they get sent to, or even an
.ics file that gets downloaded.
Let’s do a thought dump!
The configuration as “a big chunk of JSON sitting in the HTML as a string” is a little weird to me.
I see the hack where it uses
display: none; on the parent to hide that text from rendering, but I think I like the setup where that’s put into a
<script type="application/ld+json"> tag much better.
I’m torn there. Maybe it’s fine? This seems like bonus functionality anyway. And it’s presumably sitting next to actual content about the event that a user could add to their calendar however they want. I certainly wouldn’t want to see non-interactive text saying “Add to Calendar” because that’s worse than nothing. But maybe there could be some kind of generically useful hyperlink that can act as the fallback?
An add-to-calendar button seems like a good use case for a web component.
Why not an
<add-to-calendar> element? That way, the script and styles could be isolated and probably a bit safer for general usage. But how do you do JSON config for a web component? Maybe every single property becomes an attribute? Maybe something like:
<add-to-calendar options="Apple, Google", startTime="10:15" />
The biggest problem to address up front, though, is that it looks like the interactive element is a
<button>. And maybe it’s good timing to make use of a
<dialog> element for the options and use
dialog::backdrop for that fancy
Just some constructive criticism, Jens — keep on keepin’ on.
Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.