@luckydye/calendar 1.2.3 → 1.3.1

package/src/CalendarView.ts

@@ -3,7 +3,6 @@ import {
 	type Attendee,
 	type CalendarEvent,
 	CalendarInternal,
-	type EventSegment,
 	type WeekInfo,
 	NOTIFICATION_PRESETS,
 } from "./CalendarInternal.js";
@@ -19,12 +18,15 @@ import { serializeEventsToICal } from "./ICal.js";
 import { queueStatus } from "./StatusMessage.js";
 import type { StatusBarData } from "./StatusBar.js";
 import { IndexedDBStorage } from "./IndexedDBStorage.js";
+import { TIME_SCALE_DAY_HEIGHT, type CalendarLayer, type LayerContext } from "./CalendarLayer.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 = 100;
+const MIN_DAY_HEIGHT = 50;
 const MAX_DAY_HEIGHT = 3000; // 1px per minute
 const LEFT_GUTTER_WIDTH = 60;
 const MINIMAP_WIDTH = 12;
-const MIN_EVENT_HEIGHT = 20;
 
 export class CalendarViewElement extends LitElement {
 	static styles = css`
@@ -55,31 +57,24 @@ export class CalendarViewElement extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 8px 10px;
-      background: var(--bg-secondary, rgba(36, 36, 38, 0.5));
-      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      background: var(--bg-primary, rgb(30, 30, 30));
       flex-shrink: 0;
       gap: 16px;
       position: absolute;
-      bottom: .25rem;
-      left: .5rem;
-      right: 0.5rem;
+      bottom: 0;
+      left: 0;
+      right: 0;
       z-index: 100;
-      border-radius: var(--border-radius-lg, 8px);
-      overflow: hidden;
-      
-      --backdrop-padding: 30px;
-      --backdrop-size: 42px;
     }
 
     .toolbar::before {
       content: '';
-      width: 100%;
       position: absolute;
-      top: calc(var(--backdrop-padding) * -1);
       left: 0;
-      bottom: calc(var(--backdrop-padding) * -1);
-      backdrop-filter: blur(var(--backdrop-size));
-      z-index: -1;
+      right: 0;
+      bottom: 100%;
+      height: 48px;
+      background: linear-gradient(to bottom, transparent, var(--bg-primary, rgb(30, 30, 30)));
       pointer-events: none;
     }
 
@@ -460,13 +455,14 @@ export class CalendarViewElement extends LitElement {
       flex-direction: column;
       min-width: 0;
       max-height: 550px;
+      border-radius: var(--border-radius-lg, 8px);
+      overflow: hidden;
     }
 
     .event-detail-footer {
       border-top: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
       padding: 12px 16px;
       background: var(--bg-elevated, rgba(20, 20, 20, 0.95));
-      border-radius: 0 0 var(--border-radius-lg, 8px) 0;
     }
 
     .invite-response-buttons {
@@ -860,6 +856,14 @@ export class CalendarViewElement extends LitElement {
 	minimapBufferCanvas: HTMLCanvasElement | null = null;
 	minimapBufferCtx: CanvasRenderingContext2D | null = null;
 	stripePatternCanvas: HTMLCanvasElement | null = null;
+	layers: CalendarLayer[] = [];
+	eventsLayer: ReturnType<typeof createEventsLayer> | null = null;
+	heatmapEvents: CalendarEvent[] = [];
+	heatmapRange: { start: Date; end: Date } | null = null;
+	heatmapQueryKey: string | null = null;
+	heatmapQueryToken = 0;
+	timeseriesSourceIds: Set<string> = new Set();
+	timeseriesSourceCacheKey: string | null = null;
 	scrollContainer: HTMLElement | null = null;
 	scrollContent: HTMLElement | null = null;
 	resizeObserver: ResizeObserver | null = null;
@@ -881,9 +885,12 @@ export class CalendarViewElement extends LitElement {
 	cursorPosition: { x: number; y: number } | null = null; // Mouse position in calendar coordinates
 	animationFrame: number | null = null;
 	isDraggingMinimap = false;
+	altKeyActive = false; // Tracks if alt/meta key is held (bypasses event interaction)
 	isFiltered = false; // Tracks if filter is currently active
 	timeUpdateInterval: ReturnType<typeof setInterval> | null = null;
 	isExtendingRange = false; // Prevents concurrent range extensions
+	boundaryCheckInterval: ReturnType<typeof setInterval> | null = null;
+	lastWheelTime = 0; // Timestamp of last wheel event, used to distinguish wheel vs scrollbar drag
 	isCreatingEvent = false;
 	eventCreationStart: { x: number; y: number } | null = null;
 	eventCreationEnd: { x: number; y: number } | null = null;
@@ -998,6 +1005,7 @@ export class CalendarViewElement extends LitElement {
 	currentTheme: ThemeName = loadThemePreference();
 
 	activeCalendarColor: string | null = null;
+	activeCalendarId: string | null = null;
 
 	get filter() {
 		return this.internal.getFilter();
@@ -1308,6 +1316,8 @@ export class CalendarViewElement extends LitElement {
 		window.addEventListener("mousemove", this.onMouseMove);
 		window.addEventListener("mouseup", this.onMouseUp);
 		window.addEventListener("paste", this.onPaste);
+		window.addEventListener("keydown", this.onKeyDown);
+		window.addEventListener("keyup", this.onKeyUp);
 	}
 
 	disconnectedCallback() {
@@ -1316,6 +1326,8 @@ export class CalendarViewElement extends LitElement {
 		window.removeEventListener("mousemove", this.onMouseMove);
 		window.removeEventListener("mouseup", this.onMouseUp);
 		window.removeEventListener("paste", this.onPaste);
+		window.removeEventListener("keydown", this.onKeyDown);
+		window.removeEventListener("keyup", this.onKeyUp);
 
 		if (this.scrollContainer) {
 			this.scrollContainer.removeEventListener(
@@ -1332,6 +1344,9 @@ export class CalendarViewElement extends LitElement {
 		if (this.timeUpdateInterval) {
 			clearInterval(this.timeUpdateInterval);
 		}
+		if (this.boundaryCheckInterval) {
+			clearInterval(this.boundaryCheckInterval);
+		}
 	}
 
 	onScrollContainerMouseLeave = (): void => {
@@ -1373,6 +1388,24 @@ export class CalendarViewElement extends LitElement {
 		this.minimapBufferCanvas = document.createElement("canvas");
 		this.minimapBufferCtx = this.minimapBufferCanvas.getContext("2d");
 
+		const self = this;
+		const eventsState: EventsState = {
+			get events() { return self.events; },
+			get hoveredEventId() { return self.hoveredEventId; },
+			isEventSelected: (event) => self.internal.isEventSelected(event),
+			shouldRenderEventWithStripes: (event) => self.shouldRenderEventWithStripes(event),
+			getStripePatternCanvas: () => self.getStripePatternCanvas(),
+		};
+		const heatmapState = {
+			get events() { return self.heatmapEvents; },
+		};
+		this.eventsLayer = createEventsLayer(eventsState);
+		this.layers = [
+			createGridLayer(),
+			createTimeseriesHeatmapLayer(heatmapState),
+			this.eventsLayer,
+		];
+
 		this.weeks = this.internal.generateWeeks();
 
 		// Restore zoom level from localStorage
@@ -1405,13 +1438,48 @@ export class CalendarViewElement extends LitElement {
 			this.requestUpdate();
 		}, 10000);
 
+		// Extend range while stationary at the buffer boundary (no scroll events fire when idle)
+		this.boundaryCheckInterval = setInterval(() => {
+			this.checkAndExtendRange();
+		}, 500);
+
 		// Try to restore saved scroll position, otherwise scroll to today
 		this.loadScrollPosition();
 
 		let previousFilter = this.filter;
 
 		for await (const events of this.internal.events()) {
-			this.events = events;
+			const timeseriesIds = this.loadTimeseriesSourceIds();
+			let normalized = events;
+			if (timeseriesIds.size > 0) {
+				let needsClone = false;
+				for (const event of events) {
+					if (
+						event.visualStyle !== "heatmap" &&
+						event.sourceId &&
+						timeseriesIds.has(event.sourceId)
+					) {
+						needsClone = true;
+						break;
+					}
+				}
+				if (needsClone) {
+					normalized = events.map((event) => {
+						if (
+							event.visualStyle === "heatmap" ||
+							!event.sourceId ||
+							!timeseriesIds.has(event.sourceId)
+						) {
+							return event;
+						}
+						return { ...event, visualStyle: "heatmap" };
+					});
+				}
+			}
+			this.events = normalized;
+			if (this.heatmapRange) {
+				void this.refreshHeatmapEvents(true);
+			}
 
 			this.renderCanvas();
 
@@ -1554,6 +1622,101 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
+	resolveStyles(): Record<string, string> {
+		const cs = getComputedStyle(this);
+		const props = [
+			"--bg-today",
+			"--accent-current-time",
+			"--grid-color",
+			"--grid-color-strong",
+			"--grid-color-hover",
+			"--text-muted",
+			"--text-primary",
+			"--text-inverse",
+			"--bg-primary",
+			"--bg-elevated",
+		];
+		const styles: Record<string, string> = {};
+		for (const prop of props) {
+			styles[prop] = cs.getPropertyValue(prop).trim();
+		}
+		return styles;
+	}
+
+	private loadTimeseriesSourceIds(): Set<string> {
+		const saved = localStorage.getItem("caldav-sources") || "";
+		if (saved && saved === this.timeseriesSourceCacheKey) {
+			return this.timeseriesSourceIds;
+		}
+		const ids = new Set<string>();
+		if (saved) {
+			try {
+				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);
+					}
+				}
+			} catch {
+				// Ignore malformed storage
+			}
+		}
+		this.timeseriesSourceCacheKey = saved;
+		this.timeseriesSourceIds = ids;
+		return ids;
+	}
+
+	private updateHeatmapRange(visibleWeeks: WeekInfo[]): void {
+		if (visibleWeeks.length === 0) {
+			this.heatmapRange = null;
+			return;
+		}
+		const firstWeek = visibleWeeks[0]!;
+		const lastWeek = visibleWeeks[visibleWeeks.length - 1]!;
+		const startDay = firstWeek.days[0];
+		const endDay = lastWeek.days[6];
+		if (!startDay || !endDay) {
+			this.heatmapRange = null;
+			return;
+		}
+		const start = new Date(startDay);
+		start.setHours(0, 0, 0, 0);
+		const end = new Date(endDay);
+		end.setHours(23, 59, 59, 999);
+		this.heatmapRange = { start, end };
+	}
+
+	private async refreshHeatmapEvents(force = false): Promise<void> {
+		if (!this.heatmapRange) return;
+		const { start, end } = this.heatmapRange;
+		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}`;
+		if (!force && key === this.heatmapQueryKey) return;
+		this.heatmapQueryKey = key;
+
+		const token = ++this.heatmapQueryToken;
+		try {
+			let events: CalendarEvent[];
+			if (this.internal.storage) {
+				events = await this.internal.storage.queryEvents(start, end);
+			} else {
+				events = this.events;
+			}
+			if (token !== this.heatmapQueryToken) return;
+
+			const filtered = this.internal.filterEvents(events, this.filter);
+			this.heatmapEvents = filtered.filter((event) => {
+				if (event.visualStyle === "heatmap") return true;
+				return event.sourceId ? timeseriesIds.has(event.sourceId) : false;
+			});
+			this.renderCanvas();
+		} catch (error) {
+			console.warn("Failed to refresh heatmap events:", error);
+		}
+	}
+
 	renderCanvas(): void {
 		if (!this.ctx || !this.canvas || !this.scrollContainer) return;
 
@@ -1567,292 +1730,48 @@ export class CalendarViewElement extends LitElement {
 		const scrollTop = this.scrollTop;
 		const gridWidth = width - LEFT_GUTTER_WIDTH;
 		const dayWidth = gridWidth / this._columnsPerRow;
-		const today = new Date();
 
-		// Find visible weeks
 		const visibleWeeks = this.weeks.filter(
 			(w) =>
 				w.height > 0 &&
 				w.yOffset + w.height > scrollTop &&
 				w.yOffset < scrollTop + height,
 		);
+		this.updateHeatmapRange(visibleWeeks);
+		this.refreshHeatmapEvents();
+
+		const lc: LayerContext = {
+			ctx,
+			width,
+			height,
+			scrollTop,
+			dayWidth,
+			dayHeight: this.dayHeight,
+			leftGutterWidth: LEFT_GUTTER_WIDTH,
+			columnsPerRow: this._columnsPerRow,
+			rowsPerWeek: this.rowsPerWeek,
+			visibleWeeks,
+			allWeeks: this.weeks,
+			fontFamily,
+			styles: this.resolveStyles(),
+			getDayVisualPosition: (dayIndex) => this.getDayVisualPosition(dayIndex),
+			filter: this.filter,
+		};
 
-		// Draw today highlight and current time indicator
-		const showTimeScale = this.dayHeight >= 300;
-		for (const week of visibleWeeks) {
-			const todayIndex = week.days.findIndex((d) =>
-				CalendarInternal.isSameDay(d, today),
-			);
-			if (todayIndex >= 0) {
-				const { row, col } = this.getDayVisualPosition(todayIndex);
-				const x = LEFT_GUTTER_WIDTH + col * dayWidth;
-				const dayY = week.yOffset + row * this.dayHeight - scrollTop;
-				const bgToday =
-					getComputedStyle(this).getPropertyValue("--bg-today").trim() ||
-					"rgba(255, 255, 255, 0.05)";
-				ctx.fillStyle = bgToday;
-				ctx.fillRect(x, dayY, dayWidth, this.dayHeight);
-
-				if (showTimeScale) {
-					// Draw current time indicator line (zoomed in)
-					const now = new Date();
-					const currentMinutes = now.getHours() * 60 + now.getMinutes();
-					const timeY = dayY + (currentMinutes / 1440) * this.dayHeight;
-					if (timeY >= 0 && timeY <= height) {
-						const accentTime =
-							getComputedStyle(this)
-								.getPropertyValue("--accent-current-time")
-								.trim() || "rgba(255, 0, 0, 0.8)";
-						ctx.strokeStyle = accentTime;
-						ctx.lineWidth = 1;
-						ctx.beginPath();
-						ctx.moveTo(x, timeY);
-						ctx.lineTo(x + dayWidth, timeY);
-						ctx.stroke();
-						ctx.lineWidth = 1;
-					}
-				}
-			}
-		}
-
-		// Draw grid lines
-		ctx.strokeStyle =
-			getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-			"rgba(255, 255, 255, 0.1)";
-		ctx.lineWidth = 1;
-
-		// Vertical lines (day separators) - draw for each column
-		for (let i = 1; i <= this._columnsPerRow; i++) {
-			const x = LEFT_GUTTER_WIDTH + i * dayWidth;
-			ctx.beginPath();
-			ctx.moveTo(x, 0);
-			ctx.lineTo(x, height);
-			ctx.stroke();
+		for (const layer of this.layers) {
+			if (!layer.enabled) continue;
+			ctx.save();
+			layer.render(lc);
+			ctx.restore();
 		}
 
-		// Horizontal lines (week separators) and left gutter content
-		for (let i = 0; i < visibleWeeks.length; i++) {
-			const week = visibleWeeks[i];
-			if (!week) continue;
-			const y = week.yOffset - scrollTop;
-
-			// Draw gap indicator if there are hidden weeks before this one
-			if (this.filter && i > 0) {
-				const prevWeek = visibleWeeks[i - 1];
-				if (!prevWeek) continue;
-				const prevWeekIndex = this.weeks.indexOf(prevWeek);
-				const currentWeekIndex = this.weeks.indexOf(week);
-				const hiddenWeeks = currentWeekIndex - prevWeekIndex - 1;
-
-				if (hiddenWeeks > 0) {
-					// Draw gap indicator at the top of the current week
-					const gapY = y;
-
-					// Draw dashed line
-					const gridColorStrong =
-						getComputedStyle(this)
-							.getPropertyValue("--grid-color-strong")
-							.trim() || "rgba(255, 255, 255, 0.3)";
-					ctx.strokeStyle = gridColorStrong;
-					ctx.lineWidth = 1;
-					ctx.setLineDash([4, 4]);
-					ctx.beginPath();
-					ctx.moveTo(LEFT_GUTTER_WIDTH, gapY);
-					ctx.lineTo(width, gapY);
-					ctx.stroke();
-					ctx.setLineDash([]);
-
-					// Draw ellipsis in the center
-					const textMuted =
-						getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-						"rgba(255, 255, 255, 0.4)";
-					ctx.fillStyle = textMuted;
-					ctx.textAlign = "center";
-					const ellipsisText = `⋯ ${hiddenWeeks} week${
-						hiddenWeeks > 1 ? "s" : ""
-					}`;
-
-					// Draw background pill for the ellipsis
-					const textWidth = ctx.measureText(ellipsisText).width;
-					const pillPadding = 8;
-					const pillX =
-						(LEFT_GUTTER_WIDTH + width) / 2 - textWidth / 2 - pillPadding;
-					const pillY = gapY - 8;
-					const pillWidth = textWidth + pillPadding * 2;
-					const pillHeight = 16;
-
-					const bgPrimary =
-						getComputedStyle(this).getPropertyValue("--bg-primary").trim() ||
-						"rgba(30, 30, 30, 0.9)";
-					ctx.fillStyle = bgPrimary;
-					ctx.beginPath();
-					ctx.roundRect(pillX, pillY, pillWidth, pillHeight, 8);
-					ctx.fill();
-
-					ctx.fillStyle = textMuted;
-					ctx.fillText(ellipsisText, (LEFT_GUTTER_WIDTH + width) / 2, gapY + 4);
-				}
-			}
-
-			// Week separator line
-			ctx.strokeStyle =
-				getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-				"rgba(255, 255, 255, 0.1)";
-			ctx.beginPath();
-			ctx.moveTo(LEFT_GUTTER_WIDTH, y);
-			ctx.lineTo(width, y);
-			ctx.stroke();
-
-			// Draw horizontal lines between visual rows within this week
-			for (let row = 1; row < this.rowsPerWeek; row++) {
-				const rowY = y + row * this.dayHeight;
-				if (rowY >= 0 && rowY <= height) {
-					ctx.beginPath();
-					ctx.moveTo(LEFT_GUTTER_WIDTH, rowY);
-					ctx.lineTo(width, rowY);
-					ctx.stroke();
-				}
-			}
-
-			// Left gutter: week number and time scale
-			const hourLabelOpacity = Math.max(
-				0,
-				Math.min(1, (this.dayHeight - 300) / 300),
-			);
-
-			ctx.font = `500 11px ${fontFamily}`;
-			ctx.textBaseline = "bottom";
-			ctx.textAlign = "right";
-
-			// Draw hourly lines and labels for each visual row
-			const gridColor =
-				getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
-				"rgba(255, 255, 255, 0.1)";
-			const textMuted =
-				getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-				"rgba(255, 255, 255, 0.4)";
-			ctx.strokeStyle = gridColor.replace(
-				/[\d.]+\)$/,
-				`${0.05 * hourLabelOpacity})`,
-			);
-
-			// Calculate opacity for hour labels based on zoom level
-			// Fade in as we zoom in from 200px to 400px
-			ctx.fillStyle = textMuted.replace(
-				/[\d.]+\)$/,
-				`${0.4 * hourLabelOpacity})`,
-			);
-
-			for (let row = 0; row < this.rowsPerWeek; row++) {
-				const rowY = y + row * this.dayHeight;
-				for (let hour = 0; hour < 24; hour++) {
-					const hourY = rowY + (hour / 24) * this.dayHeight;
-					if (hourY >= 0 && hourY <= height) {
-						// Hour line
-						ctx.beginPath();
-						ctx.moveTo(LEFT_GUTTER_WIDTH, hourY);
-						ctx.lineTo(width, hourY);
-						ctx.stroke();
-
-						// Hour label (only draw if opacity is significant)
-						if (hourLabelOpacity > 0.1) {
-							const label = `${hour.toString().padStart(2, "0")}:00`;
-							ctx.fillText(label, 48, hourY + 4);
-						}
-					}
-				}
-			}
-
-			// Draw current time indicator in left gutter (only when timescale is visible and today is in this week)
-			if (hourLabelOpacity > 0.1) {
-				const today = new Date();
-				const todayIndex = week.days.findIndex((d) =>
-					CalendarInternal.isSameDay(d, today),
-				);
-
-				if (todayIndex >= 0) {
-					const { row } = this.getDayVisualPosition(todayIndex);
-					const currentMinutes = today.getHours() * 60 + today.getMinutes();
-					const timeY =
-						y + row * this.dayHeight + (currentMinutes / 1440) * this.dayHeight;
-
-					if (timeY >= 0 && timeY <= height) {
-						const hours = today.getHours().toString().padStart(2, "0");
-						const minutes = today.getMinutes().toString().padStart(2, "0");
-						const timeText = `${hours}:${minutes}`;
-
-						ctx.save();
-						ctx.textAlign = "right";
-						ctx.textBaseline = "middle";
-
-						const textWidth = ctx.measureText(timeText).width;
-						const bgPaddingX = 6;
-						const bgPaddingY = 3;
-						const textX = 48;
-						const textY = timeY;
-
-						// Draw background pill
-						const bgElevated =
-							getComputedStyle(this).getPropertyValue("--bg-elevated").trim() ||
-							"rgba(0, 0, 0, 0.7)";
-						ctx.fillStyle = bgElevated;
-						ctx.beginPath();
-						ctx.roundRect(
-							textX - textWidth - bgPaddingX,
-							textY - 8,
-							textWidth + bgPaddingX * 2,
-							16,
-							4,
-						);
-						ctx.fill();
-
-						// Draw current time text in white
-						ctx.fillStyle =
-							getComputedStyle(this)
-								.getPropertyValue("--text-primary")
-								.trim() || "rgba(255, 255, 255, 1)";
-						ctx.fillText(timeText, textX, textY);
-						ctx.restore();
-					}
-				}
-			}
-
-			// Draw week number - sticky within visible portion of week
-			// Fade out week numbers as we zoom in from 150px to 200px
-			const weekNumberOpacity = Math.max(
-				0,
-				Math.min(1, 1 - (this.dayHeight - 300) / 50),
-			);
-			const textMutedForWeek =
-				getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
-				"rgba(255, 255, 255, 0.4)";
-			ctx.fillStyle = textMutedForWeek.replace(
-				/[\d.]+\)$/,
-				`${0.4 * weekNumberOpacity})`,
-			);
-			ctx.textAlign = "center";
-			const label = `W${week.weekNumber}`;
-			const weekTop = y;
-			const weekBottom = y + week.height;
-			// Clamp label to be visible: at least 14px from top of viewport,
-			// but within the week's bounds
-			const labelY = Math.max(
-				14,
-				Math.min(weekTop + week.height / 2 + 4, weekBottom - 4),
-			);
-			// Only draw if the label position is within the week's visible area and viewport and opacity is significant
-			if (
-				labelY >= Math.max(0, weekTop + 4) &&
-				labelY <= Math.min(height, weekBottom) &&
-				weekNumberOpacity > 0.1
-			) {
-				ctx.fillText(label, 30, labelY);
-			}
+		// Copy event rects from events layer for hit-testing
+		if (this.eventsLayer) {
+			this.eventRects = this.eventsLayer.eventRects;
+		} else {
+			this.eventRects = [];
 		}
 
-		// Render events on canvas
-		this.renderEventsOnCanvas(ctx, scrollTop, height, dayWidth, visibleWeeks);
-
 		this.renderDateLabels();
 
 		// Draw sticky weekday labels at top of viewport
@@ -1868,808 +1787,17 @@ export class CalendarViewElement extends LitElement {
 		this.renderMinimap();
 	}
 
-	renderEventsOnCanvas(
-		ctx: CanvasRenderingContext2D,
-		scrollTop: number,
-		height: number,
-		dayWidth: number,
-		visibleWeeks: WeekInfo[],
-	): void {
-		const events = this.events;
-		const fontFamily = getComputedStyle(this).fontFamily;
-		const viewportBottom = scrollTop + height;
-		const showTimeScale = this.dayHeight >= 300;
-
-		// Clear event rects for new render
-		this.eventRects = [];
-
-		if (visibleWeeks.length === 0) return;
-
-		// Compute visible date range
-		const firstVisibleWeek = visibleWeeks[0]!;
-		const lastVisibleWeek = visibleWeeks[visibleWeeks.length - 1]!;
-		const firstVisibleDay = firstVisibleWeek.days[0]!;
-		const lastVisibleDay = lastVisibleWeek.days[6]!;
-		const visibleStartTime = firstVisibleDay.getTime();
-		const visibleEndTime = lastVisibleDay.getTime() + 86400000 - 1;
-
-		// Track occupied row slots per day-column for stacking
-		const dayOccupiedRows = new Map<string, Set<number>>();
-		const eventRowIndex = new Map<string, number>();
-
-		const segments: EventSegment[] = [];
-
-		// Build segments - separate all-day and timed events
-		const allDaySegments: EventSegment[] = [];
-		const timedSegments: EventSegment[] = [];
-
-		for (const event of events) {
-			const eventStartTime = event.start.getTime();
-			const eventEndTime = event.end.getTime();
-
-			if (eventEndTime < visibleStartTime || eventStartTime > visibleEndTime)
-				continue;
-
-			// Only iterate through visible weeks
-			const eventWeeks: { weekIndex: number; week: WeekInfo }[] = [];
-
-			for (const week of visibleWeeks) {
-				const weekStartDay = week.days[0];
-				const weekEndDay = week.days[6];
-				if (!weekStartDay || !weekEndDay) continue;
-
-				const weekStart = weekStartDay.getTime();
-				const weekEnd = weekEndDay.getTime() + 86399999;
-
-				if (eventEndTime >= weekStart && eventStartTime <= weekEnd) {
-					const weekIndex = this.weeks.indexOf(week);
-					eventWeeks.push({ weekIndex, week });
-				}
-			}
-
-			const totalWeeks = eventWeeks.length;
-			const isAllDay = event.isAllDay === true;
-
-			for (let i = 0; i < eventWeeks.length; i++) {
-				const { weekIndex, week } = eventWeeks[i]!;
-
-				const isStart = i === 0;
-				const isEnd = i === eventWeeks.length - 1;
-
-				let startDayIndex = 0;
-				let endDayIndex = 6;
-
-				if (isStart) {
-					startDayIndex = getDayIndexInWeek(week, event.start);
-				}
-				if (isEnd) {
-					// For all-day events, the end date is exclusive (e.g., Monday event ends Tuesday 00:00)
-					// Subtract 1ms to get the actual last day
-					const effectiveEnd = isAllDay
-						? new Date(event.end.getTime() - 1)
-						: event.end;
-					endDayIndex = getDayIndexInWeek(week, effectiveEnd);
-				}
-
-				const segment = {
-					event,
-					weekIndex,
-					week,
-					startDayIndex,
-					endDayIndex,
-					isStart,
-					isEnd,
-					totalWeeks,
-				};
-
-				if (isAllDay) {
-					allDaySegments.push(segment);
-				} else {
-					timedSegments.push(segment);
-				}
-			}
-		}
-
-		// In timescale mode, split multi-day timed segments into per-day sub-segments
-		// so each day renders its own block with correct time positions (like renderVirtualEvent).
-		const renderedTimedSegments = showTimeScale
-			? timedSegments.flatMap((seg) => {
-					if (seg.startDayIndex === seg.endDayIndex) return [seg];
-					const result = [];
-					for (let d = seg.startDayIndex; d <= seg.endDayIndex; d++) {
-						result.push({
-							...seg,
-							startDayIndex: d,
-							endDayIndex: d,
-							isStart: d === seg.startDayIndex && seg.isStart,
-							isEnd: d === seg.endDayIndex && seg.isEnd,
-							totalWeeks: 1,
-						});
-					}
-					return result;
-			  })
-			: timedSegments;
-
-		// Combine segments with all-day events first (so they get top rows)
-		segments.push(...allDaySegments, ...renderedTimedSegments);
-
-		// Calculate columns for overlapping events in time scale mode
-		interface EventLayout {
-			segment: EventSegment;
-			yStart: number;
-			yEnd: number;
-			column: number;
-			totalColumns: number;
-		}
-		const eventLayouts: EventLayout[] = [];
-
-		// Group segments by week and day for overlap detection
-		const segmentsByWeekDay = new Map<string, EventSegment[]>();
-		for (const segment of segments) {
-			const allDay = segment.event.isAllDay === true;
-
-			// Only do column layout for time-scaled non-all-day events
-			if (showTimeScale && !allDay) {
-				// For multi-day events in time scale, each day gets its own column calculation
-				for (
-					let dayIdx = segment.startDayIndex;
-					dayIdx <= segment.endDayIndex;
-					dayIdx++
-				) {
-					const key = `${segment.weekIndex}-${dayIdx}`;
-					if (!segmentsByWeekDay.has(key)) {
-						segmentsByWeekDay.set(key, []);
-					}
-					segmentsByWeekDay.get(key)!.push(segment);
-				}
-			}
-		}
-
-		// Calculate column assignments for each day's overlapping events
-		const segmentColumns = new Map<
-			string,
-			{ column: number; totalColumns: number }
-		>();
-
-		for (const [dayKey, daySegments] of segmentsByWeekDay) {
-			const [weekIndexStr, dayIndexStr] = dayKey.split("-");
-			const dayIndex = parseInt(dayIndexStr!);
-			const weekIndex = parseInt(weekIndexStr!);
-
-			// Calculate time ranges for each segment in this day
-			interface SegmentTime {
-				segment: EventSegment;
-				startMinutes: number;
-				endMinutes: number;
-			}
-			const segmentTimes: SegmentTime[] = [];
-
-			for (const seg of daySegments) {
-				const week = this.weeks[weekIndex];
-				if (!week) continue;
-
-				const dayStartTime = new Date(week.days[dayIndex]!).setHours(
-					0,
-					0,
-					0,
-					0,
-				);
-				const dayEndTime = new Date(week.days[dayIndex]!).setHours(
-					23,
-					59,
-					59,
-					999,
-				);
-				const eventStartTime = seg.event.start.getTime();
-				const eventEndTime = seg.event.end.getTime() - 60000; // Subtract 1 minute for rendering
-
-				const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
-				const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
-
-				const effectiveStart = new Date(effectiveStartTime);
-				const effectiveEnd = new Date(effectiveEndTime);
-
-				const startMinutes =
-					effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
-				const endMinutes =
-					effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
-
-				segmentTimes.push({ segment: seg, startMinutes, endMinutes });
-			}
-
-			// Sort by start time, then by duration (longer first)
-			segmentTimes.sort((a, b) => {
-				if (a.startMinutes !== b.startMinutes)
-					return a.startMinutes - b.startMinutes;
-				return b.endMinutes - b.startMinutes - (a.endMinutes - a.startMinutes);
-			});
-
-			// Assign columns using a greedy algorithm
-			const columns: { endMinutes: number }[] = [];
-
-			for (const st of segmentTimes) {
-				// Find the first column where this event fits
-				let columnIndex = 0;
-				for (; columnIndex < columns.length; columnIndex++) {
-					if (columns[columnIndex]!.endMinutes <= st.startMinutes) {
-						// This column is free
-						break;
-					}
-				}
-
-				// If no existing column works, create a new one
-				if (columnIndex === columns.length) {
-					columns.push({ endMinutes: st.endMinutes });
-				} else {
-					columns[columnIndex]!.endMinutes = st.endMinutes;
-				}
-
-				const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
-				segmentColumns.set(segmentKey, {
-					column: columnIndex,
-					totalColumns: columns.length,
-				});
-			}
-
-			// Update total columns for all segments in this day
-			for (const st of segmentTimes) {
-				const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
-				const layout = segmentColumns.get(segmentKey);
-				if (layout) {
-					layout.totalColumns = columns.length;
-				}
-			}
-		}
-
-		// Render segments
-		for (const segment of segments) {
-			const {
-				event,
-				week,
-				weekIndex,
-				startDayIndex,
-				endDayIndex,
-				isStart,
-				isEnd,
-				totalWeeks,
-			} = segment;
-			const weekYOffset = week.yOffset;
-
-			const allDay = event.isAllDay === true;
-
-			// Get visual position for the start day
-			const startVisualPos = this.getDayVisualPosition(startDayIndex);
-			const endVisualPos = this.getDayVisualPosition(endDayIndex);
-
-			// Skip segments that span multiple visual rows for now (would need to be split)
-			// For simple case, render each day on its visual row
-			if (startVisualPos.row !== endVisualPos.row) {
-				// Event spans visual rows - for now, only render the start portion
-				// TODO: Split into multiple segments across visual rows
-			}
-
-			let yStart: number;
-			let yEnd: number;
-
-			if (showTimeScale && !allDay) {
-				const dayStartTime = new Date(week.days[startDayIndex]!).setHours(
-					0,
-					0,
-					0,
-					0,
-				);
-				const dayEndTime = new Date(week.days[endDayIndex]!).setHours(
-					23,
-					59,
-					59,
-					999,
-				);
-				const eventStartTime = event.start.getTime();
-				const eventEndTime = event.end.getTime() - 60000; // Subtract 1 minute for rendering
-
-				const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
-				const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
-
-				const effectiveStart = new Date(effectiveStartTime);
-				const effectiveEnd = new Date(effectiveEndTime);
-
-				const startMinutes =
-					effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
-				const endMinutes =
-					effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
-
-				// Position within the visual row
-				const visualRowY = weekYOffset + startVisualPos.row * this.dayHeight;
-				yStart = visualRowY + (startMinutes / 1440) * this.dayHeight;
-				yEnd = visualRowY + (endMinutes / 1440) * this.dayHeight;
-			} else {
-				const eventKey = `${weekIndex}-${event.id}`;
-				let rowIndex = eventRowIndex.get(eventKey);
-
-				if (rowIndex === undefined) {
-					rowIndex = 0;
-					while (true) {
-						let rowFree = true;
-						for (let d = startDayIndex; d <= endDayIndex; d++) {
-							const dayKey = `${weekIndex}-${d}`;
-							const occupied = dayOccupiedRows.get(dayKey);
-							if (occupied?.has(rowIndex)) {
-								rowFree = false;
-								break;
-							}
-						}
-						if (rowFree) break;
-						rowIndex++;
-					}
-					eventRowIndex.set(eventKey, rowIndex);
-				}
-
-				for (let d = startDayIndex; d <= endDayIndex; d++) {
-					const dayKey = `${weekIndex}-${d}`;
-					let occupied = dayOccupiedRows.get(dayKey);
-					if (!occupied) {
-						occupied = new Set();
-						dayOccupiedRows.set(dayKey, occupied);
-					}
-					occupied.add(rowIndex);
-				}
-
-				const maxEventsInRow = Math.floor(
-					(this.dayHeight - 4) / (MIN_EVENT_HEIGHT + 2),
-				);
-				if (rowIndex >= maxEventsInRow) continue;
-
-				// Position within the visual row
-				const visualRowY = weekYOffset + startVisualPos.row * this.dayHeight;
-				yStart = visualRowY + 4 + rowIndex * (MIN_EVENT_HEIGHT + 2);
-				yEnd = yStart + MIN_EVENT_HEIGHT;
-			}
-
-			const eventHeight = Math.max(
-				showTimeScale ? 4 : MIN_EVENT_HEIGHT,
-				yEnd - yStart,
-			);
-
-			// Calculate horizontal position with column layout for time-scaled events
-			let x: number;
-			let spanWidth: number;
-
-			const segmentKey = `${weekIndex}-${event.id}-${startDayIndex}`;
-			const columnLayout = segmentColumns.get(segmentKey);
-
-			if (
-				showTimeScale &&
-				!allDay &&
-				columnLayout &&
-				columnLayout.totalColumns > 1
-			) {
-				// This event has parallel events - divide the day width
-				const columnWidth = dayWidth / columnLayout.totalColumns;
-				x =
-					LEFT_GUTTER_WIDTH +
-					startVisualPos.col * dayWidth +
-					columnLayout.column * columnWidth;
-				spanWidth = columnWidth;
-			} else {
-				// Normal layout - use visual column position
-				// For multi-day events on same visual row, calculate span
-				const colSpan = endVisualPos.col - startVisualPos.col + 1;
-				x = LEFT_GUTTER_WIDTH + startVisualPos.col * dayWidth;
-				spanWidth = colSpan * dayWidth;
-			}
-
-			// Convert to viewport coordinates
-			const viewportY = yStart - scrollTop;
-
-			// Skip if completely out of view
-			if (viewportY + eventHeight < 0 || viewportY > height) continue;
-
-			const eventColor = event.color || "#888888";
-			const isSelected = this.internal.isEventSelected(event);
-			const isHovered = this.hoveredEventId === event.id;
-
-			// Apple Calendar style dimensions
-			const padding = 2;
-			const eventWidth = spanWidth - padding * 2;
-			const leftBorderWidth = 3;
-			const contentPadding = 6;
-
-			// Determine border radius based on span position
-			let radiusTopLeft = 4;
-			let radiusTopRight = 4;
-			let radiusBottomLeft = 4;
-			let radiusBottomRight = 4;
-
-			if (totalWeeks > 1) {
-				if (isStart && !isEnd) {
-					radiusTopRight = 0;
-					radiusBottomRight = 0;
-				} else if (!isStart && isEnd) {
-					radiusTopLeft = 0;
-					radiusBottomLeft = 0;
-				} else if (!isStart && !isEnd) {
-					radiusTopLeft = 0;
-					radiusTopRight = 0;
-					radiusBottomLeft = 0;
-					radiusBottomRight = 0;
-				}
-			}
-
-			ctx.save();
-
-			// Apply transparency for read-only events
-			if (event.readOnly) {
-				ctx.globalAlpha = 0.5;
-			}
-
-			// Draw background - solid color if selected, subtle if not
-			const hsl = rgbToHsl(hexToRgb(eventColor));
-			const textPrimary =
-				getComputedStyle(this).getPropertyValue("--text-primary").trim() ||
-				"rgba(255, 255, 255, 0.9)";
-			const textInverse =
-				getComputedStyle(this).getPropertyValue("--text-inverse").trim() ||
-				"rgb(0, 0, 0)";
-			// Increase saturation to 75% for more vibrant colors, allow higher lightness for brighter backgrounds
-			const backgroundColor = isSelected
-				? eventColor
-				: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
-						hsl[2] + 15,
-						40,
-				  )}%, 0.45)`;
-			const borderColor = isSelected
-				? eventColor
-				: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
-						hsl[2] + 10,
-						70,
-				  )}%, 1)`;
-
-			// Check if event should have stripes (not accepted)
-			const useStripes = this.shouldRenderEventWithStripes(event);
-
-			ctx.beginPath();
-			ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-				radiusTopLeft,
-				radiusTopRight,
-				radiusBottomRight,
-				radiusBottomLeft,
-			]);
-
-			// Fill with solid background first
-			ctx.fillStyle = backgroundColor;
-			ctx.fill();
-
-			// Add stripe pattern overlay if needed
-			if (useStripes) {
-				const patternCanvas = this.getStripePatternCanvas();
-				if (patternCanvas) {
-					ctx.save();
-
-					// Clip to the event rectangle
-					ctx.beginPath();
-					ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-						radiusTopLeft,
-						radiusTopRight,
-						radiusBottomRight,
-						radiusBottomLeft,
-					]);
-					ctx.clip();
-
-					// Pattern size is 16px (8 * scale of 2)
-					const patternSize = 12;
-
-					// Calculate starting position to align with content coordinates
-					// Start from a position that makes the pattern appear fixed in content space
-					const startX = Math.floor((x + padding) / patternSize) * patternSize;
-					const startY =
-						Math.floor(yStart / patternSize) * patternSize - scrollTop;
-
-					// Tile the pattern across the clipped area
-					for (
-						let py = startY;
-						py < viewportY + eventHeight;
-						py += patternSize
-					) {
-						for (
-							let px = startX;
-							px < x + padding + eventWidth;
-							px += patternSize
-						) {
-							ctx.drawImage(patternCanvas, px, py, patternSize, patternSize);
-						}
-					}
-
-					ctx.restore();
-				}
-			}
-
-			// Draw colored left border (Apple Calendar style)
-			if (!isSelected) {
-				ctx.fillStyle = borderColor;
-				ctx.beginPath();
-				ctx.roundRect(
-					x + padding + 2,
-					viewportY + 2,
-					leftBorderWidth,
-					eventHeight - 4,
-					[radiusTopLeft, radiusTopLeft, radiusBottomLeft, radiusBottomLeft],
-				);
-				ctx.fill();
-			}
-
-			// Draw selection border - visible outline for selected events
-			if (isSelected) {
-				ctx.strokeStyle = textInverse;
-				ctx.lineWidth = 1;
-				ctx.beginPath();
-				ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-					radiusTopLeft,
-					radiusTopRight,
-					radiusBottomRight,
-					radiusBottomLeft,
-				]);
-				ctx.stroke();
-			}
-
-			// Draw hover outline
-			if (isHovered && !isSelected) {
-				ctx.strokeStyle =
-					getComputedStyle(this)
-						.getPropertyValue("--grid-color-hover")
-						.trim() || "rgba(255, 255, 255, 0.2)";
-				ctx.lineWidth = 1;
-				ctx.beginPath();
-				ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
-					radiusTopLeft,
-					radiusTopRight,
-					radiusBottomRight,
-					radiusBottomLeft,
-				]);
-				ctx.stroke();
-			}
-
-			// Draw text if this is the start segment and there's enough space
-			if (isStart && eventHeight >= 16) {
-				// Use inverse text color for selected events (for contrast against solid color)
-				// Use event color or primary text color for unselected events
-				const textColor = isSelected
-					? textInverse || "white"
-					: textPrimary || eventColor;
-				ctx.fillStyle = textColor;
-				ctx.font = `11px ${fontFamily}`;
-				ctx.textAlign = "left";
-				ctx.textBaseline = "top";
-
-				const textX = x + padding + leftBorderWidth + contentPadding + 1;
-				const textY = viewportY + 6;
-				let maxTextWidth = eventWidth - leftBorderWidth - contentPadding - 4;
-
-				// Clip text to event bounds
-				ctx.save();
-				ctx.beginPath();
-				ctx.rect(
-					x + padding + leftBorderWidth,
-					viewportY,
-					eventWidth - leftBorderWidth,
-					eventHeight,
-				);
-				ctx.clip();
-
-				// Draw recurring icon if event has rrule
-				if (event.rrule) {
-					ctx.font = `11px ${fontFamily}`;
-					const recurIcon = "⟳";
-					const iconWidth = ctx.measureText(recurIcon).width;
-					ctx.fillText(recurIcon, textX, textY);
-					maxTextWidth -= iconWidth + 4;
-				}
-
-				// Draw title with ellipsis if needed
-				const titleStartX =
-					textX + (event.rrule ? ctx.measureText("⟳").width + 4 : 0);
-				let displayTitle = event.title;
-				ctx.font = `11px ${fontFamily}`;
-				const titleWidth = ctx.measureText(displayTitle).width;
-
-				if (titleWidth > maxTextWidth) {
-					const ellipsis = "…";
-					const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-					// Binary search for the right length
-					let left = 0;
-					let right = displayTitle.length;
-					let bestFit = 0;
-
-					while (left <= right) {
-						const mid = Math.floor((left + right) / 2);
-						const testText = displayTitle.substring(0, mid);
-						const testWidth = ctx.measureText(testText).width + ellipsisWidth;
-
-						if (testWidth <= maxTextWidth) {
-							bestFit = mid;
-							left = mid + 1;
-						} else {
-							right = mid - 1;
-						}
-					}
-
-					displayTitle = displayTitle.substring(0, bestFit) + ellipsis;
-				}
-
-				ctx.fillText(displayTitle, titleStartX, textY);
-
-				// Draw time if there's enough space (at least 32px for title + time)
-				if (eventHeight >= 32) {
-					const formatTime = (date: Date) => {
-						const hours = date.getHours();
-						const minutes = date.getMinutes();
-						const ampm = hours >= 12 ? "PM" : "AM";
-						const displayHours = hours % 12 || 12;
-						return `${displayHours}:${minutes
-							.toString()
-							.padStart(2, "0")} ${ampm}`;
-					};
-
-					const startTime = formatTime(event.start);
-					const endTime = formatTime(event.end);
-					const timeText = `${startTime} – ${endTime}`;
-
-					// Use inverse text color for selected events, primary text or event color for unselected
-					const timeTextColor = isSelected
-						? textInverse || "white"
-						: textPrimary || eventColor;
-					ctx.fillStyle = timeTextColor;
-					ctx.font = `10px ${fontFamily}`;
-
-					// Draw time with ellipsis if needed
-					let displayTime = timeText;
-					let timeWidth = ctx.measureText(displayTime).width;
-
-					if (timeWidth > maxTextWidth) {
-						const ellipsis = "…";
-						const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-						let left = 0;
-						let right = displayTime.length;
-						let bestFit = 0;
-
-						while (left <= right) {
-							const mid = Math.floor((left + right) / 2);
-							const testText = displayTime.substring(0, mid);
-							const testWidth = ctx.measureText(testText).width + ellipsisWidth;
-
-							if (testWidth <= maxTextWidth) {
-								bestFit = mid;
-								left = mid + 1;
-							} else {
-								right = mid - 1;
-							}
-						}
-
-						displayTime = displayTime.substring(0, bestFit) + ellipsis;
-					}
-
-					ctx.fillText(displayTime, textX, textY + 14);
-				}
-
-				ctx.restore();
-			}
-
-			ctx.restore();
-
-			// Store rect for hit testing (in content coordinates)
-			this.eventRects.push({
-				event,
-				x: x + padding,
-				y: yStart,
-				width: eventWidth,
-				height: eventHeight,
-			});
-		}
-
-		// Render month labels
-		const monthNames = [
-			"January",
-			"February",
-			"March",
-			"April",
-			"May",
-			"June",
-			"July",
-			"August",
-			"September",
-			"October",
-			"November",
-			"December",
-		];
-
-		const monthBoundaries: {
-			monthKey: string;
-			monthName: string;
-			year: number;
-			yOffset: number;
-		}[] = [];
-		const seenMonths = new Set<string>();
-
-		for (const week of visibleWeeks) {
-			const firstDay = week.days[0];
-			if (!firstDay) continue;
-
-			const monthIndex = firstDay.getMonth();
-			const year = firstDay.getFullYear();
-			const monthKey = `${monthIndex}-${year}`;
-
-			if (!seenMonths.has(monthKey)) {
-				seenMonths.add(monthKey);
-				const monthName = monthNames[monthIndex];
-				if (monthName) {
-					monthBoundaries.push({
-						monthKey,
-						monthName,
-						year,
-						yOffset: week.yOffset,
-					});
-				}
-			}
-		}
-
-		for (let i = 0; i < monthBoundaries.length; i++) {
-			const month = monthBoundaries[i]!;
-			const nextMonth = monthBoundaries[i + 1];
-			const labelY = month.yOffset;
-			const nextMonthY = nextMonth ? nextMonth.yOffset : this.totalHeight;
-
-			if (nextMonthY < scrollTop) continue;
-			if (labelY > viewportBottom) break;
-
-			const padding = [12, 0, 0, 12];
-
-			const stickyTop = Math.max(0, scrollTop - labelY);
-			const maxStickyTop = nextMonthY - labelY - 24;
-			const clampedStickyTop = Math.min(stickyTop, maxStickyTop);
-			const labelTopMargin = 32;
-			const finalTop = labelY + clampedStickyTop - scrollTop + labelTopMargin;
-
-			ctx.save();
-			ctx.font = `bold 18px ${fontFamily}`;
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-
-			const labelText = `${month.monthName} ${month.year}`;
-			const textWidth = ctx.measureText(labelText).width;
-			const leftMargin = 8;
-			const textX = 64 + padding[3] + leftMargin;
-			const textY = finalTop + padding[0];
-
-			// Draw background
-			const bgPaddingLeft = 8;
-			const bgPaddingRight = 8;
-			const bgElevated =
-				getComputedStyle(this).getPropertyValue("--bg-elevated").trim() ||
-				"rgba(0, 0, 0, 0.7)";
-			ctx.fillStyle = bgElevated;
-			ctx.beginPath();
-			ctx.roundRect(
-				textX - bgPaddingLeft,
-				textY - 4,
-				textWidth + bgPaddingLeft + bgPaddingRight,
-				26,
-				6,
-			);
-			ctx.fill();
-
-			// Draw text
-			const textPrimary =
-				getComputedStyle(this).getPropertyValue("--text-primary").trim() ||
-				"rgba(255, 255, 255, 0.95)";
-			ctx.fillStyle = textPrimary;
-			ctx.fillText(labelText, textX, textY);
-			ctx.restore();
-		}
+	toggleLayer(name: string): void {
+		const layer = this.layers.find((l) => l.name === name);
+		if (!layer) throw new Error(`Layer "${name}" not found`);
+		layer.enabled = !layer.enabled;
+		this.renderCanvas();
 	}
 
