Workshop Kit · referencia del widget
Publicadorhythm-calendar
El último widget del bootcamp. Calendario de vista mensual con tareas recurrentes pinneadas (horarios / reseñas / regenerar / SEO) y una exportación .ics real que deja cuatro eventos recurrentes con RRULE directamente en Google Calendar, Apple Calendar, u Outlook. El .ics se genera completamente en el cliente desde MuntinContext.rhythmCadence — descarga vía Blob URL, sin fetch, sin servidor.
Demo en vivo
Cambia una cadencia — la grilla del mes abajo se repuebla con pins en los días donde aterriza esa cadencia. Haz clic en Descargar archivo de calendario para obtener el .ics. Ábrelo en tu app de calendario; los eventos recurrentes se vuelven activos inmediatamente.
Sin bloque de configuración — las cuatro tareas + los dropdowns de cadencia vienen incluidos
Contrato
| Comportamiento | Notas |
|---|---|
Lee rhythmCadence |
Pre-llena los cuatro dropdowns de cadencia. Cae a hours=monthly, reviews=biweekly, regen=monthly, seo=quarterly cuando no está seteado. |
Lee restaurantProfile.name |
Se agrega al SUMMARY de cada evento .ics para que un operador con múltiples calendarios pueda distinguir a qué restaurante pertenece el evento. |
Escribe rhythmCadence |
{ hours, reviews, regen, seo } con cada valor uno de: 'off', 'weekly', 'biweekly', 'monthly', 'quarterly'. |
| Manejo de string legado | La lección L16 anteriormente guardaba rhythmCadence como un string libre (tecleado por el operador). En el primer montaje, el widget ignora cualquier cosa que no sea un objeto y escribe el objeto estructurado en el próximo cambio — los operadores no pierden progreso, pero el esquema se actualiza. |
| Exportación .ics | Generada en el cliente usando la especificación VCALENDAR/VEVENT/RRULE. El primer evento aterriza el próximo lunes a las 9 AM hora local; las recurrencias siguen la regla FREQ. Nombre de archivo: muntin-rhythm.ics. |
| Sin fetch | Blob URL + document.createElement('a').click(). Sin servicio de terceros, sin endpoint de servidor. El archivo vive en la carpeta de Descargas del operador; la app de calendario lo abre directamente. |
Marcado
Sin bloque de configuración. Las cuatro tareas + sus cadencias por default vienen incluidos en el módulo del widget.
Qué contiene el archivo .ics
Un bloque BEGIN:VEVENT por tarea cuya cadencia no sea "off":
Slots de 30 minutos comenzando 9 AM hora local en el primer lunes después de la descarga. Google Calendar, Apple Calendar, y Outlook todos importan este formato directamente vía "abrir con" o drag-and-drop.
Accesibilidad
- Cada selector de cadencia es un
<select>etiquetado — accesible por teclado, anunciado por lectores de pantalla. - La grilla del mes es una
<table>real con encabezados<th scope="col">de día-de-semana — los lectores de pantalla navegan por columna / fila naturalmente. - Los pins de tareas dentro de cada celda son etiquetas de texto visibles ("Horarios", "Reseñas") con un fondo coloreado — el color refuerza la etiqueta, no la reemplaza.
- La celda "hoy" está delineada además de coloreada, así los modos de alto contraste todavía la marcan.
- El botón de descarga anuncia "Archivo de calendario descargado" vía una región polite en vivo después de que la descarga se dispara.
Por qué .ics y no una API de agendamiento pagada
Las integraciones de calendario podrían enrutarse a través de la API de Google Calendar o los webhooks de Cal.com, ambos requerirían flujos de auth + credenciales en el servidor. El formato .ics es el estándar abierto sobre el que esos servicios mismos se construyen — cada app de calendario en cada plataforma ha importado .ics por décadas. Generarlo en el cliente y descargar un archivo preserva la postura de "sin fetch, sin cuenta" de la suite mientras todavía entrega una configuración real de eventos recurrentes. El ritmo del operador se vuelve activo en su teléfono el momento que toca el archivo.
Dónde se publica
Código fuente
/tools/_shared/workshop/rhythm-calendar.js — ~290 LOC. Exporta { tag, contextKeys, mount, serialize }. El array TASKS es el contrato de cuatro tareas; RRULE es el mapeo cadence-id → FREQ-rule; buildICS() genera el archivo VCALENDAR; nthCadenceDays() computa en qué día-de-mes aterriza cada cadencia para el overlay de pins.