diff --git a/modules/rcal/components/folk-calendar-view.ts b/modules/rcal/components/folk-calendar-view.ts
index c8f96e2..106d66c 100644
--- a/modules/rcal/components/folk-calendar-view.ts
+++ b/modules/rcal/components/folk-calendar-view.ts
@@ -1146,6 +1146,9 @@ class FolkCalendarView extends HTMLElement {
const isToday = ds === todayStr;
const isExpanded = ds === this.expandedDay;
const dayEvents = this.getEventsForDate(ds);
+ // For dots/labels in day cells, only show events that START on this day.
+ // Multi-day events on intermediate days are shown via span bars instead.
+ const cellEvents = dayEvents.filter(e => e.start_time.slice(0, 10) === ds);
const dayReminders = this.getRemindersForDate(ds);
const lunar = this.lunarData[ds];
@@ -1155,18 +1158,18 @@ class FolkCalendarView extends HTMLElement {
${this.showLunar && lunar ? `${this.getMoonEmoji(lunar.phase)}` : ""}
${dayReminders.length > 0 ? `🔔${dayReminders.length > 1 ? dayReminders.length : ""}` : ""}
- ${dayEvents.length > 0 || dayReminders.length > 0 ? `
+ ${cellEvents.length > 0 || dayReminders.length > 0 ? `
- ${dayEvents.slice(0, 5).map(e => {
+ ${cellEvents.slice(0, 5).map(e => {
const es = this.getEventStyles(e);
return es.isTentative
? ``
: ``;
}).join("")}
${dayReminders.slice(0, 3).map(r => ``).join("")}
- ${dayEvents.length > 5 ? `+${dayEvents.length - 5}` : ""}
+ ${cellEvents.length > 5 ? `+${cellEvents.length - 5}` : ""}
- ${dayEvents.slice(0, 2).map(e => {
+ ${cellEvents.slice(0, 2).map(e => {
const evColor = e.source_color || "#6366f1";
const es = this.getEventStyles(e);
const city = this.getSpatialLabel(e.location_breadcrumb, 5);
@@ -2372,8 +2375,9 @@ class FolkCalendarView extends HTMLElement {
});
// Scroll/trackpad gestures on calendar pane
- // - Pinch-to-zoom (ctrlKey wheel) → zoom in/out granularity
- // - Two-finger scroll/pan (plain wheel) → navigate timeline
+ // - Pinch-to-zoom (ctrlKey wheel) → zoom in/out temporal granularity
+ // - Two-finger horizontal pan (deltaX) → navigate dates
+ // - Two-finger vertical scroll (deltaY) → pass through to page scroll
const calPane = $("calendar-pane");
if (calPane) {
calPane.addEventListener("wheel", (e: WheelEvent) => {
@@ -2381,10 +2385,9 @@ class FolkCalendarView extends HTMLElement {
const mapPanel = this.shadow.getElementById("map-panel");
if (mapPanel && mapPanel.contains(e.target as Node)) return;
- e.preventDefault();
-
if (e.ctrlKey) {
// Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse)
+ e.preventDefault();
if (this._wheelTimer) clearTimeout(this._wheelTimer);
this._wheelTimer = setTimeout(() => {
if (e.deltaY > 0) {
@@ -2394,18 +2397,20 @@ class FolkCalendarView extends HTMLElement {
}
this._wheelTimer = null;
}, 120);
- } else {
- // Two-finger scroll / mouse wheel → navigate timeline
+ } else if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
+ // Two-finger horizontal pan → navigate dates
+ e.preventDefault();
if (this._wheelTimer) clearTimeout(this._wheelTimer);
this._wheelTimer = setTimeout(() => {
- if (e.deltaY > 0) {
- this.navigate(1); // scroll down → next period
- } else if (e.deltaY < 0) {
- this.navigate(-1); // scroll up → previous period
+ if (e.deltaX > 0) {
+ this.navigate(1); // pan right → next period
+ } else if (e.deltaX < 0) {
+ this.navigate(-1); // pan left → previous period
}
this._wheelTimer = null;
}, 120);
}
+ // Vertical scroll (deltaY without ctrlKey) → no preventDefault, page scrolls naturally
}, { passive: false });
// Pan/swipe + pinch-to-zoom on calendar pane
@@ -2495,8 +2500,19 @@ class FolkCalendarView extends HTMLElement {
this.leafletMap = L.map(this.mapContainer, {
center, zoom, zoomControl: false,
+ scrollWheelZoom: false, // Disable: plain scroll should pass to page
});
+ // Only zoom map on Ctrl+scroll (pinch-to-zoom on trackpad)
+ this.mapContainer.addEventListener("wheel", (ev: WheelEvent) => {
+ if (ev.ctrlKey) {
+ ev.preventDefault();
+ if (ev.deltaY < 0) this.leafletMap.zoomIn();
+ else if (ev.deltaY > 0) this.leafletMap.zoomOut();
+ }
+ // Plain scroll passes through to page
+ }, { passive: false });
+
this.applyMapTileLayer();
// Watch for theme changes
@@ -2702,7 +2718,7 @@ class FolkCalendarView extends HTMLElement {
/* ── Main Layout ── */
.main-layout { position: relative; min-height: 400px; }
.main-layout--docked { display: grid; grid-template-columns: 1fr 6px 400px; gap: 0; min-height: 500px; }
- .calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y; user-select: none; }
+ .calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y pinch-zoom; user-select: none; }
/* ── Resize Handle ── */
.resize-handle { width: 6px; cursor: col-resize; background: transparent; position: relative; z-index: 10; transition: background 0.15s; }