@luckydye/calendar 1.3.2 → 1.4.0

package/src/CalendarView.ts

@@ -1,33 +1,47 @@
-import { css, html, LitElement, render } from "lit";
+import { LitElement, css, html, render } from "lit";
 import {
 	type Attendee,
 	type CalendarEvent,
 	CalendarInternal,
-	type WeekInfo,
 	NOTIFICATION_PRESETS,
+	type WeekInfo,
 } from "./CalendarInternal.js";
+import {
+	type CalendarLayer,
+	type LayerContext,
+	TIME_SCALE_DAY_HEIGHT,
+} from "./CalendarLayer.js";
 import { hexToRgb, rgbToHsl } from "./Color.js";
+import { sanitizeEventDescription } from "./DescriptionSanitizer.js";
+import { serializeEventsToICal } from "./ICal.js";
+import { IndexedDBStorage } from "./IndexedDBStorage.js";
+import type { StatusBarData } from "./StatusBar.js";
+import { queueStatus } from "./StatusMessage.js";
 import {
 	type ThemeName,
 	applyTheme,
-	saveThemePreference,
-	loadThemePreference,
 	availableThemes,
+	loadThemePreference,
+	saveThemePreference,
 } from "./Theme.js";
-import { serializeEventsToICal } from "./ICal.js";
-import { queueStatus } from "./StatusMessage.js";
-import type { StatusBarData } from "./StatusBar.js";
-import { IndexedDBStorage } from "./IndexedDBStorage.js";
-import { sanitizeEventDescription } from "./DescriptionSanitizer.js";
-import { TIME_SCALE_DAY_HEIGHT, type CalendarLayer, type LayerContext } from "./CalendarLayer.js";
+import {
+	type EventRect,
+	type EventsState,
+	type PreviewEventData,
+	createEventsLayer,
+} from "./layers/EventsLayer.js";
 import { createGridLayer } from "./layers/GridLayer.js";
-import { createEventsLayer, type EventRect, type EventsState } from "./layers/EventsLayer.js";
 import { createTimeseriesHeatmapLayer } from "./layers/TimeseriesHeatmapLayer.js";
 
 const MIN_DAY_HEIGHT = 50;
 const MAX_DAY_HEIGHT = 3000; // 1px per minute
 const LEFT_GUTTER_WIDTH = 60;
 const MINIMAP_WIDTH = 12;
