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.
It’s pretty easy to use. Here’s me using the library off of CDNs for both the JavaScript and CSS:
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.
The fallback for these, assuming JavaScript doesn’t load or execute correctly, is nothing.
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 <div> with all JavaScript handlers.
You can’t Tab to it at all, so there is no way to activate it. There are no CSS states — it’s all classes updated by JavaScript. I’d definitely get this thing updated to be 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 backdrop-filter background.
Just some constructive criticism, Jens — keep on keepin’ on.
Technically, an entire JSON sequence can come inside a
data-attribute, enclosed by single quote marks. The only issue would be escaping single quote marks inside the JSON string values – I think it’s supposed to be done with"?Thing is – as far as I know and understand the proposal, this would hurt the schema.org format.
(btw: there’s a new version 1.5.1)
Thanks, Chris!
Will definitely spending some thoughts on your points.
Hi Chris,
this example is broken due to the breaking changes in the latest V2.
Btw: This new version also reflects your feedback, incl. the Web Component part. Would love to see you checking it out :)
https://github.com/add2cal/add-to-calendar-button
Best,
Jens