Add-to-Calendar Button UI Widget

A helpful little UI widget thingy right here from Jens Kuerschner. Click on the add-to-calendar button, get an inventory of calendar apps, the person selects which one they really use, they usually get what they want for that calendar. May very well be a specialised URL they get despatched to, and even an .ics file that will get downloaded.

It’s fairly simple to make use of. Right here’s me utilizing the library off of CDNs for each the JavaScript and CSS:

Let’s do a thought dump!

The configuration as “an enormous chunk of JSON sitting within the HTML as a string” is a bit bizarre to me.

I see the hack the place it makes use of show: none; on the guardian to cover that textual content from rendering, however I believe I just like the setup the place that’s put right into a <script sort=”software/ld+json”> tag a lot better.

The fallback for these, assuming JavaScript doesn’t load or execute appropriately, is nothing.

I’m torn there. Possibly it’s effective? This looks as if bonus performance anyway. And it’s presumably sitting subsequent to precise content material in regards to the occasion {that a} person may add to their calendar nonetheless they need. I actually wouldn’t need to see non-interactive textual content saying “Add to Calendar” as a result of that’s worse than nothing. However perhaps there may very well be some form of generically helpful hyperlink that may act because the fallback?

An add-to-calendar button looks as if a superb use case for an online element.

Why not an <add-to-calendar> aspect? That means, the script and types may very well be remoted and possibly a bit safer for basic utilization. However how do you do JSON config for an online element? Possibly each single property turns into an attribute? Possibly one thing like: <add-to-calendar choices=”Apple, Google”, startTime=”10:15″ />

The most important drawback to deal with up entrance, although, is that it appears to be like just like the interactive aspect is a <div> with all JavaScript handlers.

You’ll be able to’t Tab to it in any respect, so there isn’t any solution to activate it. There aren’t any CSS states — it’s all courses up to date by JavaScript. I’d undoubtedly get this factor up to date to be a <button>. And perhaps it’s good timing to make use of a <dialog> aspect for the choices and use dialog::backdrop for that fancy backdrop-filter background.

Just a few constructive criticism, Jens — carry on keepin’ on.

To Shared Hyperlink — Permalink on CSS-Methods

Add-to-Calendar Button UI Widget initially printed on CSS-Methods. You must get the e-newsletter.