diff --git a/docs/guide/daily-notes.md b/docs/guide/daily-notes.md
index dae089c9b..d9025fb02 100644
--- a/docs/guide/daily-notes.md
+++ b/docs/guide/daily-notes.md
@@ -10,6 +10,7 @@ If you create notes named `YYYY-MM-DD.md`, Emanote will treat them as daily note
 
 1. The backlinks panel will render daily notes separate from regular notes. Daily notes render as a year-stacked **timeline heatmap** (see [[backlinks#timeline-backlinks]]); regular notes render as a "Linked from" chip list.
 2. Each daily note automatically gets a hierarchical tag (eg: `#calendar/2025/03`) allowing you to browse them by calendar navigation in the tag index.
+3. Sidebar tree nodes whose immediate children are all daily notes of the same month (typically a `Daily/2026/04/` folder) render as a small **7-column calendar grid** in place of the linear list — each filled cell links to that day's note, missing days are muted day numbers.
 
 ## Timeline backlinks demo
 
diff --git a/emanote/CHANGELOG.md b/emanote/CHANGELOG.md
index 9330f90c3..7d110cba4 100644
--- a/emanote/CHANGELOG.md
+++ b/emanote/CHANGELOG.md
@@ -16,6 +16,7 @@
   - Popup footnotes as the only on-screen UI (desktop card / mobile bottom-sheet); printed output renders the footnote list ([#642](https://github.com/srid/emanote/pull/642)).
   - Site-authored interactive JS extracted from per-template `<script>` blocks into ES modules under `_emanote-static/js/` (loaded once, cached across pages). Code-copy buttons now also appear on code blocks added by the live-server's DOM patches, not only those present at first load ([#643](https://github.com/srid/emanote/issues/643)).
   - Stork search controller migrated to the same ES-module pattern. Templates expose the search trigger via `data-emanote-stork-toggle` (event delegation) instead of inline `onclick="window.emanote.stork.toggleSearch()"`; the dark-mode mirror that re-skins the search dialog moved into the module too. Closes the Stork follow-up implied by [#643](https://github.com/srid/emanote/issues/643).
+  - **Sidebar month calendar** ([#700](https://github.com/srid/emanote/issues/700)): when a sidebar tree node holds nothing but daily-note leaves of one month (e.g. `Daily/2026/04/2026-04-21.md` … `2026-04-30.md`), the children list is replaced in-place by a 7-column calendar grid for that month. Cells with notes link to the daily note; missing days render as muted day numbers. Date detection lives in Haskell (`Calendar.parseRouteDay` emits `data-iso-date` on each leaf via the new `node:iso-date` splice) so JS never re-implements the YYYY-MM-DD parser. Cell palette + size constants extracted from `timeline-heatmap.js` into a shared `calendar-grid` module so a Tailwind palette refresh edits one file.
   - **Default theme refresh** ([#699](https://github.com/srid/emanote/pull/699)): every panel — title, sidebar, right-panel (TOC + backlinks + timeline), bottom strip, footer — attaches inside one rounded `#container` card, so the page UI reads as a single composed unit instead of stacked stripes. Wikilinks, backlinks, queries, timeline entries, tasks index, and inline tags share one chip palette (`bg-primary-50/70 text-primary-600 font-semibold tracking-tight`); TOC drops primary entirely (entries map to plain-text headings). Heading scale tightens to a ~1.20 ratio with uniform `font-semibold`. Daily-note backlinks render as a year-stacked heatmap with cell-hover context flyouts. Special pages (`/-/all`, `/-/tags`, `/-/tasks`) pick up the same chrome plus a back-to-Home link. Tables, in-prose task lists, and the footer all get coordinated styling so the page reads as one design language. Mona Sans replaces Space Grotesk for the chrome typeface.
 - Mermaid: add `elk` layout ([#618](https://github.com/srid/emanote/pull/618))
 - Home Manager module: macOS support via launchd ([#623](https://github.com/srid/emanote/pull/623))
diff --git a/emanote/default/_emanote-static/js/calendar-grid.js b/emanote/default/_emanote-static/js/calendar-grid.js
new file mode 100644
index 000000000..6094b893e
--- /dev/null
+++ b/emanote/default/_emanote-static/js/calendar-grid.js
@@ -0,0 +1,66 @@
+// Cell-level primitives shared by every calendar/heatmap widget — the
+// palette, the size variants, and the filled/empty cell builders. The
+// row/grid composition is widget-specific: timeline-heatmap stacks 31-cell
+// linear strips, sidebar-calendar lays cells out in a 7-column weekday
+// grid. Pulling the cell concept into one module keeps the primary palette
+// + sizing in one place; a Tailwind palette refresh edits one file, not N.
+
+export const MONTH_LABELS = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+export const CELL_BASE = 'block rounded-[1px]';
+export const CELL_FILLED_BASE = CELL_BASE + ' group relative bg-primary-500 dark:bg-primary-400 hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
+export const CELL_EMPTY_BG = ' bg-gray-200 dark:bg-gray-800';
+
+// Two render contexts:
+//   - "narrow"  → right-panel column (~150-210px) and sidebar (~200px).
+//                 Fixed 4×4px squares (w-1 h-1).
+//   - "wide"    → bottom strip at <lg (~700-960px). flex-1 cells with
+//                 min-w + h-2.5 stretch as horizontal bars rather than
+//                 leaving 70% empty space.
+export const SIZE_NARROW = ' w-1 h-1';
+export const SIZE_WIDE = ' flex-1 min-w-[6px] h-2.5';
+
+// Hover flyout: outer wrapper with pt-1.5 acts as a transparent
+// hover-bridge so cursor traversal between cell and visible card never
+// drops `group-hover`. Positioned below the cell (top-full) so flyouts
+// near the top don't clip on the viewport edge.
+export const FLYOUT_OUTER = 'cell-flyout absolute z-50 hidden group-hover:block group-focus-within:block top-full left-1/2 -translate-x-1/2 pt-1.5';
+export const FLYOUT_CARD = 'w-64 max-w-[min(16rem,80vw)] px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-xl text-[0.8rem] leading-[1.5] text-gray-700 dark:text-gray-300 [&_p]:m-0 [&_p+p]:mt-2';
+export const FLYOUT_HEADER = 'text-[0.65rem] font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-1.5';
+
+// Build a filled cell anchor. `sizeClass` is one of SIZE_NARROW / SIZE_WIDE.
+// `flyoutBuilder(headerText)` is optional — if supplied, its return DOM
+// node is appended inside the anchor as a CSS-only hover flyout. Widgets
+// that don't want a flyout (e.g. sidebar-calendar) just omit it.
+export function createFilledCell({ url, headerText, sizeClass, flyoutBuilder }) {
+  const a = document.createElement('a');
+  a.className = CELL_FILLED_BASE + sizeClass;
+  a.href = url;
+  // aria-label (not title) so screen readers announce the cell without
+  // the browser layering its native gray tooltip on top of any rich
+  // hover flyout.
+  a.setAttribute('aria-label', headerText);
+  if (flyoutBuilder) {
+    a.appendChild(flyoutBuilder(headerText));
+  }
+  return a;
+}
+
+export function createEmptyCell(sizeClass) {
+  const sp = document.createElement('span');
+  sp.className = CELL_BASE + sizeClass + CELL_EMPTY_BG;
+  sp.setAttribute('aria-hidden', 'true');
+  return sp;
+}
+
+// Header text shown by the cell's tooltip / flyout. Shared so both
+// widgets format dates identically — a drift here would surface as
+// "the timeline says 2026-04-21 but the sidebar says 21 Apr 2026".
+export function formatCellHeader(year, month, day, title) {
+  const moStr = String(month).padStart(2, '0');
+  const dStr = String(day).padStart(2, '0');
+  return year + '-' + moStr + '-' + dStr + ' — ' + title;
+}
diff --git a/emanote/default/_emanote-static/js/sidebar-calendar.js b/emanote/default/_emanote-static/js/sidebar-calendar.js
new file mode 100644
index 000000000..0dfdb77b2
--- /dev/null
+++ b/emanote/default/_emanote-static/js/sidebar-calendar.js
@@ -0,0 +1,200 @@
+// When a sidebar tree node holds nothing but daily-note leaves of one
+// month (e.g. `Daily/2026/04/` containing 2026-04-21 … 2026-04-30),
+// swap the linear list for a 7-column calendar grid for that month.
+// Days with notes show as clickable primary-coloured cells; days
+// without are muted day-numbers; both carry the day's date as text.
+//
+// Detection seam: the sidebar tree wraps each subtree in
+// `<div class="emanote-tree-children">` and stamps every leaf anchor
+// with `data-iso-date="YYYY-MM-DD"` (empty for non-daily notes).
+// Both come from Heist; this module never re-parses dates from text.
+// See `routeTreeSplices` in `Emanote.View.Template`.
+//
+// Cell shape is sidebar-specific (day-numbered tile), distinct from
+// the timeline-heatmap's text-less colour-only square. Both share
+// `MONTH_LABELS` and `formatCellHeader` from `@emanote/calendar-grid`,
+// but the cell builders themselves live here.
+//
+// Re-runs on @emanote/morph for live-server in-app navigation.
+
+import { ready, onMorph } from '@emanote/morph';
+import { MONTH_LABELS, formatCellHeader } from '@emanote/calendar-grid';
+
+const WEEKDAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+const CALENDAR_CLASS = 'emanote-sidebar-calendar';
+const WRAPPER_CLASSES = CALENDAR_CLASS + ' my-1.5 px-2 py-2 rounded-md bg-gray-50 dark:bg-gray-900/50';
+const HEADER_CLASSES = 'text-[0.7rem] font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1.5';
+const WEEKDAY_ROW_CLASSES = 'grid grid-cols-7 mb-1';
+const WEEKDAY_LABEL_CLASSES = 'text-[0.55rem] uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center select-none';
+const GRID_CLASSES = 'grid grid-cols-7 gap-0.5 place-items-center';
+const CELL_BASE = 'flex items-center justify-center text-[0.65rem] w-6 h-6 rounded-sm tabular-nums transition-colors';
+const CELL_FILLED = CELL_BASE + ' font-semibold bg-primary-500 dark:bg-primary-400 text-white hover:bg-primary-700 dark:hover:bg-primary-300';
+const CELL_TODAY_MARKER = ' underline decoration-2 underline-offset-2';
+const CELL_FILLED_TODAY = CELL_FILLED + ' ring-2 ring-primary-300/80 dark:ring-primary-500/80 ring-offset-1 ring-offset-gray-50 dark:ring-offset-gray-900' + CELL_TODAY_MARKER;
+const CELL_ACTIVE = CELL_BASE + ' font-bold bg-primary-700 dark:bg-primary-300 text-white dark:text-gray-950 ring-2 ring-primary-300/80 dark:ring-primary-500/80 ring-offset-1 ring-offset-gray-50 dark:ring-offset-gray-900 shadow-sm';
+const CELL_ACTIVE_TODAY = CELL_ACTIVE + CELL_TODAY_MARKER;
+const CELL_EMPTY = CELL_BASE + ' text-gray-400 dark:text-gray-600';
+const CELL_EMPTY_TODAY = CELL_BASE + ' font-semibold text-primary-700 dark:text-primary-300 bg-white dark:bg-gray-950 border border-primary-400/80 dark:border-primary-500/80' + CELL_TODAY_MARKER;
+
+function dateToIso(year, month, day) {
+  return [
+    String(year).padStart(4, '0'),
+    String(month).padStart(2, '0'),
+    String(day).padStart(2, '0'),
+  ].join('-');
+}
+
+function todayIso() {
+  const now = new Date();
+  return dateToIso(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+
+function isCurrentRoute(url) {
+  return new URL(url, document.baseURI).pathname === window.location.pathname;
+}
+
+function refreshDayCell(cell, today) {
+  const isToday = cell.dataset.isoDate === today;
+  cell.toggleAttribute('data-today', isToday);
+
+  if (cell.tagName === 'A') {
+    const isActive = isCurrentRoute(cell.href);
+    cell.className = isActive
+      ? (isToday ? CELL_ACTIVE_TODAY : CELL_ACTIVE)
+      : (isToday ? CELL_FILLED_TODAY : CELL_FILLED);
+    cell.toggleAttribute('data-active-route', isActive);
+    if (isActive) {
+      cell.setAttribute('aria-current', 'page');
+    } else {
+      cell.removeAttribute('aria-current');
+    }
+  } else {
+    cell.className = isToday ? CELL_EMPTY_TODAY : CELL_EMPTY;
+  }
+}
+
+function refreshCalendar(calendar) {
+  const today = todayIso();
+  for (const cell of calendar.querySelectorAll('[data-iso-date]')) {
+    refreshDayCell(cell, today);
+  }
+}
+
+// Returns { year, month, leaves: Map<day, {url, title}> } when every
+// child of `wrapper` is a leaf with a parseable iso-date in the same
+// year+month. Returns null if the wrapper holds anything else
+// (subfolder, non-daily note, mixed months).
+function classifyMonthGroup(wrapper) {
+  const childNodes = wrapper.querySelectorAll(':scope > div');
+  if (childNodes.length === 0) return null;
+  let year = null;
+  let month = null;
+  const leaves = new Map();
+  for (const child of childNodes) {
+    // A leaf has no actual nested subtree. The wrapper div may still
+    // be present (empty) when `tree:open` is true on the leaf — we
+    // care only whether the wrapper has content.
+    if (child.querySelector(':scope > .emanote-tree-children > *')) return null;
+    const a = child.querySelector(':scope a[data-iso-date]');
+    if (!a) return null;
+    const iso = a.dataset.isoDate;
+    if (!iso) return null;
+    const [y, mo, d] = iso.split('-').map(Number);
+    if (!Number.isFinite(y) || !Number.isFinite(mo) || !Number.isFinite(d)) return null;
+    if (year === null) {
+      year = y;
+      month = mo;
+    } else if (y !== year || mo !== month) {
+      return null;
+    }
+    leaves.set(d, { url: a.href, title: a.getAttribute('title') || iso });
+  }
+  return { year, month, leaves };
+}
+
+// Build one day cell. `entry` is the leaves-map value for this day, or
+// undefined when no daily note exists for it. Filled cells link to the
+// note; empty cells are non-interactive but still show the day number
+// so the calendar reads as a calendar at a glance.
+function buildDayCell(year, month, day, entry, today) {
+  const iso = dateToIso(year, month, day);
+  if (entry) {
+    const a = document.createElement('a');
+    a.href = entry.url;
+    a.dataset.day = String(day);
+    a.dataset.isoDate = iso;
+    a.setAttribute('aria-label', formatCellHeader(year, month, day, entry.title));
+    a.textContent = String(day);
+    refreshDayCell(a, today);
+    return a;
+  }
+  const sp = document.createElement('span');
+  sp.dataset.day = String(day);
+  sp.dataset.isoDate = iso;
+  sp.textContent = String(day);
+  refreshDayCell(sp, today);
+  return sp;
+}
+
+function buildCalendar({ year, month, leaves }) {
+  const wrapper = document.createElement('div');
+  wrapper.className = WRAPPER_CLASSES;
+  const today = todayIso();
+
+  const header = document.createElement('div');
+  header.className = HEADER_CLASSES;
+  header.textContent = MONTH_LABELS[month - 1] + ' ' + year;
+  wrapper.appendChild(header);
+
+  const weekdayRow = document.createElement('div');
+  weekdayRow.className = WEEKDAY_ROW_CLASSES;
+  for (const wl of WEEKDAY_LABELS) {
+    const span = document.createElement('span');
+    span.className = WEEKDAY_LABEL_CLASSES;
+    span.textContent = wl;
+    weekdayRow.appendChild(span);
+  }
+  wrapper.appendChild(weekdayRow);
+
+  const grid = document.createElement('div');
+  grid.className = GRID_CLASSES;
+
+  // ISO weekday: Mon=1 … Sun=7. Pad leading blanks so day 1 lands in
+  // the right weekday column.
+  const firstWeekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7;
+  for (let i = 1; i < firstWeekday; i++) {
+    const blank = document.createElement('span');
+    blank.setAttribute('aria-hidden', 'true');
+    grid.appendChild(blank);
+  }
+
+  const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  for (let day = 1; day <= lastDay; day++) {
+    grid.appendChild(buildDayCell(year, month, day, leaves.get(day), today));
+  }
+  wrapper.appendChild(grid);
+
+  return wrapper;
+}
+
+function isAlreadyRendered(wrapper) {
+  return wrapper.firstElementChild?.classList.contains(CALENDAR_CLASS) ?? false;
+}
+
+function render() {
+  for (const wrapper of document.querySelectorAll('.emanote-tree-children')) {
+    if (isAlreadyRendered(wrapper)) {
+      refreshCalendar(wrapper.firstElementChild);
+      continue;
+    }
+    const group = classifyMonthGroup(wrapper);
+    if (!group) continue;
+    const calendar = buildCalendar(group);
+    wrapper.textContent = '';
+    wrapper.appendChild(calendar);
+  }
+}
+
+ready(render);
+onMorph(render);
diff --git a/emanote/default/_emanote-static/js/timeline-heatmap.js b/emanote/default/_emanote-static/js/timeline-heatmap.js
index 0553416e8..dd1959d97 100644
--- a/emanote/default/_emanote-static/js/timeline-heatmap.js
+++ b/emanote/default/_emanote-static/js/timeline-heatmap.js
@@ -13,44 +13,29 @@
 //
 // Re-renders on @emanote/morph navigation so live-server in-app nav picks
 // up new backlinks without a hard reload.
+//
+// Cell primitives (palette, sizes, filled/empty builders) live in
+// @emanote/calendar-grid; the row/grid composition is widget-specific.
 
 import { ready, onMorph } from '@emanote/morph';
+import {
+  MONTH_LABELS,
+  SIZE_NARROW,
+  SIZE_WIDE,
+  FLYOUT_OUTER,
+  FLYOUT_CARD,
+  FLYOUT_HEADER,
+  createFilledCell,
+  createEmptyCell,
+  formatCellHeader,
+} from '@emanote/calendar-grid';
 
 const DATE_RE = /(\d{4})-(\d{2})-(\d{2})/;
-const MONTH_LABELS = [
-  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
-];
 
-// Two render contexts with different cell sizing:
-//   - "narrow"  → right-panel column (~150-210px content). Cells are
-//                 fixed 4×4px squares (w-1 h-1). Fits 31 cells in a row
-//                 at ~5px stride.
-//   - "wide"    → bottom strip at <lg (full container width, ~700-960px).
-//                 Cells are flex-1 with min-w + h-2.5 so they stretch to
-//                 fill the available row width as horizontal bars rather
-//                 than leaving the heatmap floating in 70% empty space.
-//
-// Detection: a section inside #backlinks-bottom uses the wide layout;
-// otherwise (the right-panel home) the narrow layout. Each render call
-// picks once per section.
 const ROW_CLASSES = 'flex items-center gap-1.5';
 const LABEL_CLASSES = 'w-7 text-[0.65rem] uppercase tracking-wider text-gray-500 dark:text-gray-400 select-none shrink-0';
-const CELL_BASE = 'block rounded-[1px]';
-const CELL_FILLED_BASE = CELL_BASE + ' group relative bg-primary-500 dark:bg-primary-400 hover:bg-primary-700 dark:hover:bg-primary-300 transition-colors';
-const CELL_EMPTY_BG = ' bg-gray-200 dark:bg-gray-800';
-const SIZE_NARROW = ' w-1 h-1';
-const SIZE_WIDE = ' flex-1 min-w-[6px] h-2.5';
 const YEAR_LABEL_CLASSES = 'text-xs font-semibold tracking-tight text-gray-700 dark:text-gray-300 mb-1';
 
-// Hover flyout: outer wrapper with pt-1.5 acts as a transparent
-// hover-bridge so cursor traversal between cell and visible card never
-// drops `group-hover`. Positioned below the cell (top-full) so flyouts
-// near the top of the heatmap don't clip on the viewport edge.
-const FLYOUT_OUTER = 'cell-flyout absolute z-50 hidden group-hover:block group-focus-within:block top-full left-1/2 -translate-x-1/2 pt-1.5';
-const FLYOUT_CARD = 'w-64 max-w-[min(16rem,80vw)] px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-xl text-[0.8rem] leading-[1.5] text-gray-700 dark:text-gray-300 [&_p]:m-0 [&_p+p]:mt-2';
-const FLYOUT_HEADER = 'text-[0.65rem] font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-1.5';
-
 function parseEntries(listEl) {
   const out = new Map(); // year → Map<month, Map<day, {url, title, contextHTML}>>
   for (const li of listEl.querySelectorAll('li')) {
@@ -73,6 +58,28 @@ function parseEntries(listEl) {
   return out;
 }
 
+function buildFlyout(headerText, contextHTML) {
+  // CSS-only flyout: hidden by default, shown on group-hover /
+  // group-focus-within (the cell carries `group relative`). Built up
+  // programmatically rather than via innerHTML so the cloned pandoc
+  // context HTML can't escape into outer attributes.
+  const flyout = document.createElement('div');
+  flyout.className = FLYOUT_OUTER;
+  const card = document.createElement('div');
+  card.className = FLYOUT_CARD;
+  const header = document.createElement('div');
+  header.className = FLYOUT_HEADER;
+  header.textContent = headerText;
+  card.appendChild(header);
+  if (contextHTML) {
+    const body = document.createElement('div');
+    body.innerHTML = contextHTML;
+    card.appendChild(body);
+  }
+  flyout.appendChild(card);
+  return flyout;
+}
+
 function renderMonthRow(year, month, dayMap, wide) {
   const row = document.createElement('div');
   row.className = ROW_CLASSES;
@@ -82,9 +89,7 @@ function renderMonthRow(year, month, dayMap, wide) {
   label.textContent = MONTH_LABELS[month - 1];
   row.appendChild(label);
 
-  const cellSize = wide ? SIZE_WIDE : SIZE_NARROW;
-  const cellEmptyClass = CELL_BASE + cellSize + CELL_EMPTY_BG;
-  const cellFilledClass = CELL_FILLED_BASE + cellSize;
+  const sizeClass = wide ? SIZE_WIDE : SIZE_NARROW;
 
   const cells = document.createElement('div');
   // flex-1 on the row's cells container only matters in the wide
@@ -97,42 +102,14 @@ function renderMonthRow(year, month, dayMap, wide) {
   for (let day = 1; day <= 31; day++) {
     const entry = dayMap && dayMap.get(day);
     if (entry) {
-      const a = document.createElement('a');
-      a.className = cellFilledClass;
-      a.href = entry.url;
-      const dStr = String(day).padStart(2, '0');
-      const moStr = String(month).padStart(2, '0');
-      const dateStr = year + '-' + moStr + '-' + dStr;
-      const headerText = dateStr + ' — ' + entry.title;
-      // aria-label (not title) so screen readers still announce the
-      // cell without the browser layering its native gray tooltip on
-      // top of the rich hover flyout.
-      a.setAttribute('aria-label', headerText);
-      // CSS-only flyout: hidden by default, shown on group-hover /
-      // group-focus-within (the cell carries `group relative`). Built
-      // up programmatically rather than via innerHTML so the cloned
-      // pandoc context HTML can't escape into outer attributes.
-      const flyout = document.createElement('div');
-      flyout.className = FLYOUT_OUTER;
-      const card = document.createElement('div');
-      card.className = FLYOUT_CARD;
-      const header = document.createElement('div');
-      header.className = FLYOUT_HEADER;
-      header.textContent = headerText;
-      card.appendChild(header);
-      if (entry.contextHTML) {
-        const body = document.createElement('div');
-        body.innerHTML = entry.contextHTML;
-        card.appendChild(body);
-      }
-      flyout.appendChild(card);
-      a.appendChild(flyout);
-      cells.appendChild(a);
+      cells.appendChild(createFilledCell({
+        url: entry.url,
+        headerText: formatCellHeader(year, month, day, entry.title),
+        sizeClass,
+        flyoutBuilder: (h) => buildFlyout(h, entry.contextHTML),
+      }));
     } else {
-      const sp = document.createElement('span');
-      sp.className = cellEmptyClass;
-      sp.setAttribute('aria-hidden', 'true');
-      cells.appendChild(sp);
+      cells.appendChild(createEmptyCell(sizeClass));
     }
   }
   row.appendChild(cells);
diff --git a/emanote/default/templates/components/sidebar-tree.tpl b/emanote/default/templates/components/sidebar-tree.tpl
index 047fbf86d..3b269c98f 100644
--- a/emanote/default/templates/components/sidebar-tree.tpl
+++ b/emanote/default/templates/components/sidebar-tree.tpl
@@ -61,7 +61,7 @@
         </has-children>
       </tree:open>
     </span>
-    <a class="${link-class} rounded-md px-2 py-1 truncate flex-1" title="${node:text}" href="${node:url}">
+    <a class="${link-class} rounded-md px-2 py-1 truncate flex-1" title="${node:text}" href="${node:url}" data-iso-date="${node:iso-date}">
       <node:text />
     </a>
     <tree:open>
@@ -77,10 +77,21 @@
 
   <!-- Node's children forest, displayed only on active trees
     TODO: Use <details> to toggle visibility?
+
+    Seam contract for sidebar-tree widgets — two pieces, both required:
+      1. `<div class="emanote-tree-children">` wraps every expanded
+         subtree (here).
+      2. Each leaf anchor carries `data-iso-date="YYYY-MM-DD"` (or
+         empty), emitted from `routeTreeSplices` via `node:iso-date`.
+    sidebar-calendar.js attaches by reading both. Future widgets do
+    the same. Do not add widget-specific bindings (e.g. `node:month-
+    group`) to `routeTreeSplices` — keep the seam thin.
   -->
   <tree:open>
-    <children>
-      <apply template="sidebar-tree" />
-    </children>
+    <div class="emanote-tree-children">
+      <children>
+        <apply template="sidebar-tree" />
+      </children>
+    </div>
   </tree:open>
 </div>
\ No newline at end of file
diff --git a/emanote/src/Emanote/Model/Calendar.hs b/emanote/src/Emanote/Model/Calendar.hs
index 3cf1a72d0..5074128fb 100644
--- a/emanote/src/Emanote/Model/Calendar.hs
+++ b/emanote/src/Emanote/Model/Calendar.hs
@@ -1,7 +1,12 @@
 {- | A primitive module to eventually pave way towards first-class "calendar"
 (daily notes, etc.) support in Emanote; either built-in or as plugin.
 -}
-module Emanote.Model.Calendar where
+module Emanote.Model.Calendar (
+  parseRouteDay,
+  isDailyNote,
+  backlinkSortKey,
+  noteSortKey,
+) where
 
 import Emanote.Model.Calendar.Parser (parseRouteDay)
 import Emanote.Model.Note qualified as N
diff --git a/emanote/src/Emanote/View/JsBundle.hs b/emanote/src/Emanote/View/JsBundle.hs
index 94bcb808a..4a11eaef2 100644
--- a/emanote/src/Emanote/View/JsBundle.hs
+++ b/emanote/src/Emanote/View/JsBundle.hs
@@ -50,7 +50,10 @@ doesn't appear here.
 -}
 emanoteJsModuleNames :: [Text]
 emanoteJsModuleNames =
-  ["morph", "theme-toggle", "code-copy", "toc-spy", "footnote-popup", "stork", "timeline-heatmap"]
+  -- Sidebar widgets (e.g. sidebar-calendar) attach by scanning the
+  -- generic tree DOM emitted by `routeTreeSplices`; see the seam
+  -- contract in `templates/components/sidebar-tree.tpl`.
+  ["morph", "theme-toggle", "code-copy", "toc-spy", "footnote-popup", "stork", "calendar-grid", "timeline-heatmap", "sidebar-calendar"]
 
 {- | Render the importmap + module entry script tags. Drop into the page
 \<head\> via a Heist splice; safe to call multiple times per render
diff --git a/emanote/src/Emanote/View/Template.hs b/emanote/src/Emanote/View/Template.hs
index 586110fd6..1d1b2a925 100644
--- a/emanote/src/Emanote/View/Template.hs
+++ b/emanote/src/Emanote/View/Template.hs
@@ -6,6 +6,7 @@ import Data.List (partition)
 import Data.Map.Syntax ((##))
 import Data.Set qualified as Set
 import Data.Text qualified as T
+import Data.Time.Format (defaultTimeLocale, formatTime)
 import Data.Tree qualified as Tree
 import Ema qualified
 import Emanote.Model (Model, ModelEma)
@@ -242,6 +243,11 @@ routeTreeSplices tCtx mCurrentRoute model = do
         let shortTitle = Meta.lookupRouteMeta @(Maybe Text) Nothing ("short-title" :| []) nodeRoute model
         "node:text" ## maybe (C.titleSplice tCtx $ M.modelLookupTitle nodeRoute model) HI.textSplice shortTitle
         "node:url" ## HI.textSplice $ SR.siteRouteUrl model $ SR.lmlSiteRoute (R.LMLView_Html, nodeRoute)
+        -- ISO date for the route's basename if it parses as YYYY-MM-DD; empty
+        -- otherwise. Sole source of truth for daily-note dates on the JS side
+        -- (sidebar-calendar reads it via data-iso-date) so date detection
+        -- stays in Haskell, not duplicated as a regex per widget.
+        "node:iso-date" ## HI.textSplice (maybe "" (toText . formatTime defaultTimeLocale "%Y-%m-%d") $ Calendar.parseRouteDay nodeRoute)
         let isActiveNode = Just nodeRoute == mCurrentRoute
             isActiveTree =
               -- Active tree checking is applicable only when there is an
diff --git a/tests/features/smoke.feature b/tests/features/smoke.feature
index 956be0fb6..ba267f1dc 100644
--- a/tests/features/smoke.feature
+++ b/tests/features/smoke.feature
@@ -190,3 +190,34 @@ Feature: Smoke
   Scenario: Cascaded YAML tag still indexes a child note that declares its own tags (regression: #697)
     When I fetch "/-/tags/issue-697-cascaded.html"
     Then the response body contains "issue-697/note"
+
+  Scenario: Sidebar month folder renders as a calendar grid (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar month calendar is visible with header "Apr 2026"
+    And the sidebar month calendar links day 1 to "calendar-test/2026/04/2026-04-01"
+    And the sidebar month calendar links day 15 to "calendar-test/2026/04/2026-04-15"
+    And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
+    And the sidebar month calendar has 3 filled day cells
+
+  Scenario: Sidebar month calendar distinguishes active route and today (issue #700)
+    Given the browser date is "2026-04-30"
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar month calendar marks day 15 as the active route
+    And the sidebar month calendar marks day 30 as today
+
+  Scenario: Sidebar month folder swaps the linear list, not augments it (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-15.html"
+    Then the sidebar has no plain link with text "2026-04-01"
+    And the sidebar has no plain link with text "2026-04-30"
+
+  Scenario: Sidebar non-month folders do not render as a calendar (issue #700)
+    When I open "/"
+    Then the sidebar tree has no calendar wrapper for non-month folders
+
+  @morph
+  Scenario: Sidebar calendar survives Ema's in-app morph navigation (issue #700)
+    When I open "/calendar-test/2026/04/2026-04-01.html"
+    And I navigate via Ema to "/calendar-test/2026/04/2026-04-30.html"
+    Then the sidebar month calendar is visible with header "Apr 2026"
+    And the sidebar month calendar links day 30 to "calendar-test/2026/04/2026-04-30"
+    And the sidebar month calendar marks day 30 as the active route
diff --git a/tests/fixtures/notebook/calendar-test.md b/tests/fixtures/notebook/calendar-test.md
new file mode 100644
index 000000000..d0897b446
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test.md
@@ -0,0 +1,5 @@
+# Calendar Test
+
+Parent of `calendar-test/2026/04/`, which holds three daily notes
+(`2026-04-01`, `2026-04-15`, `2026-04-30`). Used by the sidebar
+month-calendar scenarios — see `features/smoke.feature`.
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md
new file mode 100644
index 000000000..385eeaeb0
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-01.md
@@ -0,0 +1 @@
+# 2026-04-01
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md
new file mode 100644
index 000000000..6e4da6030
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-15.md
@@ -0,0 +1 @@
+# 2026-04-15
diff --git a/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md
new file mode 100644
index 000000000..4a89a5274
--- /dev/null
+++ b/tests/fixtures/notebook/calendar-test/2026/04/2026-04-30.md
@@ -0,0 +1 @@
+# 2026-04-30
diff --git a/tests/step_definitions/sidebar_calendar_steps.ts b/tests/step_definitions/sidebar_calendar_steps.ts
new file mode 100644
index 000000000..e061adab8
--- /dev/null
+++ b/tests/step_definitions/sidebar_calendar_steps.ts
@@ -0,0 +1,231 @@
+/**
+ * Step definitions for the sidebar month-calendar widget (issue #700).
+ *
+ * The widget swaps a sidebar tree subtree (`<div class="emanote-tree-children">`)
+ * whose children are all daily-note leaves of one month for a 7-column
+ * calendar grid. Marker class on the rendered wrapper is
+ * `.emanote-sidebar-calendar`. Filled cells are anchors carrying
+ * `aria-label="YYYY-MM-DD — title"`; missing days are bare `<span>`s.
+ *
+ * The widget runs purely in JS post-render, so a live mode + JS-enabled
+ * page is required. In static mode the JS bundle still ships, so the
+ * scenarios run there too — only `@morph` cases are skipped statically
+ * (no WebSocket, no `window.ema`).
+ */
+
+import { Given, Then } from "@cucumber/cucumber";
+import { EmanoteWorld } from "../support/world.ts";
+import * as assert from "node:assert";
+
+const CALENDAR_SEL = ".emanote-sidebar-calendar";
+const SIDEBAR_TREE_ROOT_SEL = "#sidebar-tree, nav";
+
+function mockDateScript(isoDate: string): string {
+  return `
+    (() => {
+      const date = ${JSON.stringify(isoDate)};
+      const RealDate = Date;
+      const [year, month, day] = date.split("-").map(Number);
+      const fixedTime = new RealDate(year, month - 1, day, 12).getTime();
+      function MockDate(...args) {
+        if (new.target) {
+          return args.length === 0
+            ? new RealDate(fixedTime)
+            : new RealDate(...args);
+        }
+        return new RealDate(fixedTime).toString();
+      }
+      Object.setPrototypeOf(MockDate, RealDate);
+      MockDate.prototype = RealDate.prototype;
+      MockDate.now = () => fixedTime;
+      window.Date = MockDate;
+    })();
+  `;
+}
+
+// Wait for at least one calendar wrapper to appear. The widget runs on
+// `ready`, so the wrapper materialises a frame or two after DOMContentLoaded.
+async function waitForCalendar(page: EmanoteWorld["page"]): Promise<void> {
+  await page
+    .locator(CALENDAR_SEL)
+    .first()
+    .waitFor({ state: "attached", timeout: 5_000 });
+}
+
+async function getCalendarDay(
+  page: EmanoteWorld["page"],
+  day: number,
+): Promise<ReturnType<EmanoteWorld["page"]["locator"]>> {
+  await waitForCalendar(page);
+  const cell = page.locator(`${CALENDAR_SEL} [data-day="${day}"]`).first();
+  await cell.waitFor({ state: "attached", timeout: 5_000 });
+  return cell;
+}
+
+Given(
+  "the browser date is {string}",
+  async function (this: EmanoteWorld, isoDate: string) {
+    assert.match(
+      isoDate,
+      /^\d{4}-\d{2}-\d{2}$/,
+      "Browser date fixture must be YYYY-MM-DD.",
+    );
+    const script = mockDateScript(isoDate);
+    await this.page.addInitScript({ content: script });
+    await this.page.evaluate((source) => new Function(source)(), script);
+  },
+);
+
+Then(
+  "the sidebar month calendar is visible with header {string}",
+  async function (this: EmanoteWorld, header: string) {
+    await waitForCalendar(this.page);
+    const headerText = await this.page
+      .locator(`${CALENDAR_SEL} > div`)
+      .first()
+      .textContent();
+    assert.strictEqual(
+      (headerText ?? "").trim(),
+      header,
+      `Expected sidebar calendar header ${JSON.stringify(header)}, got ${JSON.stringify(headerText)}. Either sidebar-calendar.js didn't run (importmap regression / module dropped from emanoteJsModuleNames) or buildCalendar's header text format changed.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar marks day {int} as the active route",
+  async function (this: EmanoteWorld, day: number) {
+    const cell = await getCalendarDay(this.page, day);
+    const active = await cell.getAttribute("data-active-route");
+    const ariaCurrent = await cell.getAttribute("aria-current");
+    const cls = (await cell.getAttribute("class")) ?? "";
+    assert.notStrictEqual(
+      active,
+      null,
+      `Expected day ${day} to carry data-active-route. Current route highlighting likely failed to compare the cell href with window.location.pathname.`,
+    );
+    assert.strictEqual(
+      ariaCurrent,
+      "page",
+      `Expected day ${day} to expose aria-current="page" for the active route.`,
+    );
+    assert.ok(
+      cls.includes("bg-primary-700"),
+      `Expected active route day ${day} to use the selected primary background; class=${JSON.stringify(cls)}.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar marks day {int} as today",
+  async function (this: EmanoteWorld, day: number) {
+    const cell = await getCalendarDay(this.page, day);
+    const today = await cell.getAttribute("data-today");
+    const iso = await cell.getAttribute("data-iso-date");
+    const cls = (await cell.getAttribute("class")) ?? "";
+    const browserDate = await this.page.evaluate(() => {
+      const now = new Date();
+      return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+    });
+    assert.notStrictEqual(
+      today,
+      null,
+      `Expected day ${day} to carry data-today. cell date=${JSON.stringify(iso)}, browser date=${JSON.stringify(browserDate)}. Today highlighting likely failed to compare the cell date with the browser's local date.`,
+    );
+    assert.ok(
+      cls.includes("underline"),
+      `Expected today day ${day} to include the visual today marker; class=${JSON.stringify(cls)}.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar links day {int} to {string}",
+  async function (this: EmanoteWorld, day: number, hrefSubstring: string) {
+    await waitForCalendar(this.page);
+    // Filled cells carry aria-label "YYYY-MM-DD — title" — use the
+    // numeric day as a substring anchor since title text varies per
+    // fixture but the date prefix is deterministic.
+    const dayPadded = String(day).padStart(2, "0");
+    const cell = this.page
+      .locator(`${CALENDAR_SEL} a[aria-label*="-${dayPadded} —"]`)
+      .first();
+    await cell.waitFor({ state: "attached", timeout: 5_000 });
+    const href = await cell.getAttribute("href");
+    assert.ok(
+      href && href.includes(hrefSubstring),
+      `Expected sidebar calendar day ${day} to link to ${JSON.stringify(hrefSubstring)}, got href=${JSON.stringify(href)}. Either classifyMonthGroup misread data-iso-date or createFilledCell dropped the URL.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar month calendar has {int} filled day cells",
+  async function (this: EmanoteWorld, expected: number) {
+    await waitForCalendar(this.page);
+    // Filled cells are anchors carrying aria-label "YYYY-MM-DD — title".
+    // Counting anchors inside the calendar wrapper is the cleanest
+    // fixture-controlled assertion (3 daily notes ⇒ 3 filled cells).
+    // Empty days and leading blanks are <span>s — both ignored here.
+    const filled = await this.page.locator(`${CALENDAR_SEL} a[aria-label]`).count();
+    assert.strictEqual(
+      filled,
+      expected,
+      `Expected ${expected} filled day cells, got ${filled}. Either classifyMonthGroup dropped a leaf (data-iso-date attribute regressed in the splice) or createFilledCell stopped emitting anchors.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar has no plain link with text {string}",
+  async function (this: EmanoteWorld, linkText: string) {
+    // Once the calendar swaps in, the original `<a>2026-04-XX</a>`
+    // tree leaves are gone — replaced by aria-label-only cell anchors.
+    // `:has-text("2026-04-01")` would still match cell aria-labels
+    // because Playwright's `:has-text` checks accessible name; instead
+    // use exact textContent to find link bodies that hold the date as
+    // visible text.
+    await waitForCalendar(this.page);
+    const count = await this.page.evaluate(
+      ({ root, text }) => {
+        const sidebar = document.querySelector(root);
+        if (!sidebar) return -1;
+        return Array.from(sidebar.querySelectorAll("a")).filter(
+          (a) => (a.textContent ?? "").trim() === text,
+        ).length;
+      },
+      { root: SIDEBAR_TREE_ROOT_SEL, text: linkText },
+    );
+    assert.notStrictEqual(
+      count,
+      -1,
+      `Sidebar root (${SIDEBAR_TREE_ROOT_SEL}) not found on the page.`,
+    );
+    assert.strictEqual(
+      count,
+      0,
+      `Expected no plain sidebar link with visible text ${JSON.stringify(linkText)}; found ${count}. The calendar should replace the linear list, not augment it — render() likely failed to clear wrapper.textContent before appending.`,
+    );
+  },
+);
+
+Then(
+  "the sidebar tree has no calendar wrapper for non-month folders",
+  async function (this: EmanoteWorld) {
+    // From `/`, the sidebar root's `<div class="emanote-tree-children">`
+    // holds the top-level entries (`calendar-test`, `dailyhost`, etc.) —
+    // none all-daily, so no calendar should mount on it. classifyMonthGroup's
+    // null-return path is exercised here.
+    const count = await this.page.locator(CALENDAR_SEL).count();
+    // `dailyhost/` itself contains 2 same-month daily notes, so when the
+    // sidebar expands it (only happens on the active path), it would also
+    // mount a calendar. From `/` the dailyhost subtree is collapsed by
+    // default, so the children HTML isn't even emitted, and no calendar
+    // mounts. Asserting zero here verifies that.
+    assert.strictEqual(
+      count,
+      0,
+      `Expected zero ${CALENDAR_SEL} elements on '/'; found ${count}. The widget mounted on a non-month-only subtree — classifyMonthGroup should reject any subtree whose children include non-daily notes (a folder, an article without data-iso-date, etc.).`,
+    );
+  },
+);
diff --git a/tests/support/hooks.ts b/tests/support/hooks.ts
index 1b778dcc7..3e1493ce5 100644
--- a/tests/support/hooks.ts
+++ b/tests/support/hooks.ts
@@ -172,6 +172,8 @@ AfterAll(async () => {
   }
 });
 
+const MORPH_TAG = "@morph";
+
 Before(async function (this: EmanoteWorld) {
   this.browser = browser;
   this.context = await browser.newContext({
@@ -181,8 +183,6 @@ Before(async function (this: EmanoteWorld) {
   this.page = await this.context.newPage();
 });
 
-const MORPH_TAG = "@morph";
-
 // Static mode has no WebSocket and `window.ema` is undefined, so any
 // `@morph` scenario would fail at the first `switchRoute` call.
 Before({ tags: MORPH_TAG }, function () {