添加到日历按钮 UI 小部件

一个来自 Jens Kuerschner 的有用的小 UI 小部件。点击添加到日历按钮，获取日历应用程序列表，用户选择他们实际使用的应用程序，并获取他们需要的日历内容。这可能是一个专门的 URL，他们会被发送到，甚至是一个可以下载的 .ics 文件。

它非常易于使用。以下是我使用 CDNs 上的库来获取 JavaScript 和 CSS 的方法

让我们进行一个思想倾倒！

我有点不习惯配置作为“一大块 JSON 字符串放在 HTML 中”。

我看到了它使用 display: none; 在父元素上隐藏该文本以防止渲染的技巧，但我认为将它放到 <script type="application/ld+json"> 标签中会更好。

这些的备用方案是，假设 JavaScript 无法加载或执行正确，什么也没有。

我对此很纠结。也许没关系？这似乎是额外的功能。而且它可能位于用户可以按任何方式添加到其日历的实际事件内容旁边。我当然不想看到非交互式文本说“添加到日历”，因为那比什么也没有还糟糕。但是也许可以有一些通用的有用超链接可以充当备用方案？

添加到日历按钮似乎是 Web 组件的不错用例。

为什么不使用 <add-to-calendar> 元素呢？这样，脚本和样式就可以隔离，并且可能更安全以供通用使用。但是如何为 Web 组件配置 JSON？也许每个属性都会变成一个属性？也许像这样：<add-to-calendar options="Apple, Google", startTime="10:15" />

不过，需要首先解决的最大问题是，交互式元素似乎是一个带有所有 JavaScript 处理程序的 <div>。

您根本无法使用 Tab 键定位到它，因此无法激活它。没有 CSS 状态 - 全部都是由 JavaScript 更新的类。我一定会更新它，使其成为一个 <button>。也许现在是 使用 <dialog> 元素 来显示选项，并使用 dialog::backdrop 来创建那个 fancy backdrop-filter 背景。

只是一些建设性的批评，Jens - 一直保持下去。

直接链接 →