Home > Designing, Others > Add-to-Calendar Button UI Widget

Add-to-Calendar Button UI Widget

February 17th, 2022 Leave a comment Go to comments
Add-to-Calendar Button banner from the GitHub repo.

It’s pretty easy to use. Here’s me using the library off of CDNs for both the JavaScript and CSS:

CodePen Embed Fallback

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 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 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:

The biggest problem to address up front, though, is that it looks like the interactive element is a

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

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:

CodePen Embed Fallback

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 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 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:

The biggest problem to address up front, though, is that it looks like the interactive element is a

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

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.