Add-to-Calendar Button UI Widget
Publikováno: 17.2.2022
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 …
Add-to-Calendar Button UI Widget originally published on CSS-Tricks. You should get the newsletter.
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.
To Shared Link — Permalink on CSS-Tricks
Add-to-Calendar Button UI Widget originally published on CSS-Tricks. You should get the newsletter.