Tasks Calendar

A minimal, dependency-free calendar view for Obsidian that displays tasks from the Tasks plugin on a monthly or weekly grid. Built as a DataviewJS snippet using dv.view().

Month View	Week View

Features

• Month view — 7-week grid with task text displayed directly in cells
• Week view — Day-by-day list with full task details
• Task type indicators — 📅 due, ⏳ scheduled, ✅ completed
• Filter dropdown — All (default), Active, Overdue, Done
• Daily note linking — Click any date to open its daily note
• Task note linking — Click any task to jump to its source note
• Theme compatible — Uses Obsidian CSS variables for dark/light mode
• Zero dependencies — No npm, no build tools required (just a concat script)

Requirements

• Obsidian
• Dataview plugin — Settings > Dataview > Enable JavaScript Queries must be ON (off by default)
• Tasks plugin (optional, for emoji-based task dates)

Installation

1. Clone and build:

git clone https://github.com/morfseven/tasks-calendar.git
cd tasks-calendar
bash build.sh

2. Copy view.js and view.css into a folder inside your vault. The folder name and location are up to you — just remember the path for step 3.

# Example: place it at the vault root
mkdir -p /path/to/your-vault/tasks-calendar
cp view.js view.css /path/to/your-vault/tasks-calendar/

3. Create a note anywhere in your vault and add the following DataviewJS block. The first argument to dv.view() must match the folder path from step 2, relative to your vault root.

```dataviewjs
await dv.view("tasks-calendar", {
  pages: "",
  view: "month",
  firstDayOfWeek: 0,
  dailyNoteFolder: "daily",
  dailyNoteFormat: "YYYY-MM-DD",
})
```

Configuration

Parameter	Default	Description
pages	""	Dataview source query to filter pages
view	"month"	Initial view: "month", "week", "list", or "overdue"
filter	"all"	Initial filter: "all", "active" (incomplete only), "overdue", or "done"
firstDayOfWeek	0	0 = Sunday, 1 = Monday
dailyNoteFolder	""	Path to daily notes folder (enables date click)
dailyNoteFormat	"YYYY-MM-DD"	Daily note filename (moment.js tokens)

Examples

Show only tasks from a specific folder:

await dv.view("tasks-calendar", {
  pages: '"projects/active"',
})

Start week on Monday with daily notes in a nested structure:

await dv.view("tasks-calendar", {
  firstDayOfWeek: 1,
  dailyNoteFolder: "journal/daily",
})

Open with only incomplete tasks visible:

await dv.view("tasks-calendar", {
  filter: "active",
})

Task Parsing

Tasks are parsed using two methods (in priority order):

1. Dataview properties — t.due, t.scheduled, t.completion, t.start
2. Emoji fallback — Manual parsing of Tasks plugin emojis from task text

Supported emojis:

Emoji	Meaning
📅 / 🗓️	Due date
⏳	Scheduled date
✅	Completion date
🛫	Start date

Development

Source files are organized in src/ and styles/, then concatenated into view.js and view.css via build.sh:

src/
├── config.js        # Parameter parsing
├── store.js         # Task collection and indexing
├── dom.js           # DOM helpers
├── nav.js           # Navigation bar
├── month-view.js    # Monthly grid
├── week-view.js     # Weekly list
├── list-view.js     # List view
├── overdue-view.js  # Overdue-only view
└── app.js           # Entry point, view registry

styles/
├── base.css         # Variables and reset
├── nav.css          # Navigation bar
├── month.css        # Month grid
├── week.css         # Week list
└── list.css         # List/overdue views

To rebuild after editing source files:

bash build.sh

Then copy the updated view.js and view.css to your vault.

Troubleshooting

• Calendar shows nothing / "view.js not found" — The first argument to dv.view() must match the folder path containing view.js, relative to vault root. The filenames inside that folder must be exactly view.js and view.css (Dataview's convention).
• Block renders as plain text — Dataview's JavaScript queries are disabled by default. Open Settings > Dataview > Enable JavaScript Queries and toggle it ON.
• Tasks have dates but don't appear on the grid — Check that dates are either Dataview inline fields (due::, scheduled::, etc.) or Tasks-plugin emojis (📅 2026-05-13). Free-form text dates won't be parsed.
• Style changes don't apply — Obsidian caches CSS aggressively. After editing view.css, reload the vault (Cmd/Ctrl+R) or toggle the Dataview plugin off/on.

License

MIT