Volver al inicio

DataviewJS y Meta Bind para tareas de Obsidian por fecha

El artículo describe la implementación de una página interactiva en Obsidian para ver tareas en una fecha seleccionada usando Meta Bind y DataviewJS. Desglose del código, instalación de plugins y matices de uso. Adecuado para desarrolladores intermedios/senior que usan Obsidian.

Tareas dinámicas de Obsidian: fecha por clic con Meta Bind
Advertisement 728x90

Vista Interactiva de Tareas en Obsidian por Fecha Seleccionada con Meta Bind y DataviewJS

Meta Bind y DataviewJS permiten crear una página con un selector de fechas interactivo para visualizar tareas. En modo lectura, los usuarios hacen clic en un calendario, seleccionan una fecha y la lista se actualiza automáticamente. Esta solución utiliza propiedades YAML como almacenamiento intermedio entre el widget de entrada y el script de salida.

Esto elimina la edición manual de consultas de Tareas o Dataview, donde la fecha debe cambiarse en el código cada vez.

Configuración: Instalar Complementos y Bloque YAML

Instala los complementos Meta Bind y Dataview desde la configuración de Obsidian. En Dataview, habilita Consultas JavaScript.

Google AdInline article slot

Crea un archivo, por ejemplo, DynamicTasks.md, con un bloque YAML:

---
selected-date: 2025-12-30
---

El valor inicial será sobrescrito por el widget.

Widget Meta Bind para Selección de Fecha

Debajo del YAML, inserta:

Google AdInline article slot

INPUT[datePicker: selected-date]

En modo lectura, aparece un calendario. Al hacer clic se abre un selector de fecha, y el valor se guarda en selected-date.

Script DataviewJS: Filtrado y Renderizado de Tareas

Después del widget, añade un script para buscar tareas:

Google AdInline article slot

const targetDate = dv.current().file.frontmatter["selected-date"];

const pages = dv.pages('"Work"')

.where(p => p.file.tasks

.where(t => !t.completed && t.due && t.due.toISODate() === targetDate)

.length > 0);

for (let page of pages) {

dv.el("div", dv.fileLink(page.file.path, false), {

attr: {

style: "display:inline-block; margin:8px 0 4px 0; padding:3px 8px; border-radius:6px; background:#e0f0ff; color:#0366d6; font-weight:500;"

}

});

dv.taskList(

page.file.tasks

.where(t => !t.completed && t.due && t.due.toISODate() === targetDate),

false

);

}

Desglose del Script

  • Lectura de la fecha: dv.current().file.frontmatter["selected-date"] devuelve una cadena YYYY-MM-DD.
  • Búsqueda de archivos: dv.pages('"Work"') escanea la carpeta. El filtro verifica tareas incompletas con due en targetDate mediante .toISODate().
  • Renderizado: Para cada archivo, un enlace con estilo CSS y dv.taskList sin agrupación (false). Reemplaza "Work" con tu carpeta.

Integración en un Panel de Canvas

Arrastra el archivo a un Canvas; Obsidian crea una tarjeta interactiva. Ajusta el tamaño. Trabaja directamente en el panel o haz clic para navegar.

Requisitos y Características

  • Sintaxis de tareas: Usa el emoji 📅 YYYY-MM-DD para due. Las casillas de verificación sin fechas se ignoran.
  • Actualizaciones: DataviewJS se reinicia con un retraso de ~1 segundo tras cambiar la fecha.

Puntos Clave

  • El datePicker interactivo de Meta Bind actualiza YAML sin edición manual.
  • DataviewJS filtra tareas por coincidencia exacta due.toISODate() === targetDate.
  • Agrupación por archivos con insignias personalizadas para control de interfaz.
  • Renderizado automático en Canvas sin complementos adicionales.
  • Adecuado para verificar carga de trabajo en fechas futuras (vacaciones, reuniones).

Ventajas sobre Consultas Estáticas

| Enfoque | Cambiar Fecha | Modo Lectura | Actualización Automática |

|----------|---------------|--------------|-------------|

| Tareas due on DATE | Manual en código | No | No |

| Dataview due = date() | Manual en código | No | No |

| YAML + Meta Bind + DataviewJS | Calendario por clic | Sí | Sí |

La solución es escalable: añade filtros para etiquetas o estados en .where().

— Editorial Team

Advertisement 728x90

Leer después