Botón para agregar al calendario del UI Widget trucos CSS

Pequeño widget útil para la interfaz de usuario aquí por Jens Kuerschner. Haga clic en el botón Agregar al calendario, obtenga una lista de aplicaciones de calendario, el usuario elige cuál usar realmente y obtiene lo que necesita para ese calendario. Podría ser una URL dedicada para enviar, o incluso una .ics archivo a descargar.

Es muy fácil de usar. Aquí uso la biblioteca fuera de la CDN tanto para JavaScript como para CSS:

¡Pensemos!

La configuración como "gran parte del JSON que está en HTML como una cadena" me resulta un poco extraña.

Veo el hack donde se usa display: none; del padre para ocultar este texto de la representación, pero creo que me gusta la configuración en la que se establece en <script type="application/ld+json"> etiqueta mucho mejor.

La opción de copia de seguridad para ellos, suponiendo que JavaScript no se cargue o no se ejecute correctamente, no es nada.

Estoy desgarrado allí. ¿Quizás es bueno? Esto todavía parece una característica adicional. Y probablemente se encuentra junto al contenido del evento real que un usuario puede agregar a su calendario como lo desee. Desde luego, no me gustaría ver texto no interactivo con la etiqueta "Agregar al calendario", porque es peor que nada. ¿Pero tal vez haya algún tipo de hipervínculo público que actúe como respaldo?

El botón Agregar al calendario parece un buen uso de un componente web.

Por qué no <add-to-calendar> ¿elemento? De esta manera, la secuencia de comandos y los estilos podrían aislarse y, probablemente, ser un poco más seguros para el uso general. Pero, ¿cómo configurar JSON para un componente web? ¿Quizás cada propiedad individual se convierte en un atributo? Tal vez algo como: <add-to-calendar options="Apple, Google", startTime="10:15" />

Sin embargo, el mayor problema a resolver en la parte delantera es que el elemento interactivo parece ser un <div> con todos los controladores de JavaScript.

no se puede Sección en absoluto, por lo que no hay forma de activarlo. No hay estados CSS: todas las clases han sido actualizadas por JavaScript. Definitivamente actualizaría esta cosa para que sea <button>Y tal vez sea un buen momento para aprovechar una <dialog> elemento para opciones y uso dialog::backdrop por esta fantasia backdrop-filter antecedentes.

Solo una pequeña crítica constructiva, Jens. Sigue adelante.

Conexión directa →