+
 	onWheel = (e: WheelEvent): void => {
 		if (this.hasAttribute("scroll-lock")) return;
+		this.lastWheelTime = Date.now();
 
 		if (this.scrollAnimationFrame) {
 			this.cancelScrollAnimation();
@@ -3057,9 +2185,10 @@ export class CalendarViewElement extends LitElement {
 						snappedEnd.setTime(snappedStart.getTime() + 15 * 60 * 1000);
 					}
 
+					const isZoomedOut = this.dayHeight < TIME_SCALE_DAY_HEIGHT;
 					this.dispatchEvent(
 						new CustomEvent("create-event", {
-							detail: { start: snappedStart, end: snappedEnd },
+							detail: { start: snappedStart, end: snappedEnd, isAllDay: isZoomedOut },
 							bubbles: true,
 						}),
 					);
@@ -3247,16 +2376,16 @@ export class CalendarViewElement extends LitElement {
 		// Update cursor position for status bar
 		this.cursorPosition = { x, y };
 
-		// Check for resize handles first
-		const resizeHandle = this.getResizeHandle(x, y);
+		// Check for resize handles first — suppressed when alt key is active
+		const resizeHandle = !e.altKey ? this.getResizeHandle(x, y) : null;
 		if (resizeHandle && !this.isResizingEvent && !this.isDraggingEvent) {
 			this.scrollContainer.style.cursor = "ns-resize";
 		} else if (!this.isResizingEvent && !this.isDraggingEvent) {
 			this.scrollContainer.style.cursor = "";
 		}
 
-		// Check for event hover
-		const hoveredEvent = this.getEventAtPosition(x, y);
+		// Check for event hover — suppressed when alt key is active
+		const hoveredEvent = !e.altKey ? this.getEventAtPosition(x, y) : null;
 		const newHoveredId = hoveredEvent ? hoveredEvent.id : null;
 
 		if (newHoveredId !== this.hoveredEventId) {
@@ -3414,6 +2543,31 @@ 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 (e.altKey && !this.altKeyActive) {
+			this.altKeyActive = true;
+			this.dispatchEvent(new CustomEvent("meta-key-change", { bubbles: true }));
+			if (this.scrollContainer) {
+				this.scrollContainer.style.cursor = "";
+			}
+			if (this.hoveredEventId !== null) {
+				this.hoveredEventId = null;
+				this.renderCanvas();
+			}
+		}
+	};
+
+	onKeyUp = (e: KeyboardEvent): void => {
+		const focused = e.composedPath()[0] as HTMLElement;
+		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 }));
+		}
+	};
+
 	onPaste = async (e: ClipboardEvent): Promise<void> => {
 		const files = e.clipboardData?.files;
 		if (files && files.length > 0) {
@@ -3659,13 +2813,13 @@ export class CalendarViewElement extends LitElement {
 	 *
 	 * Selection box is 2D with different behavior based on zoom level:
 	 *
-	 * ZOOMED OUT (dayHeight < 200):
+	 * ZOOMED OUT (dayHeight < TIME_SCALE_DAY_HEIGHT):
 	 * - X axis: days of the week (horizontal)
 	 * - Y axis: multiple weeks stacked (vertical)
 	 * - Creates time ranges per WEEK for selected day range
 	 * - Example: Wed-Thu across 3 weeks = 3 ranges (one per week)
 	 *
-	 * ZOOMED IN (dayHeight >= 200, time scale visible):
+	 * ZOOMED IN (dayHeight >= TIME_SCALE_DAY_HEIGHT, time scale visible):
 	 * - X axis: days of the week (horizontal)
 	 * - Y axis: time within days (vertical, with weeks)
 	 * - Creates time ranges per DAY for selected time range
@@ -3711,7 +2865,7 @@ export class CalendarViewElement extends LitElement {
 		if (intersectingWeeks.length === 0) return;
 
 		const timeRanges: Array<{ start: Date; end: Date }> = [];
-		const isZoomedIn = this.dayHeight >= 200;
+		const isZoomedIn = this.dayHeight >= TIME_SCALE_DAY_HEIGHT;
 
 		if (isZoomedIn) {
 			// ZOOMED IN: Create time ranges per DAY (same time across multiple weeks)
@@ -3800,6 +2954,10 @@ export class CalendarViewElement extends LitElement {
 		for (const event of this.events) {
 			// Skip all-day events
 			if (event.isAllDay) continue;
+			if (event.visualStyle === "heatmap") continue;
+
+			// Only select events from the active calendar
+			if (this.activeCalendarId && event.calendarId !== this.activeCalendarId && event.sourceId !== this.activeCalendarId) continue;
 
 			const eventStartTime = event.start.getTime();
 			const eventEndTime = event.end.getTime();
@@ -3891,9 +3049,17 @@ export class CalendarViewElement extends LitElement {
 		const scrollTop = this.scrollTop;
 		const scrollBottom = scrollTop + this.viewportHeight;
 
+		const nearTop = scrollTop < bufferHeight;
+		const nearBottom = scrollBottom > this.totalHeight - bufferHeight;
+		if (!nearTop && !nearBottom) return;
+
 		// Check if near top (extending to past)
-		if (scrollTop < bufferHeight) {
+		if (nearTop) {
 			this.isExtendingRange = true;
+			// Capture before extension: only compensate for wheel/touch scroll.
+			// For scrollbar drags, skip compensation so the thumb stays where the user
+			// put it and they see the newly loaded historical content — no treadmill.
+			const isWheelScroll = Date.now() - this.lastWheelTime < 200;
 			const newWeeks = this.internal.extendRange("past");
 
 			// Prepend new weeks
@@ -3912,11 +3078,13 @@ export class CalendarViewElement extends LitElement {
 			// Must update DOM first so scroll container has correct height
 			this.requestUpdate();
 
-			// Adjust scroll position to maintain visual position (after DOM update)
 			requestAnimationFrame(() => {
-				this._scrollTop += addedHeight;
-				if (this.scrollContainer) {
-					this.scrollContainer.scrollTop = this._scrollTop;
+				if (isWheelScroll) {
+					// Maintain visual position so content doesn't jump during wheel scroll
+					this._scrollTop += addedHeight;
+					if (this.scrollContainer) {
+						this.scrollContainer.scrollTop = this._scrollTop;
+					}
 				}
 
 				this.renderCanvas();
@@ -3927,7 +3095,7 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		// Check if near bottom (extending to future)
-		if (scrollBottom > this.totalHeight - bufferHeight) {
+		if (nearBottom) {
 			this.isExtendingRange = true;
 			const newWeeks = this.internal.extendRange("future");
 
@@ -4200,6 +3368,7 @@ export class CalendarViewElement extends LitElement {
 					fill: accent.replace("rgb", "rgba").replace(")", ", 0.3)"),
 					stroke: accent.replace("rgb", "rgba").replace(")", ", 0.8)"),
 					text: "white",
+					dashed: false,
 				},
 				useStartEdge,
 			);
@@ -4212,6 +3381,7 @@ export class CalendarViewElement extends LitElement {
 					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,
 			);
@@ -4256,8 +3426,13 @@ export class CalendarViewElement extends LitElement {
 			later = startDate < endDate ? endDate : startDate;
 		}
 
-		earlier.setMinutes(Math.round(earlier.getMinutes() / 15) * 15, 0, 0);
-		later.setMinutes(Math.round(later.getMinutes() / 15) * 15, 0, 0);
+		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);
+		}
 
 		// Use active calendar color if available, otherwise fall back to accent-primary
 		let fill: string;
@@ -4285,7 +3460,7 @@ export class CalendarViewElement extends LitElement {
 	renderVirtualEvent(
 		start: Date,
 		end: Date,
-		color: { fill: string; stroke: string; text: string },
+		color: { fill: string; stroke: string; text: string; dashed?: boolean },
 		useStartEdge = true,
 	): void {
 		if (!this.overlayCanvas || !this.overlayCtx || !this.scrollContainer)
@@ -4335,7 +3510,7 @@ export class CalendarViewElement extends LitElement {
 			ctx.fill();
 			ctx.strokeStyle = color.stroke;
 			ctx.lineWidth = 1;
-			ctx.setLineDash([6, 3]);
+			if (color.dashed !== false) ctx.setLineDash([6, 3]);
 			ctx.stroke();
 			ctx.setLineDash([]);
 		};
@@ -4819,7 +3994,7 @@ export class CalendarViewElement extends LitElement {
 		let hour = 0;
 		let minute = 0;
 
-		if (this.dayHeight >= 200) {
+		if (this.dayHeight >= TIME_SCALE_DAY_HEIGHT) {
 			const offsetInRow = y - (week.yOffset + rowInWeek * this.dayHeight);
 			const minutes = Math.floor((offsetInRow / this.dayHeight) * 24 * 60);
 			hour = Math.floor(minutes / 60);
@@ -4903,6 +4078,7 @@ export class CalendarViewElement extends LitElement {
 			formattedCursorDate: cursorTime
 				? this.formatCompactDate(cursorTime.date)
 				: "",
+			altKeyActive: this.altKeyActive,
 		};
 	}
 
@@ -5229,16 +4405,20 @@ export class CalendarViewElement extends LitElement {
         </div>
 
         <div class="event-detail-body">
-          ${
-						event.location
-							? html`
+          ${(() => {
+						const teamsMatch = event.description?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/);
+						const teamsUrl = teamsMatch ? teamsMatch[0] : null;
+						if (!event.location && !teamsUrl) return null;
+						return html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Location</div>
-                <div class="event-detail-value">${event.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}
+                </div>
               </div>
-            `
-							: null
-					}
+            `;
+					})()}
 
           ${
 						event.url
@@ -5477,70 +4657,8 @@ export class CalendarViewElement extends LitElement {
 	render() {
 		return html`
       <div class="container ${this.isDraggingFile ? "dragging-file" : ""}">
-        <div class="toolbar">
-          <div class="toolbar-left">
-            <slot name="toolbar-center"></slot>
-            
-            <button class="toolbar-button" title="Month" @click=${
-							this.scrollToMonth
-						}>
-              Month
-            </button>
-            <button class="toolbar-button" title="Today" @click=${
-							this.scrollToToday
-						}>
-              Today
-            </button>
-            <button ?disabled=${
-							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}>
-              →
-            </button>
-            <div class="toolbar-zoom">
-              <input
-                type="range"
-                class="toolbar-zoom-slider"
-                min="${MIN_DAY_HEIGHT}"
-                max="${MAX_DAY_HEIGHT}"
-                .value=${this.dayHeight}
-                @input=${this.onZoomSliderChange}
-                title="Adjust zoom level"
-              />
-            </div>
-          </div>
-
-          <div class="toolbar-right">
-            <!--<select
-              class="theme-selector"
-              .value=${this.currentTheme}
-              @change=${this.onThemeChange}
-              title="Select theme"
-            >
-              ${availableThemes.map(
-								(theme) =>
-									html`<option value="${theme.name}">${theme.label}</option>`,
-							)}
-            </select>-->
-            <div class="toolbar-search">
-              <span class="toolbar-search-icon">🔍</span>
-              <input
-                class="toolbar-search-input"
-                type="text"
-                placeholder="Filter events..."
-                .value=${this.filter}
-                @input=${this.onFilterInput}
-              />
-            </div>
-          </div>
-        </div>
-
         <div class="body">
+          <slot name="sidebar"></slot>
           <div class="calendar-area">
             <div class="canvas-layer">
               <canvas></canvas>
@@ -5560,6 +4678,67 @@ export class CalendarViewElement extends LitElement {
             ${this.minimapCanvas}
             ${this.renderEventDetail()}
             ${this.renderNotificationPopover()}
+          
+            <div class="toolbar">
+                <div class="toolbar-left">
+                <button class="toolbar-button" title="Month" @click=${
+    							this.scrollToMonth
+    						}>
+                    Month
+                </button>
+                <button class="toolbar-button" title="Today" @click=${
+    							this.scrollToToday
+    						}>
+                    Today
+                </button>
+                <button ?disabled=${
+    							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}>
+                    →
+                </button>
+                <div class="toolbar-zoom">
+                    <input
+                    type="range"
+                    class="toolbar-zoom-slider"
+                    min="${MIN_DAY_HEIGHT}"
+                    max="${MAX_DAY_HEIGHT}"
+                    .value=${this.dayHeight}
+                    @input=${this.onZoomSliderChange}
+                    title="Adjust zoom level"
+                    />
+                </div>
+                </div>
+    
+                <div class="toolbar-right">
+                <!--<select
+                    class="theme-selector"
+                    .value=${this.currentTheme}
+                    @change=${this.onThemeChange}
+                    title="Select theme"
+                >
+                    ${availableThemes.map(
+    								(theme) =>
+    									html`<option value="${theme.name}">${theme.label}</option>`,
+    							)}
+                </select>-->
+                <div class="toolbar-search">
+                    <span class="toolbar-search-icon">🔍</span>
+                    <input
+                    class="toolbar-search-input"
+                    type="text"
+                    placeholder="Filter events..."
+                    .value=${this.filter}
+                    @input=${this.onFilterInput}
+                    />
+                </div>
+                </div>
+            </div>
           </div>
         </div>
       </div>
@@ -5638,18 +4817,3 @@ export class CalendarViewElement extends LitElement {
 		`;
 	}
 }
-
-// Helper to get day index (0-6) within a week for a given date
-function getDayIndexInWeek(week: WeekInfo, date: Date) {
-	const dateStart = new Date(date).setHours(0, 0, 0, 0);
-	for (let i = 0; i < 7; i++) {
-		const weekDay = week.days[i];
-		if (weekDay && new Date(weekDay).setHours(0, 0, 0, 0) === dateStart) {
-			return i;
-		}
-	}
-	// Date is before or after this week
-	const weekStart = new Date(week.days[0]!).setHours(0, 0, 0, 0);
-	if (dateStart < weekStart) return 0;
-	return 6;
-}