+const MIN_DAY_COLUMN_WIDTH = 80;
+const MAX_DAY_COLUMN_WIDTH = 320;
+const DEFAULT_DAY_COLUMN_WIDTH = 120;
+const TIME_SCALE_EVENT_THRESHOLD = 400;
+const FILTER_CONTEXT_WEEKS = 8;
 
 export class CalendarViewElement extends LitElement {
 	static styles = css`
@@ -65,7 +79,7 @@ export class CalendarViewElement extends LitElement {
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 100;
+      z-index: 200;
     }
 
     .toolbar::before {
@@ -160,6 +174,12 @@ export class CalendarViewElement extends LitElement {
       gap: 8px;
     }
 
+    .toolbar-slider-label {
+      font-size: 12px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.6));
+      user-select: none;
+    }
+
     .toolbar-zoom-slider {
       width: 100px;
       height: 4px;
@@ -231,10 +251,11 @@ export class CalendarViewElement extends LitElement {
       position: absolute;
       inset: 0;
       overflow-y: overlay;
-      overflow-x: hidden;
+      overflow-x: auto;
       z-index: 1;
       cursor: default;
       overflow-anchor: none;
+      touch-action: pan-x pan-y;
     }
 
     :host([scroll-lock]) .scroll-container {
@@ -742,6 +763,17 @@ export class CalendarViewElement extends LitElement {
 		return this._dayHeight;
 	}
 
+	_minDayColumnWidth = DEFAULT_DAY_COLUMN_WIDTH;
+	set minDayColumnWidth(value) {
+		this._minDayColumnWidth = value;
+		this.saveMinDayColumnWidth();
+		this.renderCanvas();
+		this.requestUpdate();
+	}
+	get minDayColumnWidth() {
+		return this._minDayColumnWidth;
+	}
+
 	_scrollTop = 0;
 	set scrollTop(value) {
 		this._scrollTop = value;
@@ -749,7 +781,7 @@ export class CalendarViewElement extends LitElement {
 		if (!this.scrollContainer || !this.scrollContent) return;
 
 		if (this.scrollContainer.scrollHeight < value) {
-			this.scrollContent.style.minHeight = value + window.innerHeight + "px";
+			this.scrollContent.style.minHeight = `${value + window.innerHeight}px`;
 		}
 
 		this.scrollContainer.scrollTop = value;
@@ -797,10 +829,13 @@ export class CalendarViewElement extends LitElement {
 
 				const progress = Math.min((currentTime - startTime) / duration, 1);
 
-				this._dayHeight = startDayHeight + (toDayHeight - startDayHeight) * easeOutExpo(progress);
+				this._dayHeight =
+					startDayHeight +
+					(toDayHeight - startDayHeight) * easeOutExpo(progress);
 				this.updateWeekOffsets();
 
-				const currentFrac = startFrac + (targetFrac - startFrac) * easeOutCubic(progress);
+				const currentFrac =
+					startFrac + (targetFrac - startFrac) * easeOutCubic(progress);
 				this._scrollTop = Math.max(0, currentFrac * this.totalHeight);
 
 				if (this.scrollContainer) {
@@ -808,8 +843,9 @@ export class CalendarViewElement extends LitElement {
 						this.scrollContent &&
 						this.scrollContainer.scrollHeight < this._scrollTop
 					) {
-						this.scrollContent.style.minHeight =
-							this._scrollTop + window.innerHeight + "px";
+						this.scrollContent.style.minHeight = `${
+							this._scrollTop + window.innerHeight
+						}px`;
 					}
 					this.scrollContainer.scrollTop = this._scrollTop;
 				}
@@ -852,6 +888,17 @@ export class CalendarViewElement extends LitElement {
 		this.renderCanvas();
 	}
 
+	syncScrollDomToState(): void {
+		if (!this.scrollContainer || !this.scrollContent) return;
+
+		if (this.scrollContainer.scrollHeight < this._scrollTop) {
+			this.scrollContent.style.minHeight = `${
+				this._scrollTop + window.innerHeight
+			}px`;
+		}
+		this.scrollContainer.scrollTop = this._scrollTop;
+	}
+
 	viewportHeight = 0;
 
 	currentTime = new Date();
@@ -904,8 +951,13 @@ export class CalendarViewElement extends LitElement {
 	timeUpdateInterval: ReturnType<typeof setInterval> | null = null;
 	isExtendingRange = false; // Prevents concurrent range extensions
 	boundaryCheckInterval: ReturnType<typeof setInterval> | null = null;
+	wheelZoomSyncTimeout: ReturnType<typeof setTimeout> | null = null;
 	lastWheelTime = 0; // Timestamp of last wheel event, used to distinguish wheel vs scrollbar drag
 	isCreatingEvent = false;
+	isPinchZooming = false;
+	pinchStartDistance = 0;
+	pinchStartHeight = MIN_DAY_HEIGHT;
+	pinchStartOriginY = 0;
 	eventCreationStart: { x: number; y: number } | null = null;
 	eventCreationEnd: { x: number; y: number } | null = null;
 	eventCreationShiftPressed = false;
@@ -926,28 +978,49 @@ export class CalendarViewElement extends LitElement {
 	resizingOriginalEnd: Date | null = null;
 	isResizingEvent = false;
 
-	_columnsPerRow = 7;
-	set columnsPerRow(value: number) {
-		const clamped = Math.max(1, Math.min(7, Math.floor(value)));
-		if (this._columnsPerRow !== clamped) {
-			this._columnsPerRow = clamped;
-			this.updateWeekOffsets();
-			this.renderCanvas();
-			this.requestUpdate();
-		}
-	}
 	get columnsPerRow(): number {
-		return this._columnsPerRow;
+		return 7;
 	}
 
 	get rowsPerWeek(): number {
-		return Math.ceil(7 / this._columnsPerRow);
+		return 1;
 	}
 
 	getDayVisualPosition(dayIndex: number): { row: number; col: number } {
-		const row = Math.floor(dayIndex / this._columnsPerRow);
-		const col = dayIndex % this._columnsPerRow;
-		return { row, col };
+		return { row: 0, col: dayIndex };
+	}
+
+	get scrollLeft(): number {
+		return this.scrollContainer?.scrollLeft ?? 0;
+	}
+
+	getViewportGridWidth(): number {
+		if (!this.scrollContainer) return this.columnsPerRow * this.minDayColumnWidth;
+		return Math.max(
+			0,
+			this.scrollContainer.clientWidth - LEFT_GUTTER_WIDTH - MINIMAP_WIDTH,
+		);
+	}
+
+	getGridWidth(): number {
+		return Math.max(
+			this.getViewportGridWidth(),
+			this.columnsPerRow * this.minDayColumnWidth,
+		);
+	}
+
+	getDayWidth(): number {
+		return this.getGridWidth() / this.columnsPerRow;
+	}
+
+	getContentWidth(): number {
+		return LEFT_GUTTER_WIDTH + this.getGridWidth();
+	}
+
+	getContentXFromClientX(clientX: number): number {
+		if (!this.scrollContainer) return clientX;
+		const rect = this.scrollContainer.getBoundingClientRect();
+		return clientX - rect.left + this.scrollLeft;
 	}
 
 	getVisualPositionFromCoords(
@@ -957,9 +1030,9 @@ export class CalendarViewElement extends LitElement {
 	): { dayIndex: number; timeFraction: number; weekYOffset: number } | null {
 		if (!this.scrollContainer) return null;
 
-		const dayWidth = gridWidth / this._columnsPerRow;
+		const dayWidth = gridWidth / this.columnsPerRow;
 		const col = Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth);
-		if (col < 0 || col >= this._columnsPerRow) return null;
+		if (col < 0 || col >= this.columnsPerRow) return null;
 
 		const week = this.weeks.find(
 			(w) => w.height > 0 && y >= w.yOffset && y < w.yOffset + w.height,
@@ -968,7 +1041,7 @@ export class CalendarViewElement extends LitElement {
 
 		const rowHeight = this.dayHeight;
 		const row = Math.floor((y - week.yOffset) / rowHeight);
-		const dayIndex = row * this._columnsPerRow + col;
+		const dayIndex = row * this.columnsPerRow + col;
 		if (dayIndex < 0 || dayIndex > 6) return null;
 
 		const timeFraction = ((y - week.yOffset) % rowHeight) / rowHeight;
@@ -1056,7 +1129,7 @@ export class CalendarViewElement extends LitElement {
 		if (saved) {
 			return Math.max(
 				MIN_DAY_HEIGHT,
-				Math.min(MAX_DAY_HEIGHT, parseFloat(saved)),
+				Math.min(MAX_DAY_HEIGHT, Number.parseFloat(saved)),
 			);
 		}
 
@@ -1067,6 +1140,25 @@ export class CalendarViewElement extends LitElement {
 		localStorage.setItem("calendar-dayHeight", this.dayHeight.toString());
 	}
 
+	loadMinDayColumnWidth(): number {
+		const saved = localStorage.getItem("calendar-minDayColumnWidth");
+		if (saved) {
+			return Math.max(
+				MIN_DAY_COLUMN_WIDTH,
+				Math.min(MAX_DAY_COLUMN_WIDTH, Number.parseFloat(saved)),
+			);
+		}
+
+		return DEFAULT_DAY_COLUMN_WIDTH;
+	}
+
+	saveMinDayColumnWidth(): void {
+		localStorage.setItem(
+			"calendar-minDayColumnWidth",
+			this.minDayColumnWidth.toString(),
+		);
+	}
+
 	saveScrollPosition(): void {
 		// Save the date at the center of the viewport instead of pixel offset
 		const centerY = this.scrollTop + this.viewportHeight / 2;
@@ -1085,6 +1177,90 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
+	renderMonthLabels(
+		ctx: CanvasRenderingContext2D,
+		width: number,
+		height: number,
+		fontFamily: string,
+	): void {
+		const monthNames = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December",
+		];
+		const monthBoundaries: Array<{
+			monthName: string;
+			year: number;
+			yOffset: number;
+		}> = [];
+		let previousMonthKey: string | null = null;
+
+		for (const week of this.weeks) {
+			if (week.height === 0) continue;
+			if (week.yOffset + week.height < this.scrollTop) continue;
+			if (week.yOffset > this.scrollTop + this.viewportHeight) break;
+
+			for (const day of week.days) {
+				if (!day) continue;
+				const monthIndex = day.getMonth();
+				const year = day.getFullYear();
+				const monthKey = `${monthIndex}-${year}`;
+				if (monthKey === previousMonthKey) continue;
+
+				previousMonthKey = monthKey;
+				const monthName = monthNames[monthIndex];
+				if (!monthName) continue;
+				monthBoundaries.push({ monthName, year, yOffset: week.yOffset });
+			}
+		}
+
+		const bgPrimary =
+			getComputedStyle(this).getPropertyValue("--bg-primary").trim() ||
+			"rgba(30, 30, 30, 1)";
+		const monthTextPrimary =
+			getComputedStyle(this).getPropertyValue("--text-primary").trim() ||
+			"rgba(255, 255, 255, 0.95)";
+
+		for (let i = 0; i < monthBoundaries.length; i++) {
+			const month = monthBoundaries[i];
+			if (!month) continue;
+			const nextMonth = monthBoundaries[i + 1];
+			const nextMonthY = nextMonth
+				? nextMonth.yOffset
+				: Number.POSITIVE_INFINITY;
+
+			if (nextMonthY < this.scrollTop) continue;
+			if (month.yOffset > this.scrollTop + this.viewportHeight) break;
+
+			const stickyTop = Math.max(0, this.scrollTop - month.yOffset);
+			const maxStickyTop = nextMonthY - month.yOffset - 24;
+			const clampedStickyTop = Math.min(stickyTop, maxStickyTop);
+			const finalTop = month.yOffset + clampedStickyTop - this.scrollTop;
+			const isSticky = clampedStickyTop > 0;
+
+			ctx.save();
+			ctx.globalAlpha = isSticky ? 1 : 0.5;
+			ctx.fillStyle = bgPrimary;
+			ctx.fillRect(0, finalTop, width, 40);
+			ctx.globalAlpha = 1;
+			ctx.font = `bold 18px ${fontFamily}`;
+			ctx.textAlign = "left";
+			ctx.textBaseline = "top";
+			ctx.fillStyle = monthTextPrimary;
+			ctx.fillText(`${month.monthName} ${month.year}`, 20, finalTop + 10);
+			ctx.restore();
+		}
+	}
+
 	loadScrollPosition(): void {
 		const saved = localStorage.getItem("calendar-scrollDate");
 		if (saved) {
@@ -1118,9 +1294,8 @@ export class CalendarViewElement extends LitElement {
 				CalendarInternal.isSameDay(d, now),
 			);
 			if (todayIndex >= 0) {
-				const row = Math.floor(todayIndex / this._columnsPerRow);
 				const timeFraction = (now.getHours() + now.getMinutes() / 60) / 24;
-				offsetInWeek = (row + timeFraction) / this.rowsPerWeek;
+				offsetInWeek = timeFraction;
 			}
 		}
 
@@ -1347,8 +1522,17 @@ export class CalendarViewElement extends LitElement {
 		window.removeEventListener("paste", this.onPaste);
 		window.removeEventListener("keydown", this.onKeyDown);
 		window.removeEventListener("keyup", this.onKeyUp);
+		if (this.wheelZoomSyncTimeout) {
+			clearTimeout(this.wheelZoomSyncTimeout);
+			this.wheelZoomSyncTimeout = null;
+		}
 
 		if (this.scrollContainer) {
+			this.scrollContainer.removeEventListener("scroll", this.onScroll);
+			this.scrollContainer.removeEventListener("touchstart", this.onTouchStart);
+			this.scrollContainer.removeEventListener("touchmove", this.onTouchMove);
+			this.scrollContainer.removeEventListener("touchend", this.onTouchEnd);
+			this.scrollContainer.removeEventListener("touchcancel", this.onTouchEnd);
 			this.scrollContainer.removeEventListener(
 				"mouseleave",
 				this.onScrollContainerMouseLeave,
@@ -1401,7 +1585,9 @@ export class CalendarViewElement extends LitElement {
 	}
 
 	private requestDescriptionSummary(event: CalendarEvent): void {
-		const description = sanitizeEventDescription(event.description ?? "").trim();
+		const description = sanitizeEventDescription(
+			event.description ?? "",
+		).trim();
 		if (description.length <= 200) return;
 
 		const targetKey = this.getDescriptionSummaryTargetKey(event);
@@ -1452,11 +1638,12 @@ export class CalendarViewElement extends LitElement {
 		if (key !== this.descriptionSummaryTargetKey) return;
 		this.descriptionSummaryLoading = false;
 		this.descriptionSummaryError = message;
-		if (!this.descriptionSummaryText && this.selectedEventForDetail?.description) {
-			this.descriptionSummaryText = this.selectedEventForDetail.description.replaceAll(
-				"\\n",
-				"\n",
-			);
+		if (
+			!this.descriptionSummaryText &&
+			this.selectedEventForDetail?.description
+		) {
+			this.descriptionSummaryText =
+				this.selectedEventForDetail.description.replaceAll("\\n", "\n");
 		}
 		this.requestUpdate();
 	}
@@ -1472,18 +1659,44 @@ export class CalendarViewElement extends LitElement {
 	repositionEventDetailOverlay(): void {
 		if (!this.selectedEventForDetail || !this.selectedEventRect) return;
 
-		const overlay = this.renderRoot.querySelector<HTMLElement>(".event-detail-overlay");
+		const overlay = this.renderRoot.querySelector<HTMLElement>(
+			".event-detail-overlay",
+		);
 		if (!overlay) return;
+		const currentRect = this.eventRects.find(
+			(rect) => rect.event === this.selectedEventForDetail,
+		);
+		if (currentRect) {
+			this.selectedEventRect = {
+				x: currentRect.x,
+				y: currentRect.y,
+				width: currentRect.width,
+				height: currentRect.height,
+			};
+		}
 
+		const actualWidth = overlay.offsetWidth;
 		const actualHeight = overlay.offsetHeight;
 		const GAP = 8;
+		const containerWidth = this.scrollContainer?.clientWidth || 800;
 		const containerHeight = this.scrollContainer?.clientHeight || 600;
 
+		const rightPosition =
+			this.selectedEventRect.x + this.selectedEventRect.width + GAP;
+		const leftPosition = this.selectedEventRect.x - actualWidth - GAP;
+		const preferredLeft =
+			rightPosition + actualWidth <= containerWidth
+				? rightPosition
+				: leftPosition;
+		const minLeft = LEFT_GUTTER_WIDTH + GAP;
+		const maxLeft = containerWidth - actualWidth - GAP;
+		const left = Math.max(minLeft, Math.min(maxLeft, preferredLeft));
 		const rawTop = this.selectedEventRect.y - this.scrollTop;
 		const minTop = GAP;
 		const maxTop = containerHeight - actualHeight - GAP;
 		const top = Math.max(minTop, Math.min(maxTop, rawTop));
 
+		overlay.style.left = `${left}px`;
 		overlay.style.top = `${top}px`;
 	}
 
@@ -1500,14 +1713,24 @@ export class CalendarViewElement extends LitElement {
 
 		const self = this;
 		const eventsState: EventsState = {
-			get events() { return self.events; },
-			get hoveredEventId() { return self.hoveredEventId; },
+			get events() {
+				return self.events;
+			},
+			get previewEvents() {
+				return self.getPreviewEvents();
+			},
+			get hoveredEventId() {
+				return self.hoveredEventId;
+			},
 			isEventSelected: (event) => self.internal.isEventSelected(event),
-			shouldRenderEventWithStripes: (event) => self.shouldRenderEventWithStripes(event),
+			shouldRenderEventWithStripes: (event) =>
+				self.shouldRenderEventWithStripes(event),
 			getStripePatternCanvas: () => self.getStripePatternCanvas(),
 		};
 		const heatmapState = {
-			get events() { return self.heatmapEvents; },
+			get events() {
+				return self.heatmapEvents;
+			},
 		};
 		this.eventsLayer = createEventsLayer(eventsState);
 		this.layers = [
@@ -1520,14 +1743,30 @@ export class CalendarViewElement extends LitElement {
 
 		// Restore zoom level from localStorage
 		const savedDayHeight = this.loadDayHeight();
-		if (savedDayHeight !== 80) {
+		if (savedDayHeight !== MIN_DAY_HEIGHT) {
 			this.dayHeight = savedDayHeight;
 		}
+		const savedMinDayColumnWidth = this.loadMinDayColumnWidth();
+		if (savedMinDayColumnWidth !== DEFAULT_DAY_COLUMN_WIDTH) {
+			this.minDayColumnWidth = savedMinDayColumnWidth;
+		}
 
 		if (this.scrollContainer) {
 			this.scrollContainer.addEventListener("scroll", this.onScroll, {
 				passive: false,
 			});
+			this.scrollContainer.addEventListener("touchstart", this.onTouchStart, {
+				passive: false,
+			});
+			this.scrollContainer.addEventListener("touchmove", this.onTouchMove, {
+				passive: false,
+			});
+			this.scrollContainer.addEventListener("touchend", this.onTouchEnd, {
+				passive: false,
+			});
+			this.scrollContainer.addEventListener("touchcancel", this.onTouchEnd, {
+				passive: false,
+			});
 			this.scrollContainer.addEventListener(
 				"mouseleave",
 				this.onScrollContainerMouseLeave,
@@ -1639,30 +1878,27 @@ export class CalendarViewElement extends LitElement {
 
 	updateWeekOffsets(): void {
 		let y = 0;
-		const weekHeight = this.dayHeight * this.rowsPerWeek;
+		const weekHeight = this.dayHeight;
 
 		if (this.filter) {
-			const filteredEvents = this.events;
-
-			// Pre-compute event date ranges once (avoiding repeated startOfDayTime/endOfDayTime calls)
-			const eventRanges = filteredEvents.map((e) => ({
-				start: CalendarInternal.startOfDayTime(e.start),
-				end: CalendarInternal.endOfDayTime(e.end),
-			}));
+			const eventRanges = this.getFilteredEventRanges(this.events);
+			this.ensureFilteredContextWeeks(eventRanges);
+
+			const visibleWeekIndexes = new Set<number>();
+			for (const index of this.getMatchingWeekIndexes(eventRanges)) {
+				for (
+					let visibleIndex = Math.max(0, index - FILTER_CONTEXT_WEEKS);
+					visibleIndex <=
+					Math.min(this.weeks.length - 1, index + FILTER_CONTEXT_WEEKS);
+					visibleIndex++
+				) {
+					visibleWeekIndexes.add(visibleIndex);
+				}
+			}
 
-			for (const week of this.weeks) {
+			for (const [index, week] of this.weeks.entries()) {
 				week.yOffset = y;
-
-				// Check if any day in this week overlaps any event range
-				const weekStartTime = week.days[0]?.getTime() ?? 0;
-				const weekEndTime = week.days[6]?.getTime() ?? 0;
-
-				// Quick check: skip if week is entirely outside all event ranges
-				const hasEvents = eventRanges.some(
-					(range) => range.end >= weekStartTime && range.start <= weekEndTime,
-				);
-
-				week.height = hasEvents ? weekHeight : 0;
+				week.height = visibleWeekIndexes.has(index) ? weekHeight : 0;
 				y += week.height;
 			}
 		} else {
@@ -1676,6 +1912,77 @@ export class CalendarViewElement extends LitElement {
 		this.totalHeight = y;
 	}
 
+	private getFilteredEventRanges(
+		events: CalendarEvent[],
+	): Array<{ start: number; end: number }> {
+		return events
+			.map((event) => ({
+				start: CalendarInternal.startOfDayTime(event.start),
+				end: CalendarInternal.endOfDayTime(event.end),
+			}))
+			.sort((a, b) => a.start - b.start);
+	}
+
+	private getMatchingWeekIndexes(
+		eventRanges: Array<{ start: number; end: number }>,
+	): number[] {
+		const matchingIndexes: number[] = [];
+
+		for (const [index, week] of this.weeks.entries()) {
+			const weekStartTime = CalendarInternal.startOfDayTime(
+				week.days[0] ?? new Date(0),
+			);
+			const weekEndTime = CalendarInternal.endOfDayTime(
+				week.days[6] ?? new Date(0),
+			);
+			const hasEvents = eventRanges.some(
+				(range) => range.end >= weekStartTime && range.start <= weekEndTime,
+			);
+			if (hasEvents) {
+				matchingIndexes.push(index);
+			}
+		}
+
+		return matchingIndexes;
+	}
+
+	private ensureFilteredContextWeeks(
+		eventRanges: Array<{ start: number; end: number }>,
+	): void {
+		if (eventRanges.length === 0) return;
+
+		let matchingWeekIndexes = this.getMatchingWeekIndexes(eventRanges);
+		if (matchingWeekIndexes.length === 0) {
+			this.weeks = this.internal.resetRangeAroundDate(
+				new Date(eventRanges[0]?.start),
+			);
+			matchingWeekIndexes = this.getMatchingWeekIndexes(eventRanges);
+		}
+
+		while (
+			matchingWeekIndexes.length > 0 &&
+			matchingWeekIndexes[0]! < FILTER_CONTEXT_WEEKS
+		) {
+			const newWeeks = this.internal.extendRange("past");
+			if (newWeeks.length === 0) break;
+			this.weeks = [...newWeeks, ...this.weeks];
+			matchingWeekIndexes = this.getMatchingWeekIndexes(eventRanges);
+		}
+
+		while (
+			matchingWeekIndexes.length > 0 &&
+			this.weeks.length -
+				1 -
+				matchingWeekIndexes[matchingWeekIndexes.length - 1]! <
+				FILTER_CONTEXT_WEEKS
+		) {
+			const newWeeks = this.internal.extendRange("future");
+			if (newWeeks.length === 0) break;
+			this.weeks = [...this.weeks, ...newWeeks];
+			matchingWeekIndexes = this.getMatchingWeekIndexes(eventRanges);
+		}
+	}
+
 	handleResize(): void {
 		if (!this.canvas || !this.scrollContainer) return;
 
@@ -1684,8 +1991,11 @@ export class CalendarViewElement extends LitElement {
 
 		this.rect = rect;
 
-		this.canvas.width = rect.width * dpr;
+		const canvasWidth = LEFT_GUTTER_WIDTH + this.getViewportGridWidth();
+		this.canvas.width = canvasWidth * dpr;
 		this.canvas.height = rect.height * dpr;
+		this.canvas.style.width = `${canvasWidth}px`;
+		this.canvas.style.height = `${rect.height}px`;
 		this.viewportHeight = rect.height;
 
 		// Reset and rescale context (scale is reset when canvas dimensions change)
@@ -1696,7 +2006,7 @@ export class CalendarViewElement extends LitElement {
 
 		// Resize and configure overlay canvas
 		if (this.overlayCanvas) {
-			const overlayWidth = rect.width - LEFT_GUTTER_WIDTH - MINIMAP_WIDTH;
+			const overlayWidth = this.getViewportGridWidth();
 			this.overlayCanvas.width = overlayWidth * dpr;
 			this.overlayCanvas.height = rect.height * dpr;
 			this.overlayCanvas.style.width = `${overlayWidth}px`;
@@ -1708,30 +2018,9 @@ export class CalendarViewElement extends LitElement {
 			}
 		}
 
-		this.updateColumnsForViewport();
 		this.renderCanvas();
 	}
 
-	updateColumnsForViewport(): void {
-		if (!this.scrollContainer) return;
-
-		const rect = this.scrollContainer.getBoundingClientRect();
-		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-
-		// Determine optimal columns based on available width
-		// Minimum 60px per day column for usability
-		const minDayWidth = 120;
-		const optimalColumns = Math.max(
-			1,
-			Math.min(7, Math.floor(gridWidth / minDayWidth)),
-		);
-
-		if (this._columnsPerRow !== optimalColumns) {
-			this._columnsPerRow = optimalColumns;
-			this.updateWeekOffsets();
-		}
-	}
-
 	resolveStyles(): Record<string, string> {
 		const cs = getComputedStyle(this);
 		const props = [
@@ -1761,7 +2050,10 @@ export class CalendarViewElement extends LitElement {
 		const ids = new Set<string>();
 		if (saved) {
 			try {
-				const sources = JSON.parse(saved) as Array<{ id?: string; type?: string }>;
+				const sources = JSON.parse(saved) as Array<{
+					id?: string;
+					type?: string;
+				}>;
 				for (const source of sources) {
 					if (source?.type === "timeseries-json" && source.id) {
 						ids.add(source.id);
@@ -1802,7 +2094,9 @@ export class CalendarViewElement extends LitElement {
 		const timeseriesIds = this.loadTimeseriesSourceIds();
 		const enabledKey = [...this.internal.enabledCalendars].join(",");
 		const lockedKey = [...this.internal.lockedCalendars].join(",");
-		const key = `${start.toISOString()}::${end.toISOString()}::${this.filter || ""}::${enabledKey}::${lockedKey}`;
+		const key = `${start.toISOString()}::${end.toISOString()}::${
+			this.filter || ""
+		}::${enabledKey}::${lockedKey}`;
 		if (!force && key === this.heatmapQueryKey) return;
 		this.heatmapQueryKey = key;
 
@@ -1838,8 +2132,7 @@ export class CalendarViewElement extends LitElement {
 		ctx.clearRect(0, 0, width, height);
 
 		const scrollTop = this.scrollTop;
-		const gridWidth = width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / this._columnsPerRow;
+		const dayWidth = this.getDayWidth();
 
 		const visibleWeeks = this.weeks.filter(
 			(w) =>
@@ -1855,10 +2148,11 @@ export class CalendarViewElement extends LitElement {
 			width,
 			height,
 			scrollTop,
+			scrollLeft: this.scrollLeft,
 			dayWidth,
 			dayHeight: this.dayHeight,
 			leftGutterWidth: LEFT_GUTTER_WIDTH,
-			columnsPerRow: this._columnsPerRow,
+			columnsPerRow: this.columnsPerRow,
 			rowsPerWeek: this.rowsPerWeek,
 			visibleWeeks,
 			allWeeks: this.weeks,
@@ -1875,6 +2169,14 @@ export class CalendarViewElement extends LitElement {
 			ctx.restore();
 		}
 
+		this.renderTimeScaleGutter(
+			ctx,
+			visibleWeeks,
+			height,
+			fontFamily,
+			lc.styles,
+		);
+
 		// Copy event rects from events layer for hit-testing
 		if (this.eventsLayer) {
 			this.eventRects = this.eventsLayer.eventRects;
@@ -1887,14 +2189,102 @@ export class CalendarViewElement extends LitElement {
 		// Draw sticky weekday labels at top of viewport
 		this.renderWeekdayLabels(ctx, dayWidth, visibleWeeks, scrollTop, height);
 
-		if (this.isCreatingEvent) {
-			this.renderEventCreationPreview();
-		}
-		if (this.isDraggingEvent) {
-			this.renderEventMovePreview();
+		this.renderMinimap();
+	}
+
+	renderTimeScaleGutter(
+		ctx: CanvasRenderingContext2D,
+		visibleWeeks: WeekInfo[],
+		height: number,
+		fontFamily: string,
+		styles: Record<string, string>,
+	): void {
+		if (visibleWeeks.length === 0) return;
+
+		const hourLabelOpacity = Math.max(
+			0,
+			Math.min(1, (this.dayHeight - TIME_SCALE_DAY_HEIGHT) / 300),
+		);
+		if (hourLabelOpacity <= 0.1) return;
+
+		const textMuted = styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
+		const textPrimary = styles["--text-primary"] || "rgba(255, 255, 255, 1)";
+		const bgPrimary = styles["--bg-primary"] || "rgba(30, 30, 30, 0.9)";
+		const bgElevated = styles["--bg-elevated"] || "rgba(0, 0, 0, 0.7)";
+		const today = new Date();
+
+		ctx.save();
+		ctx.font = `500 11px ${fontFamily}`;
+		ctx.textBaseline = "bottom";
+		ctx.textAlign = "right";
+		ctx.fillStyle = textMuted.replace(
+			/[\d.]+\)$/,
+			`${0.4 * hourLabelOpacity})`,
+		);
+
+		for (const week of visibleWeeks) {
+			const y = week.yOffset - this.scrollTop;
+			const visibleWeekTop = Math.max(0, y);
+			const visibleWeekBottom = Math.min(height, y + week.height);
+
+			if (visibleWeekBottom > visibleWeekTop) {
+				ctx.save();
+				ctx.globalAlpha = 0.7 * hourLabelOpacity;
+				ctx.fillStyle = bgPrimary;
+				ctx.fillRect(
+					0,
+					visibleWeekTop,
+					LEFT_GUTTER_WIDTH - 1,
+					visibleWeekBottom - visibleWeekTop,
+				);
+				ctx.restore();
+			}
+
+			for (let hour = 0; hour < 24; hour++) {
+				const hourY = y + (hour / 24) * this.dayHeight;
+				if (hourY < 0 || hourY > height) continue;
+				const label = `${hour.toString().padStart(2, "0")}:00`;
+				ctx.fillText(label, 48, hourY + 4);
+			}
+
+			const todayIndex = week.days.findIndex((d) =>
+				CalendarInternal.isSameDay(d, today),
+			);
+			if (todayIndex < 0) continue;
+
+			const currentMinutes = today.getHours() * 60 + today.getMinutes();
+			const timeY = y + (currentMinutes / 1440) * this.dayHeight;
+			if (timeY < 0 || timeY > height) continue;
+
+			const hours = today.getHours().toString().padStart(2, "0");
+			const minutes = today.getMinutes().toString().padStart(2, "0");
+			const timeText = `${hours}:${minutes}`;
+			const textWidth = ctx.measureText(timeText).width;
+			const bgPaddingX = 6;
+			const textX = 48;
+
+			ctx.fillStyle = bgElevated;
+			ctx.beginPath();
+			ctx.roundRect(
+				textX - textWidth - bgPaddingX,
+				timeY - 8,
+				textWidth + bgPaddingX * 2,
+				16,
+				4,
+			);
+			ctx.fill();
+
+			ctx.fillStyle = textPrimary;
+			ctx.textBaseline = "middle";
+			ctx.fillText(timeText, textX, timeY);
+			ctx.textBaseline = "bottom";
+			ctx.fillStyle = textMuted.replace(
+				/[\d.]+\)$/,
+				`${0.4 * hourLabelOpacity})`,
+			);
 		}
 
-		this.renderMinimap();
+		ctx.restore();
 	}
 
 	toggleLayer(name: string): void {
@@ -1904,7 +2294,6 @@ export class CalendarViewElement extends LitElement {
 		this.renderCanvas();
 	}
 
-
 	onWheel = (e: WheelEvent): void => {
 		if (this.hasAttribute("scroll-lock")) return;
 		this.lastWheelTime = Date.now();
@@ -1914,7 +2303,9 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-		const isZoomKey = isMac ? e.metaKey : e.ctrlKey;
+		const isPinchZoomGesture = e.ctrlKey;
+		const isShortcutZoom = isMac ? e.metaKey : e.ctrlKey;
+		const isZoomGesture = isPinchZoomGesture || isShortcutZoom;
 
 		if (this.isFiltered && this.historyIndex === 0) {
 			this.replaceFilterInHistory();
@@ -1922,7 +2313,7 @@ export class CalendarViewElement extends LitElement {
 			this.debouncedSaveToHistory();
 		}
 
-		if (!isZoomKey || !this.scrollContainer) {
+		if (!isZoomGesture || !this.scrollContainer) {
 			this.updateMousePosition();
 			return;
 		}
@@ -1942,8 +2333,95 @@ export class CalendarViewElement extends LitElement {
 		const newOriginY = this.zoomOriginY * scaleRatio;
 		const newScrollTop = newOriginY - this.zoomViewportY;
 
-		this.setView(newHeight, newScrollTop);
+		// Avoid DOM scroll sync during wheel zoom to prevent scroll/zoom race flicker.
+		this.setView(newHeight, newScrollTop, false);
 		this.zoomOriginY = newOriginY;
+		if (this.wheelZoomSyncTimeout) {
+			clearTimeout(this.wheelZoomSyncTimeout);
+		}
+		this.wheelZoomSyncTimeout = setTimeout(() => {
+			this.syncScrollDomToState();
+			this.wheelZoomSyncTimeout = null;
+		}, 80);
+	};
+
+	getTouchDistance(touches: TouchList): number {
+		if (touches.length < 2) return 0;
+		const first = touches[0];
+		const second = touches[1];
+		if (!first || !second) return 0;
+		return Math.hypot(
+			second.clientX - first.clientX,
+			second.clientY - first.clientY,
+		);
+	}
+
+	getTouchCenterY(touches: TouchList): number {
+		if (touches.length < 2) return 0;
+		const first = touches[0];
+		const second = touches[1];
+		if (!first || !second || !this.scrollContainer) return 0;
+		const rect = this.scrollContainer.getBoundingClientRect();
+		return (first.clientY + second.clientY) / 2 - rect.top;
+	}
+
+	onTouchStart = (e: TouchEvent): void => {
+		if (this.hasAttribute("scroll-lock") || !this.scrollContainer) return;
+		if (e.touches.length < 2) return;
+
+		if (this.scrollAnimationFrame) {
+			this.cancelScrollAnimation();
+		}
+
+		const distance = this.getTouchDistance(e.touches);
+		if (distance <= 0) return;
+
+		e.preventDefault();
+		this.isPinchZooming = true;
+		this.pinchStartDistance = distance;
+		this.pinchStartHeight = this.dayHeight;
+		this.zoomViewportY = this.getTouchCenterY(e.touches);
+		this.pinchStartOriginY = this.zoomViewportY + this.scrollTop;
+		this.zoomOriginY = this.pinchStartOriginY;
+
+		if (this.isFiltered && this.historyIndex === 0) {
+			this.replaceFilterInHistory();
+		} else {
+			this.debouncedSaveToHistory();
+		}
+	};
+
+	onTouchMove = (e: TouchEvent): void => {
+		if (!this.isPinchZooming || !this.scrollContainer) return;
+		if (e.touches.length < 2 || this.pinchStartDistance <= 0) return;
+
+		e.preventDefault();
+		const distance = this.getTouchDistance(e.touches);
+		if (distance <= 0) return;
+
+		this.zoomViewportY = this.getTouchCenterY(e.touches);
+		const scaleRatio = distance / this.pinchStartDistance;
+		const newHeight = Math.max(
+			MIN_DAY_HEIGHT,
+			Math.min(MAX_DAY_HEIGHT, this.pinchStartHeight * scaleRatio),
+		);
+		const zoomRatio = newHeight / this.pinchStartHeight;
+		const newOriginY = this.pinchStartOriginY * zoomRatio;
+		const newScrollTop = newOriginY - this.zoomViewportY;
+
+		this.setView(newHeight, newScrollTop, false, false);
+		this.zoomOriginY = newOriginY;
+	};
+
+	onTouchEnd = (e: TouchEvent): void => {
+		if (e.touches.length >= 2) {
+			this.onTouchStart(e);
+			return;
+		}
+
+		this.isPinchZooming = false;
+		this.pinchStartDistance = 0;
+		this.syncScrollDomToState();
 	};
 
 	lastPointerY = 0;
@@ -2080,7 +2558,7 @@ export class CalendarViewElement extends LitElement {
 			this.scrollContainer
 		) {
 			const rect = this.scrollContainer.getBoundingClientRect();
-			const currentX = e.clientX - rect.left;
+			const currentX = this.getContentXFromClientX(e.clientX);
 			const currentY = e.clientY - rect.top + this.scrollTop;
 
 			// Start selection
@@ -2102,7 +2580,7 @@ export class CalendarViewElement extends LitElement {
 			this.selection = {
 				startX: this.selectionStartX,
 				startY: this.selectionStartY,
-				endX: e.clientX - rect.left,
+				endX: this.getContentXFromClientX(e.clientX),
 				endY: e.clientY - rect.top + this.scrollTop,
 			};
 			this.requestUpdate();
@@ -2111,7 +2589,7 @@ export class CalendarViewElement extends LitElement {
 		// Event creation drag
 		if (this.eventCreationStart && this.scrollContainer) {
 			const rect = this.scrollContainer.getBoundingClientRect();
-			const currentX = e.clientX - rect.left;
+			const currentX = this.getContentXFromClientX(e.clientX);
 			const currentY = e.clientY - rect.top + this.scrollTop;
 			this.isCreatingEvent = true;
 
@@ -2153,7 +2631,6 @@ export class CalendarViewElement extends LitElement {
 			this.eventCreationEnd = { x: currentX, y: currentY };
 			this.eventCreationPreviousShiftPressed = e.shiftKey;
 			this.renderDateLabels();
-			this.renderEventCreationPreview();
 		}
 
 		// Event move drag - now handled by HTML5 drag and drop
@@ -2165,7 +2642,7 @@ export class CalendarViewElement extends LitElement {
 		// Event resize drag
 		if (this.resizingEvent && this.resizingEdge && this.scrollContainer) {
 			const rect = this.scrollContainer.getBoundingClientRect();
-			const currentX = e.clientX - rect.left;
+			const currentX = this.getContentXFromClientX(e.clientX);
 			const currentY = e.clientY - rect.top + this.scrollTop;
 			this.isResizingEvent = true;
 
@@ -2219,14 +2696,7 @@ export class CalendarViewElement extends LitElement {
 		}
 		if (this.isDraggingZoom) {
 			this.isDraggingZoom = false;
-			// Sync scroll position with DOM now that drag is complete
-			if (this.scrollContainer && this.scrollContent) {
-				if (this.scrollContainer.scrollHeight < this._scrollTop) {
-					this.scrollContent.style.minHeight =
-						this._scrollTop + window.innerHeight + "px";
-				}
-				this.scrollContainer.scrollTop = this._scrollTop;
-			}
+			this.syncScrollDomToState();
 		}
 		if (this.isDraggingMinimap) {
 			this.isDraggingMinimap = false;
@@ -2298,7 +2768,11 @@ export class CalendarViewElement extends LitElement {
 					const isZoomedOut = this.dayHeight < TIME_SCALE_DAY_HEIGHT;
 					this.dispatchEvent(
 						new CustomEvent("create-event", {
-							detail: { start: snappedStart, end: snappedEnd, isAllDay: isZoomedOut },
+							detail: {
+								start: snappedStart,
+								end: snappedEnd,
+								isAllDay: isZoomedOut,
+							},
 							bubbles: true,
 						}),
 					);
@@ -2486,14 +2960,15 @@ export class CalendarViewElement extends LitElement {
 		if (!this.scrollContainer || this.isDraggingZoom) return;
 
 		const rect = this.scrollContainer.getBoundingClientRect();
-		const x = e.clientX - rect.left;
+		const viewportX = e.clientX - rect.left;
+		const contentX = this.getContentXFromClientX(e.clientX);
 		const y = e.clientY - rect.top + this.scrollTop;
 
 		// Update cursor position for status bar
-		this.cursorPosition = { x, y };
+		this.cursorPosition = { x: contentX, y };
 
 		// Check for resize handles first — suppressed when alt key is active
-		const resizeHandle = !e.altKey ? this.getResizeHandle(x, y) : null;
+		const resizeHandle = !e.altKey ? this.getResizeHandle(viewportX, y) : null;
 		if (resizeHandle && !this.isResizingEvent && !this.isDraggingEvent) {
 			this.scrollContainer.style.cursor =
 				this.dayHeight >= TIME_SCALE_DAY_HEIGHT ? "ns-resize" : "ew-resize";
@@ -2502,7 +2977,9 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		// Check for event hover — suppressed when alt key is active
-		const hoveredEvent = !e.altKey ? this.getEventAtPosition(x, y) : null;
+		const hoveredEvent = !e.altKey
+			? this.getEventAtPosition(viewportX, y)
+			: null;
 		const newHoveredId = hoveredEvent ? hoveredEvent.id : null;
 
 		if (newHoveredId !== this.hoveredEventId) {
@@ -2512,7 +2989,7 @@ export class CalendarViewElement extends LitElement {
 
 		this.requestUpdate();
 
-		if (x < LEFT_GUTTER_WIDTH) {
+		if (viewportX < LEFT_GUTTER_WIDTH) {
 			this.scrollContainer.classList.add("zoom-cursor");
 		} else {
 			this.scrollContainer.classList.remove("zoom-cursor");
@@ -2557,7 +3034,7 @@ export class CalendarViewElement extends LitElement {
 			// Update visual preview
 			if (this.scrollContainer) {
 				const rect = this.scrollContainer.getBoundingClientRect();
-				const x = e.clientX - rect.left;
+				const x = this.getContentXFromClientX(e.clientX);
 				const y = e.clientY - rect.top + this.scrollTop;
 				this.movingEventEnd = { x, y };
 				this.renderCanvas(); // Re-render canvas with preview
@@ -2601,7 +3078,7 @@ export class CalendarViewElement extends LitElement {
 		) {
 			// Handle internal event drop
 			const rect = this.scrollContainer.getBoundingClientRect();
-			const dropX = e.clientX - rect.left;
+			const dropX = this.getContentXFromClientX(e.clientX);
 			const dropY = e.clientY - rect.top + this.scrollTop;
 
 			const originDate = this.convertPositionToDateTime(
@@ -2661,7 +3138,12 @@ export class CalendarViewElement extends LitElement {
 
 	onKeyDown = (e: KeyboardEvent): void => {
 		const focused = e.composedPath()[0] as HTMLElement;
-		if (focused?.tagName === "INPUT" || focused?.tagName === "TEXTAREA" || focused?.isContentEditable) return;
+		if (
+			focused?.tagName === "INPUT" ||
+			focused?.tagName === "TEXTAREA" ||
+			focused?.isContentEditable
+		)
+			return;
 		if (e.altKey && !this.altKeyActive) {
 			this.altKeyActive = true;
 			this.dispatchEvent(new CustomEvent("meta-key-change", { bubbles: true }));
@@ -2677,7 +3159,12 @@ export class CalendarViewElement extends LitElement {
 
 	onKeyUp = (e: KeyboardEvent): void => {
 		const focused = e.composedPath()[0] as HTMLElement;
-		if (focused?.tagName === "INPUT" || focused?.tagName === "TEXTAREA" || focused?.isContentEditable) return;
+		if (
+			focused?.tagName === "INPUT" ||
+			focused?.tagName === "TEXTAREA" ||
+			focused?.isContentEditable
+		)
+			return;
 		if (!e.altKey && this.altKeyActive) {
 			this.altKeyActive = false;
 			this.dispatchEvent(new CustomEvent("meta-key-change", { bubbles: true }));
@@ -2857,17 +3344,18 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		const rect = this.scrollContainer.getBoundingClientRect();
-		const x = e.clientX - rect.left;
+		const viewportX = e.clientX - rect.left;
+		const x = this.getContentXFromClientX(e.clientX);
 		const y = e.clientY - rect.top + this.scrollTop;
 
 		// Check if clicking on zoom handle area (left gutter)
-		if (x < LEFT_GUTTER_WIDTH) {
+		if (viewportX < LEFT_GUTTER_WIDTH) {
 			this.onZoomHandleMouseDown(e);
 			return;
 		}
 
 		// Check if clicking on a resize handle first
-		const resizeHandle = !e.altKey ? this.getResizeHandle(x, y) : null;
+		const resizeHandle = !e.altKey ? this.getResizeHandle(viewportX, y) : null;
 		if (resizeHandle) {
 			this.resizingEvent = resizeHandle.event;
 			this.resizingEdge = resizeHandle.edge;
@@ -2881,7 +3369,9 @@ export class CalendarViewElement extends LitElement {
 
 		// Check if clicking on an event — defer click vs drag to mouseup
 		// Skip event interaction if Alt/Option is held (create new event instead)
-		const clickedEvent = !e.altKey ? this.getEventAtPosition(x, y) : null;
+		const clickedEvent = !e.altKey
+			? this.getEventAtPosition(viewportX, y)
+			: null;
 		if (clickedEvent) {
 			// Clear selection when starting to drag/move an event
 			const hadSelection = this.internal.getSelectedEvents().length > 0;
@@ -2973,22 +3463,20 @@ export class CalendarViewElement extends LitElement {
 		const minY = Math.min(this.selection.startY, this.selection.endY);
 		const maxY = Math.max(this.selection.startY, this.selection.endY);
 
-		const rect = this.scrollContainer.getBoundingClientRect();
-		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / this._columnsPerRow;
+		const dayWidth = this.getDayWidth();
 
 		// Find column indices from X coordinates
 		const startCol = Math.max(
 			0,
 			Math.min(
-				this._columnsPerRow - 1,
+				this.columnsPerRow - 1,
 				Math.floor((minX - LEFT_GUTTER_WIDTH) / dayWidth),
 			),
 		);
 		const endCol = Math.max(
 			0,
 			Math.min(
-				this._columnsPerRow - 1,
+				this.columnsPerRow - 1,
 				Math.floor((maxX - LEFT_GUTTER_WIDTH) / dayWidth),
 			),
 		);
@@ -3093,7 +3581,12 @@ export class CalendarViewElement extends LitElement {
 			if (event.visualStyle === "heatmap") continue;
 
 			// Only select events from the active calendar
-			if (this.activeCalendarId && event.calendarId !== this.activeCalendarId && event.sourceId !== this.activeCalendarId) continue;
+			if (
+				this.activeCalendarId &&
+				event.calendarId !== this.activeCalendarId &&
+				event.sourceId !== this.activeCalendarId
+			)
+				continue;
 
 			const eventStartTime = event.start.getTime();
 			const eventEndTime = event.end.getTime();
@@ -3301,7 +3794,7 @@ export class CalendarViewElement extends LitElement {
 
 	onZoomSliderChange = (e: Event): void => {
 		const slider = e.target as HTMLInputElement;
-		const newHeight = parseInt(slider.value, 10);
+		const newHeight = Number.parseInt(slider.value, 10);
 		const oldHeight = this.dayHeight;
 
 		if (!this.scrollContainer) {
@@ -3321,6 +3814,38 @@ export class CalendarViewElement extends LitElement {
 		this.setView(newHeight, newScrollTop);
 	};
 
+	onDayColumnWidthSliderChange = (e: Event): void => {
+		const slider = e.target as HTMLInputElement;
+		const newWidth = Number.parseInt(slider.value, 10);
+
+		if (!this.scrollContainer) {
+			this.minDayColumnWidth = newWidth;
+			return;
+		}
+
+		const oldGridWidth = this.getGridWidth();
+		const viewportWidth = this.scrollContainer.clientWidth;
+		const viewportCenterX = viewportWidth / 2;
+		const contentCenterX = this.scrollLeft + viewportCenterX;
+
+		this.minDayColumnWidth = newWidth;
+
+		const newGridWidth = this.getGridWidth();
+		const scaleRatio = newGridWidth / oldGridWidth;
+		const newContentCenterX = contentCenterX * scaleRatio;
+		const maxScrollLeft = Math.max(
+			0,
+			LEFT_GUTTER_WIDTH + newGridWidth - viewportWidth,
+		);
+		const newScrollLeft = Math.max(
+			0,
+			Math.min(maxScrollLeft, newContentCenterX - viewportCenterX),
+		);
+
+		this.scrollContainer.scrollLeft = newScrollLeft;
+		this.renderCanvas();
+	};
+
 	async onEventClick(event: CalendarEvent, e: MouseEvent): Promise<void> {
 		const isCmdOrCtrl = e.metaKey || e.ctrlKey;
 
@@ -3468,296 +3993,135 @@ export class CalendarViewElement extends LitElement {
 		this.renderDateLabels();
 	}
 
-	renderEventMovePreview(): void {
-		if (!this.movingEvent || !this.movingEventOrigin || !this.movingEventEnd)
-			return;
-
-		const originDate = this.convertPositionToDateTime(
-			this.movingEventOrigin.x,
-			this.movingEventOrigin.y,
-		);
-		const currentDate = this.convertPositionToDateTime(
-			this.movingEventEnd.x,
-			this.movingEventEnd.y,
-		);
-		if (!originDate || !currentDate) return;
+	getPreviewEvents(): PreviewEventData[] {
+		const previews: PreviewEventData[] = [];
 
-		const deltaMs = currentDate.getTime() - originDate.getTime();
-		const snap15 = (d: Date) => {
-			d.setMinutes(Math.round(d.getMinutes() / 15) * 15, 0, 0);
-			return d;
-		};
-		const newStart = snap15(
-			new Date(this.movingEvent.start.getTime() + deltaMs),
-		);
-		const newEnd = snap15(new Date(this.movingEvent.end.getTime() + deltaMs));
-
-		// The grab point (originDate) relative to the event's midpoint tells us
-		// which half the user grabbed — this is stable for the whole drag.
-		const eventMidMs = (this.movingEvent.start.getTime() + this.movingEvent.end.getTime()) / 2;
-		const useStartEdge = originDate.getTime() <= eventMidMs;
-
-		if (this.movingEventDuplicateMode) {
-			const accent =
-				getComputedStyle(this).getPropertyValue("--accent-primary").trim() ||
-				"rgb(100, 150, 255)";
-			this.renderVirtualEvent(
-				newStart,
-				newEnd,
-				{
-					fill: accent.replace("rgb", "rgba").replace(")", ", 0.3)"),
-					stroke: accent.replace("rgb", "rgba").replace(")", ", 0.8)"),
-					text: "white",
-					dashed: false,
-				},
-				useStartEdge,
-			);
-		} else {
-			const rgb = hexToRgb(this.movingEvent.color || "#888888");
-			this.renderVirtualEvent(
-				newStart,
-				newEnd,
-				{
-					fill: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
-					stroke: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
-					text: "rgba(255, 255, 255, 0.5)",
-					dashed: false,
-				},
-				useStartEdge,
+		if (this.movingEvent && this.movingEventOrigin && this.movingEventEnd) {
+			const originDate = this.convertPositionToDateTime(
+				this.movingEventOrigin.x,
+				this.movingEventOrigin.y,
 			);
-		}
-	}
-
-	renderEventCreationPreview(): void {
-		if (!this.eventCreationStart || !this.eventCreationEnd) return;
-
-		const startDate = this.convertPositionToDateTime(
-			this.eventCreationStart.x,
-			this.eventCreationStart.y,
-		);
-		const endDate = this.convertPositionToDateTime(
-			this.eventCreationEnd.x,
-			this.eventCreationEnd.y,
-		);
-		if (!startDate || !endDate) return;
-
-		let earlier: Date;
-		let later: Date;
-
-		if (
-			this.eventCreationShiftPressed &&
-			this.eventCreationInitialDuration !== null
-		) {
-			// Shift pressed: move event with fixed duration to current mouse position
 			const currentDate = this.convertPositionToDateTime(
-				this.eventCreationEnd.x,
-				this.eventCreationEnd.y,
+				this.movingEventEnd.x,
+				this.movingEventEnd.y,
 			);
-			if (!currentDate) return;
-
-			// Position the event so it ends at the current mouse position
-			later = new Date(currentDate);
-			earlier = new Date(
-				currentDate.getTime() - this.eventCreationInitialDuration,
-			);
-		} else {
-			// Normal behavior: stretch from start to end
-			earlier = startDate < endDate ? startDate : endDate;
-			later = startDate < endDate ? endDate : startDate;
-		}
+			if (originDate && currentDate) {
+				const deltaMs = currentDate.getTime() - originDate.getTime();
+				const snap15 = (d: Date) => {
+					d.setMinutes(Math.round(d.getMinutes() / 15) * 15, 0, 0);
+					return d;
+				};
+				const start = snap15(
+					new Date(this.movingEvent.start.getTime() + deltaMs),
+				);
+				const end = snap15(new Date(this.movingEvent.end.getTime() + deltaMs));
+				if (this.dayHeight < TIME_SCALE_EVENT_THRESHOLD) {
+					start.setHours(0, 0, 0, 0);
+					end.setHours(23, 59, 59, 999);
+				}
 
-		if (this.dayHeight < TIME_SCALE_DAY_HEIGHT) {
-			earlier.setHours(0, 0, 0, 0);
-			later.setHours(23, 59, 59, 999);
-		} else {
-			earlier.setMinutes(Math.round(earlier.getMinutes() / 15) * 15, 0, 0);
-			later.setMinutes(Math.round(later.getMinutes() / 15) * 15, 0, 0);
+				if (this.movingEventDuplicateMode) {
+					const accent =
+						getComputedStyle(this)
+							.getPropertyValue("--accent-primary")
+							.trim() || "rgb(100, 150, 255)";
+					previews.push({
+						id: `move-preview-${this.movingEvent.id}`,
+						start,
+						end,
+						color: {
+							fill: accent.replace("rgb", "rgba").replace(")", ", 0.3)"),
+							stroke: accent.replace("rgb", "rgba").replace(")", ", 0.8)"),
+							text: "white",
+							dashed: false,
+						},
+					});
+				} else {
+					const rgb = hexToRgb(this.movingEvent.color || "#888888");
+					previews.push({
+						id: `move-preview-${this.movingEvent.id}`,
+						start,
+						end,
+						excludeEventId: this.movingEvent.id,
+						color: {
+							fill: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
+							stroke: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
+							text: "rgba(255, 255, 255, 0.5)",
+							dashed: false,
+						},
+					});
+				}
+			}
 		}
 
-		// Use active calendar color if available, otherwise fall back to accent-primary
-		let fill: string;
-		let stroke: string;
-		if (this.activeCalendarColor) {
-			const rgb = hexToRgb(this.activeCalendarColor);
-			fill = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`;
-			stroke = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.8)`;
-		} else {
-			const accent =
-				getComputedStyle(this).getPropertyValue("--accent-primary").trim() ||
-				"rgb(100, 150, 255)";
-			fill = accent.replace("rgb", "rgba").replace(")", ", 0.3)");
-			stroke = accent.replace("rgb", "rgba").replace(")", ", 0.8)");
-		}
-		// In shift mode the cursor tracks the end; otherwise it tracks whichever
-		// edge is away from the fixed anchor (eventCreationStart).
-		const useStartEdge = this.eventCreationShiftPressed
-			? false
-			: this.eventCreationEnd.y <= this.eventCreationStart.y;
-
-		this.renderVirtualEvent(earlier, later, { fill, stroke, text: "white" }, useStartEdge);
-	}
-
-	renderVirtualEvent(
-		start: Date,
-		end: Date,
-		color: { fill: string; stroke: string; text: string; dashed?: boolean },
-		useStartEdge = true,
-	): void {
-		if (!this.overlayCanvas || !this.overlayCtx || !this.scrollContainer)
-			return;
-
-		const ctx = this.overlayCtx;
-		const fontFamily = getComputedStyle(this).fontFamily;
-		const scrollRect = this.scrollContainer.getBoundingClientRect();
-		const gridWidth = scrollRect.width - LEFT_GUTTER_WIDTH - MINIMAP_WIDTH;
-		const dayWidth = gridWidth / this._columnsPerRow;
-
-		const getTimeY = (day: Date, hours: number, minutes: number) => {
-			const week = this.weeks.find((w) =>
-				w.days.some((d) => d.toDateString() === day.toDateString()),
+		if (this.eventCreationStart && this.eventCreationEnd) {
+			const startDate = this.convertPositionToDateTime(
+				this.eventCreationStart.x,
+				this.eventCreationStart.y,
 			);
-			if (!week) return null;
-			const dayIndex = week.days.findIndex(
-				(d) => d.toDateString() === day.toDateString(),
-			);
-			if (dayIndex < 0) return null;
-			const { row } = this.getDayVisualPosition(dayIndex);
-			const totalMinutes = hours * 60 + minutes;
-			const rowY = week.yOffset + row * this.dayHeight;
-			return rowY + (totalMinutes / 1440) * this.dayHeight - this.scrollTop;
-		};
-
-		const getDayColumnX = (day: Date) => {
-			const week = this.weeks.find((w) =>
-				w.days.some((d) => d.toDateString() === day.toDateString()),
-			);
-			if (!week) return null;
-			const dayIndex = week.days.findIndex(
-				(d) => d.toDateString() === day.toDateString(),
+			const endDate = this.convertPositionToDateTime(
+				this.eventCreationEnd.x,
+				this.eventCreationEnd.y,
 			);
-			if (dayIndex < 0) return null;
-			const { col } = this.getDayVisualPosition(dayIndex);
-			return col * dayWidth;
-		};
-
-		const drawBlock = (colX: number, top: number, bottom: number) => {
-			const bx = colX + 2;
-			const bw = dayWidth - 4;
-			const bh = Math.max(4, bottom - top);
-			ctx.fillStyle = color.fill;
-			ctx.beginPath();
-			ctx.roundRect(bx, top, bw, bh, 4);
-			ctx.fill();
-			ctx.strokeStyle = color.stroke;
-			ctx.lineWidth = 1;
-			if (color.dashed !== false) ctx.setLineDash([6, 3]);
-			ctx.stroke();
-			ctx.setLineDash([]);
-		};
-
-		const sameDay = start.toDateString() === end.toDateString();
+			if (startDate && endDate) {
+				let earlier: Date;
+				let later: Date;
 
-		if (sameDay) {
-			const colX = getDayColumnX(start);
-			const top = getTimeY(start, start.getHours(), start.getMinutes());
-			const bottom = getTimeY(end, end.getHours(), end.getMinutes());
-			if (colX != null && top != null && bottom != null)
-				drawBlock(colX, top, bottom);
-		} else {
-			const current = new Date(start);
-			current.setHours(0, 0, 0, 0);
-			const endDay = new Date(end);
-			endDay.setHours(23, 59, 59, 999);
-			while (current <= endDay) {
-				const colX = getDayColumnX(current);
-				if (colX != null) {
-					const isFirst = current.toDateString() === start.toDateString();
-					const isLast = current.toDateString() === end.toDateString();
-					let top: number | null;
-					let bottom: number | null;
-					if (isFirst) {
-						top = getTimeY(current, start.getHours(), start.getMinutes());
-						bottom = getTimeY(current, 23, 59);
-					} else if (isLast) {
-						top = getTimeY(current, 0, 0);
-						bottom = getTimeY(current, end.getHours(), end.getMinutes());
+				if (
+					this.eventCreationShiftPressed &&
+					this.eventCreationInitialDuration !== null
+				) {
+					const currentDate = this.convertPositionToDateTime(
+						this.eventCreationEnd.x,
+						this.eventCreationEnd.y,
+					);
+					if (currentDate) {
+						later = new Date(currentDate);
+						earlier = new Date(
+							currentDate.getTime() - this.eventCreationInitialDuration,
+						);
 					} else {
-						top = getTimeY(current, 0, 0);
-						bottom = getTimeY(current, 23, 59);
+						earlier = startDate < endDate ? startDate : endDate;
+						later = startDate < endDate ? endDate : startDate;
 					}
-					if (top != null && bottom != null) drawBlock(colX, top, bottom);
+				} else {
+					earlier = startDate < endDate ? startDate : endDate;
+					later = startDate < endDate ? endDate : startDate;
 				}
-				current.setDate(current.getDate() + 1);
-			}
-		}
-
-		// Time label
-		const fmtTime = (d: Date) =>
-			`${d.getHours().toString().padStart(2, "0")}:${d
-				.getMinutes()
-				.toString()
-				.padStart(2, "0")}`;
-		const fmtDate = (d: Date) => `${d.getDate()}.${d.getMonth() + 1}`;
-		const label = sameDay
-			? `${fmtTime(start)} – ${fmtTime(end)}`
-			: `${fmtDate(start)} ${fmtTime(start)} – ${fmtDate(end)} ${fmtTime(end)}`;
 
-		const durationMs = Math.abs(end.getTime() - start.getTime());
-		const durationMinutes = durationMs / (1000 * 60);
-		const isShortEvent = durationMinutes < 15;
-
-		const firstColX = getDayColumnX(start);
-		const lastColX = getDayColumnX(end);
-		const startY = getTimeY(start, start.getHours(), start.getMinutes());
-		const endY = getTimeY(end, end.getHours(), end.getMinutes());
-
-		if (
-			firstColX != null &&
-			lastColX != null &&
-			startY != null &&
-			endY != null
-		) {
-			ctx.font = `600 11px ${fontFamily}`;
-			ctx.fillStyle = color.text;
-			ctx.textAlign = "left";
+				if (this.dayHeight < TIME_SCALE_EVENT_THRESHOLD) {
+					earlier.setHours(0, 0, 0, 0);
+					later.setHours(23, 59, 59, 999);
+				} else {
+					earlier.setMinutes(Math.round(earlier.getMinutes() / 15) * 15, 0, 0);
+					later.setMinutes(Math.round(later.getMinutes() / 15) * 15, 0, 0);
+				}
 
-			// Use appropriate column based on which edge is closer
-			const labelColX = useStartEdge ? firstColX : lastColX;
-
-			if (isShortEvent) {
-				// For short events, display label below the event on the edge closest to cursor
-				const labelY = useStartEdge ? startY : endY;
-				const labelBgY = labelY + 6;
-				const labelTextY = labelY + 10;
-
-				// Draw background pill
-				const textWidth = ctx.measureText(label).width;
-				const bgPaddingX = 6;
-				const bgElevated =
-					getComputedStyle(this).getPropertyValue("--bg-elevated").trim() ||
-					"rgba(0, 0, 0, 0.8)";
-				ctx.fillStyle = bgElevated;
-				ctx.beginPath();
-				ctx.roundRect(
-					labelColX + 4,
-					labelBgY,
-					textWidth + bgPaddingX * 2,
-					16,
-					4,
-				);
-				ctx.fill();
+				let fill: string;
+				let stroke: string;
+				if (this.activeCalendarColor) {
+					const rgb = hexToRgb(this.activeCalendarColor);
+					fill = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`;
+					stroke = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.8)`;
+				} else {
+					const accent =
+						getComputedStyle(this)
+							.getPropertyValue("--accent-primary")
+							.trim() || "rgb(100, 150, 255)";
+					fill = accent.replace("rgb", "rgba").replace(")", ", 0.3)");
+					stroke = accent.replace("rgb", "rgba").replace(")", ", 0.8)");
+				}
 
-				// Draw text
-				ctx.fillStyle = "white";
-				ctx.textBaseline = "top";
-				ctx.fillText(label, labelColX + 4 + bgPaddingX, labelTextY);
-			} else {
-				// For longer events, display label inside the event on the edge closest to cursor
-				ctx.textBaseline = "top";
-				const labelY = useStartEdge ? startY + 4 : endY - 18;
-				ctx.fillText(label, labelColX + 8, labelY);
+				previews.push({
+					id: "creation-preview",
+					start: earlier,
+					end: later,
+					color: { fill, stroke, text: "white", dashed: true },
+				});
 			}
 		}
+
+		return previews;
 	}
 
 	renderDateLabels(): void {
@@ -3770,11 +4134,12 @@ export class CalendarViewElement extends LitElement {
 
 		ctx.clearRect(0, 0, width, height);
 
-		const dayWidth = width / this._columnsPerRow;
+		const dayWidth = this.getDayWidth();
 		const scrollTop = this.scrollTop;
+		const scrollLeft = this.scrollLeft;
 		const fontFamily = getComputedStyle(this).fontFamily;
 
-		ctx.font = `600 10px ${fontFamily}`;
+		ctx.font = `600 12px ${fontFamily}`;
 		const textSecondary =
 			getComputedStyle(this).getPropertyValue("--text-secondary").trim() ||
 			"rgba(255, 255, 255, 0.6)";
@@ -3792,7 +4157,7 @@ export class CalendarViewElement extends LitElement {
 				if (!day) continue;
 
 				const { row, col } = this.getDayVisualPosition(dayIndex);
-				const x = col * dayWidth;
+				const x = col * dayWidth - scrollLeft;
 				const dayTop = week.yOffset + row * this.dayHeight - scrollTop;
 				const dayBottom = dayTop + this.dayHeight;
 
@@ -3831,6 +4196,8 @@ export class CalendarViewElement extends LitElement {
 				}
 			}
 		}
+
+		this.renderMonthLabels(ctx, width, height, fontFamily);
 	}
 
 	renderWeekdayLabels(
@@ -3851,57 +4218,41 @@ export class CalendarViewElement extends LitElement {
 			getComputedStyle(this).getPropertyValue("--bg-primary").trim() ||
 			"rgba(30, 30, 30, 0.9)";
 
-		ctx.font = `500 12px ${fontFamily}`;
+		ctx.font = `600 12px ${fontFamily}`;
 		ctx.textAlign = "center";
 		ctx.textBaseline = "top";
 
 		const labelHeight = 16;
-		const labelY = 12; // Below month label
+		const labelY = 48; // Below sticky month label
 
-		// Find the first visible visual row
-		const firstWeek = visibleWeeks[0];
-		if (!firstWeek) return;
+		const stickyY = labelY;
 
-		// Determine which visual rows are visible
-		for (let row = 0; row < this.rowsPerWeek; row++) {
-			const rowTop = firstWeek.yOffset + row * this.dayHeight - scrollTop;
-			const rowBottom = rowTop + this.dayHeight;
+		for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+			const dayName = weekdayNames[dayIndex];
+			if (!dayName) continue;
 
-			// Check if this visual row is visible
-			if (rowBottom < 0 || rowTop > height) continue;
+			const x =
+				LEFT_GUTTER_WIDTH +
+				dayIndex * dayWidth +
+				dayWidth / 2 -
+				this.scrollLeft;
 
-			// Calculate sticky Y position - stays at top but doesn't go past row bottom
-			const stickyY = Math.min(labelY, rowBottom - labelHeight - 2);
-			if (stickyY < 0) continue;
-
-			// Draw weekday labels for each column in this visual row
-			for (let col = 0; col < this._columnsPerRow; col++) {
-				const dayIndex = row * this._columnsPerRow + col;
-				if (dayIndex >= 7) continue;
-				const dayName = weekdayNames[dayIndex];
-				if (!dayName) continue;
-
-				const x = LEFT_GUTTER_WIDTH + col * dayWidth + dayWidth / 2;
-
-				// Draw background pill
-				const textWidth = ctx.measureText(dayName).width;
-				const bgPaddingX = 6;
-				const bgPaddingY = 2;
-				ctx.fillStyle = bgPrimary;
-				ctx.beginPath();
-				ctx.roundRect(
-					x - textWidth / 2 - bgPaddingX,
-					stickyY,
-					textWidth + bgPaddingX * 2,
-					labelHeight,
-					4,
-				);
-				ctx.fill();
+			const textWidth = ctx.measureText(dayName).width;
+			const bgPaddingX = 6;
+			const bgPaddingY = 2;
+			ctx.fillStyle = bgPrimary;
+			ctx.beginPath();
+			ctx.roundRect(
+				x - textWidth / 2 - bgPaddingX,
+				stickyY,
+				textWidth + bgPaddingX * 2,
+				labelHeight,
+				4,
+			);
+			ctx.fill();
 
-				// Draw text
-				ctx.fillStyle = textMuted;
-				ctx.fillText(dayName, x, stickyY + bgPaddingY + 1);
-			}
+			ctx.fillStyle = textMuted;
+			ctx.fillText(dayName, x, stickyY + bgPaddingY + 1);
 		}
 	}
 
@@ -4099,9 +4450,7 @@ export class CalendarViewElement extends LitElement {
 	): Date | null {
 		if (!this.scrollContainer) return null;
 
-		const rect = this.scrollContainer.getBoundingClientRect();
-		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / this._columnsPerRow;
+		const dayWidth = this.getDayWidth();
 
 		// Check if X is in the calendar grid area
 		if (x < LEFT_GUTTER_WIDTH) return null;
@@ -4109,7 +4458,7 @@ export class CalendarViewElement extends LitElement {
 		const col = Math.max(
 			0,
 			Math.min(
-				this._columnsPerRow - 1,
+				this.columnsPerRow - 1,
 				Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth),
 			),
 		);
@@ -4123,7 +4472,7 @@ export class CalendarViewElement extends LitElement {
 
 		// Calculate which visual row within the week
 		const rowInWeek = Math.floor((y - week.yOffset) / this.dayHeight);
-		const dayIndex = rowInWeek * this._columnsPerRow + col;
+		const dayIndex = rowInWeek * this.columnsPerRow + col;
 
 		if (dayIndex < 0 || dayIndex > 6) return null;
 
@@ -4153,9 +4502,7 @@ export class CalendarViewElement extends LitElement {
 	convertDateTimeToPosition(date: Date): { x: number; y: number } | null {
 		if (!this.scrollContainer) return null;
 
-		const rect = this.scrollContainer.getBoundingClientRect();
-		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / this._columnsPerRow;
+		const dayWidth = this.getDayWidth();
 
 		// Find the week that contains this date
 		const dateStr = date.toDateString();
@@ -4416,17 +4763,20 @@ export class CalendarViewElement extends LitElement {
 			? this.descriptionSummaryText
 			: "";
 		const isSummaryLoading =
-			useDescriptionSummary && hasSummaryStateForCurrentEvent && this.descriptionSummaryLoading;
+			useDescriptionSummary &&
+			hasSummaryStateForCurrentEvent &&
+			this.descriptionSummaryLoading;
 		const shouldRenderSummary =
 			useDescriptionSummary && hasSummaryStateForCurrentEvent;
 		const descriptionToRender = shouldRenderSummary
-			? streamedSummaryText || (isSummaryLoading ? "Generating summary..." : eventDescriptionText)
+			? streamedSummaryText ||
+			  (isSummaryLoading ? "Generating summary..." : eventDescriptionText)
 			: eventDescriptionText;
 		const summarizeButtonLabel = isSummaryLoading
 			? "Summarizing..."
 			: shouldRenderSummary
-				? "Summarize again"
-				: "Summarize";
+			  ? "Summarize again"
+			  : "Summarize";
 
 		const formatDate = (date: Date) => {
 			return new Intl.DateTimeFormat(this.locale, {
@@ -4573,7 +4923,9 @@ export class CalendarViewElement extends LitElement {
 
         <div class="event-detail-body">
           ${(() => {
-						const teamsMatch = eventDescription?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/);
+						const teamsMatch = eventDescription?.match(
+							/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/,
+						);
 						const teamsUrl = teamsMatch ? teamsMatch[0] : null;
 						if (!event.location && !teamsUrl) return null;
 						return html`
