Yabacavi

Yet Another BAses CAlendar VIew — a calendar view for Obsidian Bases.

Notes become cards on a day, week or month grid, placed by any date property. Drag a card to another day to reschedule it, and click one to open the note. Optionally, your Todoist tasks land on the same grid beside your notes.

Requires Obsidian 1.11.4+ with the Bases core plugin enabled.

Screenshots

Features

• Day / week / month grid, with toolbar navigation and a Today button. The day view can span 1–7 days side by side (a [- +] stepper), laid out masonry-style.
• Place notes by any date property — frontmatter, formula or intrinsic file date.
• Also show undated notes by creation date (optional, per view) — surface notes that have no date-property value on the day their file was created.
• Cards show whichever properties you made visible in the base, so a calendar and a table over the same base stay in sync. Formula properties render through Bases, so html() in a formula works on a card the same as in a table.
• Drag & drop to reschedule — drop a card on another day to rewrite its date property. The time of day and any timezone offset are preserved; a date-only property stays date-only. The dragged card follows the cursor and swings from the point you grabbed it.
• Status → accent colour — map a property's values (e.g. todo, done) to a coloured accent, shown as a bar or a bullet before the title (or hidden), from the settings tab.
• Adjustable cards — set the accent-bar thickness and the title, time and property-pill font sizes from the settings tab.
• Todoist tasks on the calendar — show your Todoist tasks beside your notes, filter them with a Todoist query, optionally include completed tasks, drag them to reschedule, and complete them from the card. See Todoist tasks.
• Open notes in a floating modal, the current tab, a new tab or a split.
• Double-click an empty day to create a note dated to it, optionally from a template file.
• Hover a card for the normal page preview; right-click for the file menu. Ctrl/cmd-click a card opens a new tab, shift-click opens a split.
• Show or hide weekends; choose the week start.

Drag & drop uses the browser's native drag, which doesn't fire on touch, so rescheduling is desktop-only. Viewing, opening and creating notes work on mobile.

Usage

1. Open or create a .base file.
2. Add a view and pick Calendar cards as its type (or set type: calendar-cards in the view's YAML).
3. In the view options, choose a Date property — nothing renders until you do.
4. Cards display the properties in the base's visible-property list, same as a table.

View options (per view, in the base)

Plugin settings (global)

Todoist tasks

Show your Todoist tasks on the calendar alongside your notes, placed by their due date.

1. In Settings → Yabacavi → Todoist, paste your API token (in Todoist: Settings → Integrations → Developer). It's stored in Obsidian's secret storage, not in the plugin's settings file.
2. Turn on Show Todoist tasks — from the settings tab, or the toggle that appears in the calendar toolbar.
3. Tasks load when you enable them and on the toolbar ↻ button; set an auto-refresh interval for a timed re-fetch.

• Task cards carry a red Todoist mark, show their project and labels, and flag whether the task has a description.
• Click a task for a modal with its description (rendered as markdown), full due date, and a button to open it in the Todoist app (falling back to the web). Tick the checkbox by the title to complete the task.
• Drag a task to another day to reschedule it in Todoist — a timed task keeps its time. Recurring tasks aren't draggable, so their recurrence is never flattened.
• Filter which tasks appear with a Todoist filter query in settings (e.g. #Work | #Personal, @label) — the same syntax as Todoist's own filters.
• Completed tasks (Beta) — optionally show completed tasks on their due day, styled like a note with status done (and not draggable). They're fetched per visible month and cached, so browsing months stays light on the Todoist API.
• The accent bar is tinted by priority (p1 red … p3 blue) unless you set a single custom accent colour in settings.
• Tasks and notes sort together within a day: timed first (chronological), then the rest alphabetically by title.

The Todoist integration needs Obsidian 1.11.4+ for its secret storage. Leave the token empty and nothing Todoist-related appears — the calendar works on its own.

Commands

With a Todoist token set up, these show in the command palette and can be bound to hotkeys:

• Refresh Todoist tasks — re-fetch now (same as the toolbar ↻).
• Toggle Todoist tasks — show or hide Todoist tasks.
• Toggle completed Todoist tasks — show or hide completed tasks.

Customising with CSS

Every card mirrors its note's frontmatter as data-* attributes and exposes a few CSS variables, so a theme or snippet can restyle cards freely:

/* colour the accent bar by status */
.yabacavi-card[data-status="done"]  { --yabacavi-accent-color: var(--color-green); }
.yabacavi-card[data-status="doing"] { --yabacavi-accent-color: var(--color-yellow); }

/* fade completed cards */
.yabacavi-card[data-status="done"] { opacity: 0.5; }

Handy hooks:

• [data-<property>="…"] on each card, from the note's frontmatter ([data-status], [data-project], …). List values match with ~=.
• --yabacavi-accent-color on .yabacavi-card; --yabacavi-accent-width, the --yabacavi-title-scale / --yabacavi-time-scale / --yabacavi-pill-scale font scales, and --yabacavi-day-card-width on .yabacavi (the settings and view options write these — override them for finer control).
• --yabacavi-day-min-height on .yabacavi.
• .yabacavi-card--todoist for Todoist cards, with [data-priority="1"…"4"] and [data-recurring] to target them (their project/labels are in [data-property="todoist.project"] / [data-property="todoist.tags"]).
• Completed Todoist cards carry [data-completed] and [data-status="done"], so the rules that style your done notes style them too.
• Notes placed by their creation date carry [data-placed-by="created"] (read-only, not draggable).

Status colours set in the settings tab are applied inline, so they win over CSS rules; leave the list empty to drive the accent entirely from your own CSS.

Install (Community plugins)

Once the plugin is in the directory:

1. Open Settings → Community plugins and turn off Restricted mode.
2. Click Browse, search for Yabacavi, open its page.
3. Click Install, then Enable.

Install (BRAT — before it's in the directory)

With BRAT:

1. Install and enable BRAT from Settings → Community plugins → Browse.
2. Run BRAT: Add a beta plugin for testing from the command palette.
3. Paste the repository URL:

   https://github.com/xupisco/obsidian-yabacavi
   

4. Confirm — BRAT installs the latest release and keeps it updated.
5. Enable Yabacavi in Settings → Community plugins.

Install (manual / development)

npm install
npm run build      # produces main.js

Copy main.js, manifest.json and styles.css into your vault at <vault>/.obsidian/plugins/yabacavi/, then reload Obsidian and enable the plugin.

Develop

npm install
npm run dev        # esbuild watch; rebuilds main.js on change
npm run build      # typecheck + production bundle
npm run lint       # typecheck + eslint (obsidianmd rules)

Set OBSIDIAN_PLUGIN_DIR to your vault's plugin folder and npm run dev deploys main.js, manifest.json and styles.css there on every rebuild:

OBSIDIAN_PLUGIN_DIR="/path/to/Vault/.obsidian/plugins/yabacavi" npm run dev

License

MIT