@@ -4581,7 +4933,11 @@ export class CalendarViewElement extends LitElement {
                 <div class="event-detail-label">Location</div>
                 <div class="event-detail-value">
                   ${event.location ? html`<div>${event.location}</div>` : null}
-                  ${teamsUrl ? html`<a href="${teamsUrl}" class="event-detail-link" target="_blank" rel="noopener">Join Microsoft Teams Meeting</a>` : null}
+                  ${
+										teamsUrl
+											? html`<a href="${teamsUrl}" class="event-detail-link" target="_blank" rel="noopener">Join Microsoft Teams Meeting</a>`
+											: null
+									}
                 </div>
               </div>
             `;
@@ -4677,7 +5033,7 @@ export class CalendarViewElement extends LitElement {
 
           ${
 						useDescriptionSummary
-								? html`
+							? html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <div class="event-detail-description ${
@@ -4688,21 +5044,24 @@ export class CalendarViewElement extends LitElement {
                   <pre class="event-detail-value">${descriptionToRender}</pre>
                 </div>
                 ${
-										shouldRenderSummary && this.descriptionSummaryError
-											? html`<div class="event-detail-value" style="opacity: 0.7;">Summary unavailable: ${this.descriptionSummaryError}. Showing original description.</div>`
-											: null
-									}
+									shouldRenderSummary && this.descriptionSummaryError
+										? html`<div class="event-detail-value" style="opacity: 0.7;">Summary unavailable: ${this.descriptionSummaryError}. Showing original description.</div>`
+										: null
+								}
                 <div class="description-actions">
                   ${
 										!shouldRenderSummary
 											? html`<button
                         class="description-see-more"
                         @click=${() => {
-													this.isDescriptionExpanded = !this.isDescriptionExpanded;
+													this.isDescriptionExpanded =
+														!this.isDescriptionExpanded;
 													this.requestUpdate();
 												}}
                       >
-                        ${this.isDescriptionExpanded ? "Show less" : "Show more"}
+                        ${
+													this.isDescriptionExpanded ? "Show less" : "Show more"
+												}
                       </button>`
 											: null
 									}
@@ -4719,36 +5078,36 @@ export class CalendarViewElement extends LitElement {
 							: event.readOnly ||
 								  (event.organizer != null &&
 										!this.currentUserEmails.has(event.organizer.email))
-								? eventDescription
+							  ? eventDescription
 									? html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <div class="event-detail-description ${
-										this.isDescriptionExpanded ? "expanded" : ""
-									}">
+									this.isDescriptionExpanded ? "expanded" : ""
+								}">
                   <pre class="event-detail-value">${descriptionToRender}</pre>
                 </div>
                 ${
-										eventDescription.length > 300 ||
-										eventDescription.split("\n").length > 8
-											? html`
+									eventDescription.length > 300 ||
+									eventDescription.split("\n").length > 8
+										? html`
                     <button
                       class="description-see-more"
                       @click=${() => {
-													this.isDescriptionExpanded =
-														!this.isDescriptionExpanded;
-													this.requestUpdate();
-												}}
+												this.isDescriptionExpanded =
+													!this.isDescriptionExpanded;
+												this.requestUpdate();
+											}}
                     >
                       ${this.isDescriptionExpanded ? "See less" : "See more"}
                     </button>
                   `
-											: null
-									}
+										: null
+								}
               </div>
             `
 									: null
-								: html`
+							  : html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <textarea
@@ -4872,7 +5231,9 @@ export class CalendarViewElement extends LitElement {
               @mousedown=${this.onCanvasMouseDown}
               @mousemove=${this.onScrollContainerMouseMove}
             >
-              <div class="scroll-content" style="height: ${this.totalHeight}px;">
+              <div class="scroll-content" style="height: ${
+								this.totalHeight
+							}px; width: ${this.getContentWidth()}px;">
               </div>
               ${this.renderSelection()}
             </div>
@@ -4886,27 +5247,42 @@ export class CalendarViewElement extends LitElement {
             <div class="toolbar">
                 <div class="toolbar-left">
                 <button class="toolbar-button" title="Month" @click=${
-    							this.scrollToMonth
-    						}>
+									this.scrollToMonth
+								}>
                     Month
                 </button>
                 <button class="toolbar-button" title="Today" @click=${
-    							this.scrollToToday
-    						}>
+									this.scrollToToday
+								}>
                     Today
                 </button>
                 <button ?disabled=${
-    							this.historyStack.length === 0 ||
-    							this.historyIndex >= this.historyStack.length - 1
-    						} class="toolbar-button" title="Back" @click=${this.goBack}>
+									this.historyStack.length === 0 ||
+									this.historyIndex >= this.historyStack.length - 1
+								} class="toolbar-button" title="Back" @click=${this.goBack}>
                     ←
                 </button>
                 <button ?disabled=${
-    							this.historyStack.length === 0 || this.historyIndex === 0
-    						} class="toolbar-button" title="Forward" @click=${this.goForward}>
+									this.historyStack.length === 0 || this.historyIndex === 0
+								} class="toolbar-button" title="Forward" @click=${
+									this.goForward
+								}>
                     →
                 </button>
                 <div class="toolbar-zoom">
+                    <span class="toolbar-slider-label">Width</span>
+                    <input
+                    type="range"
+                    class="toolbar-zoom-slider"
+                    min="${MIN_DAY_COLUMN_WIDTH}"
+                    max="${MAX_DAY_COLUMN_WIDTH}"
+                    .value=${this.minDayColumnWidth}
+                    @input=${this.onDayColumnWidthSliderChange}
+                    title="Adjust minimum day column width"
+                    />
+                </div>
+                <div class="toolbar-zoom">
+                    <span class="toolbar-slider-label">Zoom</span>
                     <input
                     type="range"
                     class="toolbar-zoom-slider"
@@ -4927,9 +5303,9 @@ export class CalendarViewElement extends LitElement {
                     title="Select theme"
                 >
                     ${availableThemes.map(
-    								(theme) =>
-    									html`<option value="${theme.name}">${theme.label}</option>`,
-    							)}
+											(theme) =>
+												html`<option value="${theme.name}">${theme.label}</option>`,
+										)}
                 </select>-->
                 <div class="toolbar-search">
                     <span class="toolbar-search-icon">🔍</span>