@luckydye/calendar 1.1.2 → 1.2.0

package/src/CalendarView.ts

@@ -54,8 +54,7 @@ export class CalendarViewElement extends LitElement {
       display: var(--toolbar-display, flex);
       align-items: center;
       justify-content: space-between;
-      height: 48px;
-      padding: 0 16px;
+      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));
       flex-shrink: 0;
@@ -100,7 +99,7 @@ export class CalendarViewElement extends LitElement {
       background: transparent;
       border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
-      padding: 6px 12px;
+      padding: 4px 8px;
       border-radius: var(--border-radius-sm, 4px);
       font-size: 13px;
       line-height: 16px;
@@ -142,7 +141,7 @@ export class CalendarViewElement extends LitElement {
       background: var(--bg-input, rgba(0, 0, 0, 0.3));
       border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
-      padding: 6px 12px 6px 32px;
+      padding: 4px 8px 4px 32px;
       border-radius: var(--border-radius-sm, 4px);
       font-size: 13px;
       outline: none;
@@ -165,12 +164,6 @@ export class CalendarViewElement extends LitElement {
       gap: 8px;
     }
 
-    .toolbar-zoom-label {
-      color: var(--text-muted, rgba(255, 255, 255, 0.6));
-      font-size: 13px;
-      white-space: nowrap;
-    }
-
     .toolbar-zoom-slider {
       width: 100px;
       height: 4px;
@@ -211,38 +204,6 @@ export class CalendarViewElement extends LitElement {
       background: var(--text-primary, rgba(255, 255, 255, 1));
     }
 
-    .header {
-      display: flex;
-      height: 32px;
-      flex-shrink: 0;
-      padding-right: 1rem;
-    }
-    
-    .weekday:nth-child(7),
-    .weekday:nth-child(6) {
-      background: var(--bg-weekend, rgba(255, 255, 255, 0.03));
-    }
-
-    .header-gutter {
-      width: 60px;
-      flex-shrink: 0;
-    }
-
-    .weekdays {
-      display: flex;
-      flex: 1;
-    }
-
-    .weekday {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: var(--text-muted, rgba(255, 255, 255, 0.4));
-      text-transform: uppercase;
-    }
-
     .body {
       position: relative;
       flex: 1;
@@ -280,6 +241,10 @@ export class CalendarViewElement extends LitElement {
       overflow-anchor: none;
     }
 
+    :host([scroll-lock]) .scroll-container {
+      overflow: hidden;
+    }
+
     .scroll-container.zoom-cursor {
       cursor: ns-resize;
     }
@@ -369,21 +334,31 @@ export class CalendarViewElement extends LitElement {
       font-size: 16px;
       font-weight: 600;
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
-      background: var(--input-bg, rgba(0, 0, 0, 0.2));
       border: 1px solid var(--input-border, rgba(255, 255, 255, 0.1));
+      background: transparent;
       border-radius: 4px;
       padding: 6px 8px;
       width: 100%;
-      outline: none;
       font-family: inherit;
       margin: 0 -8px 0 -8px;
       field-sizing: content;
       resize: none;
     }
 
+    .event-detail-description-input {
+      font-size: 14px;
+      color: inherit;
+      width: 100%;
+      padding: 0.25rem;
+      margin: -0.25rem;
+      border: none;
+      background: none;
+      field-sizing: content;
+      resize: none;
+    }
+
     .event-detail-title-input:focus {
       border-color: var(--input-border-focus, rgba(255, 255, 255, 0.3));
-      background: var(--input-bg-focus, rgba(0, 0, 0, 0.3));
     }
 
     .event-detail-time {
@@ -404,6 +379,9 @@ export class CalendarViewElement extends LitElement {
       font-size: 20px;
       line-height: 1;
       flex-shrink: 0;
+      position: absolute;
+      top: 0.75rem;
+      right: 1rem;
     }
 
     .event-detail-close:hover {
@@ -430,6 +408,9 @@ export class CalendarViewElement extends LitElement {
       text-transform: uppercase;
       color: var(--text-muted, rgba(255, 255, 255, 0.4));
       letter-spacing: 0.5px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
     .event-detail-value {
@@ -453,6 +434,11 @@ export class CalendarViewElement extends LitElement {
     .event-detail-link {
       color: var(--accent-primary, rgb(100, 150, 255));
       text-decoration: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      display: block;
     }
 
     .event-detail-link:hover {
@@ -535,10 +521,10 @@ export class CalendarViewElement extends LitElement {
       border: 1px solid var(--grid-color);
       border-radius: 4px;
       color: var(--text-primary);
-      padding: 6px 12px;
+      padding: 4px 8px;
+      margin: -4px 0;
       font-size: 13px;
       cursor: pointer;
-      width: 100%;
     }
 
     .notification-add-button:hover {
@@ -764,19 +750,91 @@ export class CalendarViewElement extends LitElement {
 		return this._scrollTop;
 	}
 
-	setView(dayHeight: number, scrollTop: number, syncScrollDOM = true): void {
-		this._dayHeight = dayHeight;
-		this._scrollTop = scrollTop;
+	setView(
+		toDayHeight: number,
+		toScrollTop: number,
+		syncScrollDOM = true,
+		animate = false,
+	): void {
+		this.cancelScrollAnimation();
+
+		if (animate) {
+			const startDayHeight = this._dayHeight;
+			const startScroll = this._scrollTop;
+
+			// Compute scroll as a fraction of total height at each zoom level for smooth interpolation
+			const startTotal = this.totalHeight;
+
+			this._dayHeight = toDayHeight;
+			this.updateWeekOffsets();
+			const targetTotal = this.totalHeight;
+
+			this._dayHeight = startDayHeight;
+			this.updateWeekOffsets();
+
+			const startFrac = startTotal > 0 ? startScroll / startTotal : 0;
+			const targetFrac = targetTotal > 0 ? toScrollTop / targetTotal : 0;
+
+			const duration = 600;
+			const startTime = performance.now();
+			const easeOutExpo = (t: number): number =>
+				t === 1 ? 1 : 1 - 2 ** (-10 * t);
+			const easeOutCubic = (t: number): number => 1 - (1 - t) ** 3;
+
+			const tick = (currentTime: number): void => {
+				if (!this.scrollAnimationFrame) return;
+
+				const progress = Math.min((currentTime - startTime) / duration, 1);
+
+				this._dayHeight = startDayHeight + (toDayHeight - startDayHeight) * easeOutExpo(progress);
+				this.updateWeekOffsets();
+
+				const currentFrac = startFrac + (targetFrac - startFrac) * easeOutCubic(progress);
+				this._scrollTop = Math.max(0, currentFrac * this.totalHeight);
+
+				if (this.scrollContainer) {
+					if (
+						this.scrollContent &&
+						this.scrollContainer.scrollHeight < this._scrollTop
+					) {
+						this.scrollContent.style.minHeight =
+							this._scrollTop + window.innerHeight + "px";
+					}
+					this.scrollContainer.scrollTop = this._scrollTop;
+				}
+
+				this.renderCanvas();
+
+				if (progress < 1) {
+					this.scrollAnimationFrame = requestAnimationFrame(tick);
+				} else {
+					this._dayHeight = toDayHeight;
+					this._scrollTop = toScrollTop;
+					this.saveDayHeight();
+					this.saveScrollPosition();
+					this.scrollAnimationFrame = null;
+					this.renderCanvas();
+				}
+			};
+
+			this.scrollAnimationFrame = requestAnimationFrame(tick);
+
+			return;
+		}
+
+		this._dayHeight = toDayHeight;
+		this._scrollTop = toScrollTop;
 
 		this.saveDayHeight();
 		this.updateWeekOffsets();
 
 		if (syncScrollDOM && this.scrollContainer && this.scrollContent) {
-			if (this.scrollContainer.scrollHeight < scrollTop) {
-				this.scrollContent.style.minHeight =
-					scrollTop + window.innerHeight + "px";
+			if (this.scrollContainer.scrollHeight < toScrollTop) {
+				this.scrollContent.style.minHeight = `${
+					toScrollTop + window.innerHeight
+				}px`;
 			}
-			this.scrollContainer.scrollTop = scrollTop;
+			this.scrollContainer.scrollTop = toScrollTop;
 		}
 
 		this.saveScrollPosition();
@@ -846,6 +904,55 @@ 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;
+	}
+
+	get rowsPerWeek(): number {
+		return Math.ceil(7 / this._columnsPerRow);
+	}
+
+	getDayVisualPosition(dayIndex: number): { row: number; col: number } {
+		const row = Math.floor(dayIndex / this._columnsPerRow);
+		const col = dayIndex % this._columnsPerRow;
+		return { row, col };
+	}
+
+	getVisualPositionFromCoords(
+		x: number,
+		y: number,
+		gridWidth: number,
+	): { dayIndex: number; timeFraction: number; weekYOffset: number } | null {
+		if (!this.scrollContainer) return null;
+
+		const dayWidth = gridWidth / this._columnsPerRow;
+		const col = Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth);
+		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,
+		);
+		if (!week) return null;
+
+		const rowHeight = this.dayHeight;
+		const row = Math.floor((y - week.yOffset) / rowHeight);
+		const dayIndex = row * this._columnsPerRow + col;
+		if (dayIndex < 0 || dayIndex > 6) return null;
+
+		const timeFraction = ((y - week.yOffset) % rowHeight) / rowHeight;
+		return { dayIndex, timeFraction, weekYOffset: week.yOffset };
+	}
+
 	// History stack for scroll position and zoom
 	// Index 0 is always the most recent entry
 	historyStack: Array<{ scrollTop: number; dayHeight: number }> = [];
@@ -905,8 +1012,15 @@ export class CalendarViewElement extends LitElement {
 		this.internal = new CalendarInternal({
 			locale: this.getAttribute("locale") || undefined,
 			weekStart: Number(this.getAttribute("week-start")),
-			storage: new IndexedDBStorage()
+			storage: new IndexedDBStorage(),
 		});
+
+		this.addEventListener("wheel", this.onWheel, { passive: false });
+		this.addEventListener("dragstart", this.onDragStart);
+		this.addEventListener("dragend", this.onDragEnd);
+		this.addEventListener("dragover", this.onDragOver);
+		this.addEventListener("dragleave", this.onDragLeave);
+		this.addEventListener("drop", this.onDrop);
 	}
 
 	loadDayHeight(): number {
@@ -956,8 +1070,43 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
-	scrollToToday = (): void => {
-		this.scrollToDate(new Date(), 0.5, true, true);
+	scrollToToday = (animate = true): void => {
+		const now = new Date();
+
+		let weekIndex = this.weeks.findIndex((w) =>
+			w.days.some((d) => CalendarInternal.isSameDay(d, now)),
+		);
+		if (weekIndex < 0) {
+			this.weeks = this.internal.resetRangeAroundDate(now);
+			weekIndex = this.weeks.findIndex((w) =>
+				w.days.some((d) => CalendarInternal.isSameDay(d, now)),
+			);
+		}
+
+		let offsetInWeek = 0.5;
+		if (weekIndex >= 0) {
+			const targetWeek = this.weeks[weekIndex];
+			const todayIndex = targetWeek.days.findIndex((d) =>
+				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;
+			}
+		}
+
+		this.scrollToDate(now, offsetInWeek, animate, true, 900);
+	};
+
+	scrollToMonth = (animate = true): void => {
+		const now = new Date();
+		const monthMid = new Date(now.getFullYear(), now.getMonth(), 15);
+		const dayHeight = Math.max(
+			MIN_DAY_HEIGHT,
+			Math.round(this.viewportHeight / 5),
+		);
+		this.scrollToDate(monthMid, 0.5, animate, true, dayHeight);
 	};
 
 	// History management methods
@@ -1045,7 +1194,10 @@ export class CalendarViewElement extends LitElement {
 		offsetInWeek = 0.5,
 		animate = false,
 		extendRange = false,
+		targetDayHeight?: number,
 	): void {
+		const dayHeight = targetDayHeight ?? this._dayHeight;
+
 		let weekIndex = this.weeks.findIndex(
 			(w) =>
 				w.days.some((d) => CalendarInternal.isSameDay(d, targetDate)) ||
@@ -1058,7 +1210,6 @@ export class CalendarViewElement extends LitElement {
 		// If date not found in current buffer, reset range around target (only if explicitly requested)
 		if (weekIndex < 0 && extendRange) {
 			this.weeks = this.internal.resetRangeAroundDate(targetDate);
-			this.updateWeekOffsets();
 
 			// Find the week again in the new range
 			weekIndex = this.weeks.findIndex(
@@ -1072,15 +1223,24 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		if (weekIndex >= 0) {
+			// Temporarily apply target dayHeight to compute correct week offsets
+			const savedDayHeight = this._dayHeight;
+			this._dayHeight = dayHeight;
+			this.updateWeekOffsets();
+
 			const targetWeek = this.weeks[weekIndex];
 			if (targetWeek) {
 				const targetY = targetWeek.yOffset + targetWeek.height * offsetInWeek;
 				const targetScroll = Math.max(0, targetY - this.viewportHeight / 2);
-				if (animate) {
-					this.animateScrollTo(targetScroll);
-				} else {
-					this.scrollTop = targetScroll;
-				}
+
+				// Restore so animateToView reads the correct start dayHeight
+				this._dayHeight = savedDayHeight;
+				if (animate) this.updateWeekOffsets();
+
+				this.setView(dayHeight, targetScroll, true, animate);
+			} else {
+				this._dayHeight = savedDayHeight;
+				this.updateWeekOffsets();
 			}
 		}
 	}
@@ -1092,39 +1252,6 @@ export class CalendarViewElement extends LitElement {
 		}
 	};
 
-	private animateScrollTo(targetScroll: number): void {
-		this.cancelScrollAnimation();
-
-		if (!this.scrollContainer) return;
-
-		const startScroll = this.scrollTop;
-		const distance = targetScroll - startScroll;
-		const duration = 800;
-		const startTime = performance.now();
-
-		const easeOutExpo = (t: number): number => {
-			return t === 1 ? 1 : 1 - 2 ** (-10 * t);
-		};
-
-		const animate = (currentTime: number): void => {
-			if (!this.scrollAnimationFrame) return;
-
-			const elapsed = currentTime - startTime;
-			const progress = Math.min(elapsed / duration, 1);
-			const easedProgress = easeOutExpo(progress);
-
-			this.scrollTop = startScroll + distance * easedProgress;
-
-			if (progress < 1) {
-				this.scrollAnimationFrame = requestAnimationFrame(animate);
-			} else {
-				this.scrollAnimationFrame = null;
-			}
-		};
-
-		this.scrollAnimationFrame = requestAnimationFrame(animate);
-	}
-
 	// Push current state when entering filter mode
 	private pushFilterToHistory(): void {
 		if (this.saveHistoryTimeout) {
@@ -1179,27 +1306,16 @@ export class CalendarViewElement extends LitElement {
 
 		window.addEventListener("mousemove", this.onMouseMove);
 		window.addEventListener("mouseup", this.onMouseUp);
-		window.addEventListener("wheel", this.onWheel, { passive: false });
-		window.addEventListener("keydown", this.onKeyDown);
 		window.addEventListener("paste", this.onPaste);
-		this.addEventListener("dragstart", this.onDragStart);
-		this.addEventListener("dragend", this.onDragEnd);
-		this.addEventListener("dragover", this.onDragOver);
-		this.addEventListener("dragleave", this.onDragLeave);
-		this.addEventListener("drop", this.onDrop);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener("mousemove", this.onMouseMove);
-		document.removeEventListener("mouseup", this.onMouseUp);
-		window.removeEventListener("keydown", this.onKeyDown);
+
+		window.removeEventListener("mousemove", this.onMouseMove);
+		window.removeEventListener("mouseup", this.onMouseUp);
 		window.removeEventListener("paste", this.onPaste);
-		this.removeEventListener("dragstart", this.onDragStart);
-		this.removeEventListener("dragend", this.onDragEnd);
-		this.removeEventListener("dragover", this.onDragOver);
-		this.removeEventListener("dragleave", this.onDragLeave);
-		this.removeEventListener("drop", this.onDrop);
+
 		if (this.scrollContainer) {
 			this.scrollContainer.removeEventListener(
 				"mouseleave",
@@ -1224,6 +1340,25 @@ export class CalendarViewElement extends LitElement {
 
 	updated() {
 		this.handleResize();
+		this.repositionEventDetailOverlay();
+	}
+
+	repositionEventDetailOverlay(): void {
+		if (!this.selectedEventForDetail || !this.selectedEventRect) return;
+
+		const overlay = this.renderRoot.querySelector<HTMLElement>(".event-detail-overlay");
+		if (!overlay) return;
+
+		const actualHeight = overlay.offsetHeight;
+		const GAP = 8;
+		const containerHeight = this.scrollContainer?.clientHeight || 600;
+
+		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.top = `${top}px`;
 	}
 
 	async firstUpdated() {
@@ -1246,7 +1381,9 @@ export class CalendarViewElement extends LitElement {
 		}
 
 		if (this.scrollContainer) {
-			this.scrollContainer.addEventListener("scroll", this.onScroll);
+			this.scrollContainer.addEventListener("scroll", this.onScroll, {
+				passive: false,
+			});
 			this.scrollContainer.addEventListener(
 				"mouseleave",
 				this.onScrollContainerMouseLeave,
@@ -1323,6 +1460,7 @@ export class CalendarViewElement extends LitElement {
 
 	updateWeekOffsets(): void {
 		let y = 0;
+		const weekHeight = this.dayHeight * this.rowsPerWeek;
 
 		if (this.filter) {
 			const filteredEvents = this.events;
@@ -1345,13 +1483,13 @@ export class CalendarViewElement extends LitElement {
 					(range) => range.end >= weekStartTime && range.start <= weekEndTime,
 				);
 
-				week.height = hasEvents ? this.dayHeight : 0;
+				week.height = hasEvents ? weekHeight : 0;
 				y += week.height;
 			}
 		} else {
 			for (const week of this.weeks) {
 				week.yOffset = y;
-				week.height = this.dayHeight;
+				week.height = weekHeight;
 				y += week.height;
 			}
 		}
@@ -1391,21 +1529,43 @@ 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();
+		}
+	}
+
 	renderCanvas(): void {
 		if (!this.ctx || !this.canvas || !this.scrollContainer) return;
 
 		const ctx = this.ctx;
 		const width = this.canvas.width / (window.devicePixelRatio || 1);
 		const height = this.canvas.height / (window.devicePixelRatio || 1);
+		const fontFamily = getComputedStyle(this).fontFamily;
 
 		ctx.clearRect(0, 0, width, height);
 
 		const scrollTop = this.scrollTop;
 		const gridWidth = width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / 7;
+		const dayWidth = gridWidth / this._columnsPerRow;
 		const today = new Date();
 
 		// Find visible weeks
@@ -1423,19 +1583,20 @@ export class CalendarViewElement extends LitElement {
 				CalendarInternal.isSameDay(d, today),
 			);
 			if (todayIndex >= 0) {
-				const x = LEFT_GUTTER_WIDTH + todayIndex * dayWidth;
-				const y = week.yOffset - scrollTop;
+				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, y, dayWidth, week.height);
+				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 = y + (currentMinutes / 1440) * week.height;
+					const timeY = dayY + (currentMinutes / 1440) * this.dayHeight;
 					if (timeY >= 0 && timeY <= height) {
 						const accentTime =
 							getComputedStyle(this)
@@ -1459,8 +1620,8 @@ export class CalendarViewElement extends LitElement {
 			"rgba(255, 255, 255, 0.1)";
 		ctx.lineWidth = 1;
 
-		// Vertical lines (day separators)
-		for (let i = 1; i <= 7; i++) {
+		// 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);
@@ -1541,15 +1702,28 @@ export class CalendarViewElement extends LitElement {
 			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
+			// Draw hourly lines and labels for each visual row
 			const gridColor =
 				getComputedStyle(this).getPropertyValue("--grid-color").trim() ||
 				"rgba(255, 255, 255, 0.1)";
@@ -1568,19 +1742,22 @@ export class CalendarViewElement extends LitElement {
 				`${0.4 * hourLabelOpacity})`,
 			);
 
-			for (let hour = 0; hour < 24; hour++) {
-				const hourY = y + (hour / 24) * week.height;
-				if (hourY >= 0 && hourY <= height) {
-					// Hour line
-					ctx.beginPath();
-					ctx.moveTo(LEFT_GUTTER_WIDTH, hourY);
-					ctx.lineTo(width, hourY);
-					ctx.stroke();
+			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);
+						// 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);
+						}
 					}
 				}
 			}
@@ -1588,13 +1765,15 @@ export class CalendarViewElement extends LitElement {
 			// 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 isTodayInWeek = week.days.some((d) =>
+				const todayIndex = week.days.findIndex((d) =>
 					CalendarInternal.isSameDay(d, today),
 				);
 
-				if (isTodayInWeek) {
+				if (todayIndex >= 0) {
+					const { row } = this.getDayVisualPosition(todayIndex);
 					const currentMinutes = today.getHours() * 60 + today.getMinutes();
-					const timeY = y + (currentMinutes / 1440) * week.height;
+					const timeY =
+						y + row * this.dayHeight + (currentMinutes / 1440) * this.dayHeight;
 
 					if (timeY >= 0 && timeY <= height) {
 						const hours = today.getHours().toString().padStart(2, "0");
@@ -1627,7 +1806,10 @@ export class CalendarViewElement extends LitElement {
 						ctx.fill();
 
 						// Draw current time text in white
-						ctx.fillStyle = "white";
+						ctx.fillStyle =
+							getComputedStyle(this)
+								.getPropertyValue("--text-primary")
+								.trim() || "rgba(255, 255, 255, 1)";
 						ctx.fillText(timeText, textX, textY);
 						ctx.restore();
 					}
@@ -1671,6 +1853,10 @@ export class CalendarViewElement extends LitElement {
 		this.renderEventsOnCanvas(ctx, scrollTop, height, dayWidth, visibleWeeks);
 
 		this.renderDateLabels();
+
+		// Draw sticky weekday labels at top of viewport
+		this.renderWeekdayLabels(ctx, dayWidth, visibleWeeks, scrollTop, height);
+
 		if (this.isCreatingEvent) {
 			this.renderEventCreationPreview();
 		}
@@ -1800,7 +1986,7 @@ export class CalendarViewElement extends LitElement {
 						});
 					}
 					return result;
-				})
+			  })
 			: timedSegments;
 
 		// Combine segments with all-day events first (so they get top rows)
@@ -1946,11 +2132,21 @@ export class CalendarViewElement extends LitElement {
 				isEnd,
 				totalWeeks,
 			} = segment;
-			const weekHeight = week.height;
 			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;
 
@@ -1981,8 +2177,10 @@ export class CalendarViewElement extends LitElement {
 				const endMinutes =
 					effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
 
-				yStart = weekYOffset + (startMinutes / 1440) * weekHeight;
-				yEnd = weekYOffset + (endMinutes / 1440) * weekHeight;
+				// 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);
@@ -2015,12 +2213,14 @@ export class CalendarViewElement extends LitElement {
 					occupied.add(rowIndex);
 				}
 
-				const maxEventsInWeek = Math.floor(
-					(weekHeight - 4) / (MIN_EVENT_HEIGHT + 2),
+				const maxEventsInRow = Math.floor(
+					(this.dayHeight - 4) / (MIN_EVENT_HEIGHT + 2),
 				);
-				if (rowIndex >= maxEventsInWeek) continue;
+				if (rowIndex >= maxEventsInRow) continue;
 
-				yStart = weekYOffset + 4 + rowIndex * (MIN_EVENT_HEIGHT + 2);
+				// 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;
 			}
 
@@ -2046,13 +2246,15 @@ export class CalendarViewElement extends LitElement {
 				const columnWidth = dayWidth / columnLayout.totalColumns;
 				x =
 					LEFT_GUTTER_WIDTH +
-					startDayIndex * dayWidth +
+					startVisualPos.col * dayWidth +
 					columnLayout.column * columnWidth;
 				spanWidth = columnWidth;
 			} else {
-				// Normal layout
-				x = LEFT_GUTTER_WIDTH + startDayIndex * dayWidth;
-				spanWidth = (endDayIndex - startDayIndex + 1) * dayWidth;
+				// 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
@@ -2424,7 +2626,7 @@ export class CalendarViewElement extends LitElement {
 			const stickyTop = Math.max(0, scrollTop - labelY);
 			const maxStickyTop = nextMonthY - labelY - 24;
 			const clampedStickyTop = Math.min(stickyTop, maxStickyTop);
-			const labelTopMargin = 0;
+			const labelTopMargin = 32;
 			const finalTop = labelY + clampedStickyTop - scrollTop + labelTopMargin;
 
 			ctx.save();
@@ -2435,7 +2637,7 @@ export class CalendarViewElement extends LitElement {
 			const labelText = `${month.monthName} ${month.year}`;
 			const textWidth = ctx.measureText(labelText).width;
 			const leftMargin = 8;
-			const textX = 0 + padding[3] + leftMargin;
+			const textX = 64 + padding[3] + leftMargin;
 			const textY = finalTop + padding[0];
 
 			// Draw background
@@ -2466,6 +2668,8 @@ export class CalendarViewElement extends LitElement {
 	}
 
 	onWheel = (e: WheelEvent): void => {
+		if (this.hasAttribute("scroll-lock")) return;
+
 		if (this.scrollAnimationFrame) {
 			this.cancelScrollAnimation();
 		}
@@ -2953,110 +3157,84 @@ export class CalendarViewElement extends LitElement {
 		}
 	};
 
-	onKeyDown = (e: KeyboardEvent): void => {
-		if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "r") {
-			e.preventDefault();
-			this.dispatchEvent(
-				new CustomEvent("force-sync", {
-					bubbles: true,
-				}),
-			);
-		} else if ((e.metaKey || e.ctrlKey) && e.key === "c") {
-			// Don't interfere with copying text from input fields
-			const target = e.target as HTMLElement;
-			if (target.matches('input, textarea, [contenteditable="true"]')) {
-				return;
-			}
-
-			const selectedEvents = this.internal.getSelectedEvents();
-			if (selectedEvents.length === 0) return;
-
-			e.preventDefault();
+	forceSync(): void {
+		this.dispatchEvent(new CustomEvent("force-sync", { bubbles: true }));
+	}
 
-			const icalText = serializeEventsToICal(selectedEvents);
-			const blob = new Blob([icalText], { type: "text/plain" });
-			const item = new ClipboardItem({ "text/plain": blob });
-			navigator.clipboard.write([item]).then(() => {
-				const count = selectedEvents.length;
-				queueStatus(
-					`Copied ${count} event${count === 1 ? "" : "s"} to clipboard`,
-				);
-			});
-		} else if (e.key === "Backspace" || e.key === "Delete") {
-			// Don't delete events if user is typing in an input field
-			const target = e.target as HTMLElement;
-			if (target.matches('input, textarea, [contenteditable="true"]')) {
-				return;
-			}
+	copySelectedEvents(): void {
+		const selectedEvents = this.internal.getSelectedEvents();
+		if (selectedEvents.length === 0) return;
+
+		const icalText = serializeEventsToICal(selectedEvents);
+		const blob = new Blob([icalText], { type: "text/plain" });
+		const item = new ClipboardItem({ "text/plain": blob });
+		navigator.clipboard.write([item]).then(() => {
+			const count = selectedEvents.length;
+			queueStatus(
+				`Copied ${count} event${count === 1 ? "" : "s"} to clipboard`,
+			);
+		});
+	}
 
-			const selectedEvents = this.internal.getSelectedEvents();
-			if (selectedEvents.length === 0) return;
+	deleteSelectedEvents(): void {
+		const selectedEvents = this.internal.getSelectedEvents();
+		if (selectedEvents.length === 0) return;
 
-			// Prevent deleting read-only events
-			const deletableEvents = selectedEvents.filter((event) => !event.readOnly);
-			if (deletableEvents.length === 0) return;
+		const deletableEvents = selectedEvents.filter((event) => !event.readOnly);
+		if (deletableEvents.length === 0) return;
 
-			// Prevent default behavior (like going back in browser)
-			e.preventDefault();
+		this.dispatchEvent(
+			new CustomEvent("delete-events", {
+				detail: { events: deletableEvents },
+				bubbles: true,
+			}),
+		);
 
-			this.dispatchEvent(
-				new CustomEvent("delete-events", {
-					detail: { events: deletableEvents },
-					bubbles: true,
-				}),
-			);
+		this.internal.clearSelection();
+		this.selectedEventForDetail = null;
+		this.selectedEventRect = null;
+		this.dispatchEvent(
+			new CustomEvent("selection-change", {
+				detail: { selectedEvents: [] },
+				bubbles: true,
+			}),
+		);
+	}
 
-			// Clear selection after delete
+	escape(): void {
+		if (this.isCreatingEvent || this.eventCreationStart) {
+			this.clearEventCreationState();
+			this.renderCanvas();
+			queueStatus("Event creation cancelled");
+		} else if (this.isDraggingEvent || this.movingEvent) {
+			this.resetDragState();
+			this.renderCanvas();
+			queueStatus("Event move cancelled");
+		} else if (this.isResizingEvent) {
+			this.isResizingEvent = false;
+			this.resizeEvent = null;
+			this.resizeStartY = 0;
+			this.resizeEdge = null;
+			this.renderCanvas();
+			queueStatus("Event resize cancelled");
+		} else if (
+			this.internal.getSelectedEvents().length > 0 ||
+			this.selectedEventForDetail
+		) {
 			this.internal.clearSelection();
 			this.selectedEventForDetail = null;
 			this.selectedEventRect = null;
+			this.isDescriptionExpanded = false;
+			this.renderCanvas();
+			this.requestUpdate();
 			this.dispatchEvent(
 				new CustomEvent("selection-change", {
 					detail: { selectedEvents: [] },
 					bubbles: true,
 				}),
 			);
-		} else if (e.key === "Escape") {
-			// Cancel any active dragging/creating operations
-			if (this.isCreatingEvent || this.eventCreationStart) {
-				e.preventDefault();
-				this.clearEventCreationState();
-				this.renderCanvas();
-				queueStatus("Event creation cancelled");
-			} else if (this.isDraggingEvent || this.movingEvent) {
-				e.preventDefault();
-				this.resetDragState();
-				this.renderCanvas();
-				queueStatus("Event move cancelled");
-			} else if (this.isResizingEvent) {
-				e.preventDefault();
-				this.isResizingEvent = false;
-				this.resizeEvent = null;
-				this.resizeStartY = 0;
-				this.resizeEdge = null;
-				this.renderCanvas();
-				queueStatus("Event resize cancelled");
-			} else if (
-				this.internal.getSelectedEvents().length > 0 ||
-				this.selectedEventForDetail
-			) {
-				// Clear selection if there are selected events or detail overlay is open
-				e.preventDefault();
-				this.internal.clearSelection();
-				this.selectedEventForDetail = null;
-				this.selectedEventRect = null;
-				this.isDescriptionExpanded = false;
-				this.renderCanvas();
-				this.requestUpdate();
-				this.dispatchEvent(
-					new CustomEvent("selection-change", {
-						detail: { selectedEvents: [] },
-						bubbles: true,
-					}),
-				);
-			}
 		}
-	};
+	}
 
 	onScrollContainerMouseMove = (e: MouseEvent): void => {
 		if (!this.scrollContainer || this.isDraggingZoom) return;
@@ -3506,16 +3684,22 @@ export class CalendarViewElement extends LitElement {
 
 		const rect = this.scrollContainer.getBoundingClientRect();
 		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / 7;
+		const dayWidth = gridWidth / this._columnsPerRow;
 
-		// Find day indices from X coordinates
-		const startDayIndex = Math.max(
+		// Find column indices from X coordinates
+		const startCol = Math.max(
 			0,
-			Math.min(6, Math.floor((minX - LEFT_GUTTER_WIDTH) / dayWidth)),
+			Math.min(
+				this._columnsPerRow - 1,
+				Math.floor((minX - LEFT_GUTTER_WIDTH) / dayWidth),
+			),
 		);
-		const endDayIndex = Math.max(
+		const endCol = Math.max(
 			0,
-			Math.min(6, Math.floor((maxX - LEFT_GUTTER_WIDTH) / dayWidth)),
+			Math.min(
+				this._columnsPerRow - 1,
+				Math.floor((maxX - LEFT_GUTTER_WIDTH) / dayWidth),
+			),
 		);
 
 		// Find all weeks that intersect with the selection box
@@ -3533,29 +3717,39 @@ export class CalendarViewElement extends LitElement {
 			// Example: Wed 14:00-16:00 across 3 weeks = 3 separate time ranges
 
 			for (const week of intersectingWeeks) {
-				const weekMinY = Math.max(minY, week.yOffset);
-				const weekMaxY = Math.min(maxY, week.yOffset + week.height);
-
-				// For each day in the selection
-				for (
-					let dayIndex = startDayIndex;
-					dayIndex <= endDayIndex;
-					dayIndex++
-				) {
+				// Check each day to see if it's in the selection box
+				for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
 					const day = week.days[dayIndex];
 					if (!day) continue;
 
+					const { row, col } = this.getDayVisualPosition(dayIndex);
+
+					// Check if this day's column is in the selection
+					if (col < startCol || col > endCol) continue;
+
+					// Calculate Y bounds for this visual row
+					const rowTop = week.yOffset + row * this.dayHeight;
+					const rowBottom = rowTop + this.dayHeight;
+
+					// Check if selection intersects with this row
+					if (maxY < rowTop || minY > rowBottom) continue;
+
+					const dayMinY = Math.max(minY, rowTop);
+					const dayMaxY = Math.min(maxY, rowBottom);
+
 					// Calculate start time for this day
-					const dayStartOffset = weekMinY - week.yOffset;
+					const dayStartOffset = dayMinY - rowTop;
 					const startMinutes = Math.floor(
-						(dayStartOffset / week.height) * 24 * 60,
+						(dayStartOffset / this.dayHeight) * 24 * 60,
 					);
 					const startHour = Math.floor(startMinutes / 60);
 					const startMinute = startMinutes % 60;
 
 					// Calculate end time for this day
-					const dayEndOffset = weekMaxY - week.yOffset;
-					const endMinutes = Math.ceil((dayEndOffset / week.height) * 24 * 60);
+					const dayEndOffset = dayMaxY - rowTop;
+					const endMinutes = Math.ceil(
+						(dayEndOffset / this.dayHeight) * 24 * 60,
+					);
 					const endHour = Math.floor(endMinutes / 60);
 					const endMinute = endMinutes % 60;
 
@@ -3569,21 +3763,33 @@ export class CalendarViewElement extends LitElement {
 				}
 			}
 		} else {
-			// ZOOMED OUT: Create time ranges per WEEK (day range within each week)
-			// Example: Wed-Thu across 3 weeks = 3 ranges (Wed 00:00 - Thu 23:59 per week)
+			// ZOOMED OUT: Create time ranges per visible day in selection
+			// For each day whose visual position is in the selection box
 
 			for (const week of intersectingWeeks) {
-				const startDay = week.days[startDayIndex];
-				const endDay = week.days[endDayIndex];
-				if (!startDay || !endDay) continue;
+				for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+					const day = week.days[dayIndex];
+					if (!day) continue;
 
-				const rangeStart = new Date(startDay);
-				rangeStart.setHours(0, 0, 0, 0);
+					const { row, col } = this.getDayVisualPosition(dayIndex);
 
-				const rangeEnd = new Date(endDay);
-				rangeEnd.setHours(23, 59, 59, 999);
+					// Check if this day's column is in the selection
+					if (col < startCol || col > endCol) continue;
 
-				timeRanges.push({ start: rangeStart, end: rangeEnd });
+					// Check if this day's row is in the selection
+					const rowTop = week.yOffset + row * this.dayHeight;
+					const rowBottom = rowTop + this.dayHeight;
+
+					if (maxY < rowTop || minY > rowBottom) continue;
+
+					const rangeStart = new Date(day);
+					rangeStart.setHours(0, 0, 0, 0);
+
+					const rangeEnd = new Date(day);
+					rangeEnd.setHours(23, 59, 59, 999);
+
+					timeRanges.push({ start: rangeStart, end: rangeEnd });
+				}
 			}
 		}
 
@@ -3661,6 +3867,8 @@ export class CalendarViewElement extends LitElement {
 
 			this.renderCanvas();
 
+			this.repositionEventDetailOverlay();
+
 			this.checkAndExtendRange();
 
 			this.saveScrollPosition();
@@ -3761,14 +3969,12 @@ export class CalendarViewElement extends LitElement {
 		this.internal.setFilter(input.value);
 	};
 
-	onCalDAVClick = (): void => {
-		this.dispatchEvent(new CustomEvent("caldav-config", { bubbles: true }));
-	};
-
 	onNotificationPopoverToggle = async (): Promise<void> => {
 		this.notificationPopoverOpen = !this.notificationPopoverOpen;
 		if (this.notificationPopoverOpen) {
-			this.dispatchEvent(new CustomEvent("load-notifications", { bubbles: true }));
+			this.dispatchEvent(
+				new CustomEvent("load-notifications", { bubbles: true }),
+			);
 		}
 		this.requestUpdate();
 	};
@@ -3778,7 +3984,6 @@ export class CalendarViewElement extends LitElement {
 		this.requestUpdate();
 	};
 
-
 	onThemeChange = (e: Event): void => {
 		const select = e.target as HTMLSelectElement;
 		const theme = select.value as ThemeName;
@@ -3813,8 +4018,6 @@ export class CalendarViewElement extends LitElement {
 	async onEventClick(event: CalendarEvent, e: MouseEvent): Promise<void> {
 		const isCmdOrCtrl = e.metaKey || e.ctrlKey;
 
-		console.log(event);
-
 		if (isCmdOrCtrl) {
 			this.internal.selectEvent(event, "toggle");
 		} else {
@@ -4091,17 +4294,21 @@ export class CalendarViewElement extends LitElement {
 		const fontFamily = getComputedStyle(this).fontFamily;
 		const scrollRect = this.scrollContainer.getBoundingClientRect();
 		const gridWidth = scrollRect.width - LEFT_GUTTER_WIDTH - MINIMAP_WIDTH;
-		const dayWidth = gridWidth / 7;
+		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 (!week) return null;
-			const totalMinutes = hours * 60 + minutes;
-			return (
-				week.yOffset + (totalMinutes / 1440) * week.height - this.scrollTop
+			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) => {
@@ -4113,7 +4320,8 @@ export class CalendarViewElement extends LitElement {
 				(d) => d.toDateString() === day.toDateString(),
 			);
 			if (dayIndex < 0) return null;
-			return dayIndex * dayWidth;
+			const { col } = this.getDayVisualPosition(dayIndex);
+			return col * dayWidth;
 		};
 
 		const drawBlock = (colX: number, top: number, bottom: number) => {
@@ -4255,7 +4463,7 @@ export class CalendarViewElement extends LitElement {
 
 		ctx.clearRect(0, 0, width, height);
 
-		const dayWidth = width / 7;
+		const dayWidth = width / this._columnsPerRow;
 		const scrollTop = this.scrollTop;
 		const fontFamily = getComputedStyle(this).fontFamily;
 
@@ -4275,16 +4483,18 @@ export class CalendarViewElement extends LitElement {
 			for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
 				const day = week.days[dayIndex];
 				if (!day) continue;
-				const x = dayIndex * dayWidth;
-				const dayTop = week.yOffset - scrollTop;
-				const dayBottom = dayTop + week.height;
+
+				const { row, col } = this.getDayVisualPosition(dayIndex);
+				const x = col * dayWidth;
+				const dayTop = week.yOffset + row * this.dayHeight - scrollTop;
+				const dayBottom = dayTop + this.dayHeight;
 
 				if (dayIndex === 5 || dayIndex === 6) {
 					const bgWeekend =
 						getComputedStyle(this).getPropertyValue("--bg-weekend").trim() ||
 						"rgba(255, 255, 255, 0.03)";
 					ctx.fillStyle = bgWeekend;
-					ctx.fillRect(x, dayTop, dayWidth, week.height);
+					ctx.fillRect(x, dayTop, dayWidth, this.dayHeight);
 				}
 
 				// Draw red outline for current day in zoomed-out view
@@ -4297,14 +4507,14 @@ export class CalendarViewElement extends LitElement {
 							.trim() || "rgba(255, 0, 0, 0.8)";
 					ctx.strokeStyle = accentTime;
 					ctx.lineWidth = 1;
-					ctx.strokeRect(x + 1, dayTop + 1, dayWidth - 2, week.height - 2);
+					ctx.strokeRect(x + 1, dayTop + 1, dayWidth - 2, this.dayHeight - 2);
 					ctx.lineWidth = 1;
 				}
 
 				const labelHeight = 12;
 				const labelBottomMargin = 64;
 				const labelY = Math.min(
-					dayBottom - labelHeight,
+					dayBottom - labelHeight - 8,
 					height - labelHeight - labelBottomMargin,
 				);
 
@@ -4316,6 +4526,78 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
+	renderWeekdayLabels(
+		ctx: CanvasRenderingContext2D,
+		dayWidth: number,
+		visibleWeeks: WeekInfo[],
+		scrollTop: number,
+		height: number,
+	): void {
+		if (visibleWeeks.length === 0) return;
+
+		const weekdayNames = this.internal.getWeekdayNames();
+		const fontFamily = getComputedStyle(this).fontFamily;
+		const textMuted =
+			getComputedStyle(this).getPropertyValue("--text-muted").trim() ||
+			"rgba(255, 255, 255, 0.4)";
+		const bgPrimary =
+			getComputedStyle(this).getPropertyValue("--bg-primary").trim() ||
+			"rgba(30, 30, 30, 0.9)";
+
+		ctx.font = `500 12px ${fontFamily}`;
+		ctx.textAlign = "center";
+		ctx.textBaseline = "top";
+
+		const labelHeight = 16;
+		const labelY = 12; // Below month label
+
+		// Find the first visible visual row
+		const firstWeek = visibleWeeks[0];
+		if (!firstWeek) return;
+
+		// 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;
+
+			// Check if this visual row is visible
+			if (rowBottom < 0 || rowTop > height) continue;
+
+			// 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();
+
+				// Draw text
+				ctx.fillStyle = textMuted;
+				ctx.fillText(dayName, x, stickyY + bgPaddingY + 1);
+			}
+		}
+	}
+
 	renderSelection(): ReturnType<typeof html> {
 		if (!this.selection) return html``;
 
@@ -4512,14 +4794,17 @@ export class CalendarViewElement extends LitElement {
 
 		const rect = this.scrollContainer.getBoundingClientRect();
 		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / 7;
+		const dayWidth = gridWidth / this._columnsPerRow;
 
 		// Check if X is in the calendar grid area
 		if (x < LEFT_GUTTER_WIDTH) return null;
 
-		const dayIndex = Math.max(
+		const col = Math.max(
 			0,
-			Math.min(6, Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth)),
+			Math.min(
+				this._columnsPerRow - 1,
+				Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth),
+			),
 		);
 
 		// Find week at Y position
@@ -4529,6 +4814,12 @@ export class CalendarViewElement extends LitElement {
 
 		if (!week) return null;
 
+		// Calculate which visual row within the week
+		const rowInWeek = Math.floor((y - week.yOffset) / this.dayHeight);
+		const dayIndex = rowInWeek * this._columnsPerRow + col;
+
+		if (dayIndex < 0 || dayIndex > 6) return null;
+
 		const day = week.days[dayIndex];
 		if (!day) return null;
 
@@ -4537,9 +4828,8 @@ export class CalendarViewElement extends LitElement {
 		let minute = 0;
 
 		if (this.dayHeight >= 200) {
-			const offsetInWeek =
-				yOffsetInWeek !== undefined ? yOffsetInWeek : y - week.yOffset;
-			const minutes = Math.floor((offsetInWeek / week.height) * 24 * 60);
+			const offsetInRow = y - (week.yOffset + rowInWeek * this.dayHeight);
+			const minutes = Math.floor((offsetInRow / this.dayHeight) * 24 * 60);
 			hour = Math.floor(minutes / 60);
 			minute = minutes % 60;
 		} else {
@@ -4558,7 +4848,7 @@ export class CalendarViewElement extends LitElement {
 
 		const rect = this.scrollContainer.getBoundingClientRect();
 		const gridWidth = rect.width - LEFT_GUTTER_WIDTH;
-		const dayWidth = gridWidth / 7;
+		const dayWidth = gridWidth / this._columnsPerRow;
 
 		// Find the week that contains this date
 		const dateStr = date.toDateString();
@@ -4572,15 +4862,18 @@ export class CalendarViewElement extends LitElement {
 		const dayIndex = week.days.findIndex((d) => d.toDateString() === dateStr);
 		if (dayIndex === -1) return null;
 
+		// Get visual position
+		const { row, col } = this.getDayVisualPosition(dayIndex);
+
 		// Calculate X position
-		const x = LEFT_GUTTER_WIDTH + dayIndex * dayWidth + dayWidth / 2;
+		const x = LEFT_GUTTER_WIDTH + col * dayWidth + dayWidth / 2;
 
 		// Calculate Y position based on time
 		const hours = date.getHours();
 		const minutes = date.getMinutes();
 		const totalMinutes = hours * 60 + minutes;
-		const offsetInWeek = (totalMinutes / (24 * 60)) * week.height;
-		const y = week.yOffset + offsetInWeek;
+		const offsetInRow = (totalMinutes / (24 * 60)) * this.dayHeight;
+		const y = week.yOffset + row * this.dayHeight + offsetInRow;
 
 		return { x, y };
 	}
@@ -4669,7 +4962,8 @@ export class CalendarViewElement extends LitElement {
 			return html`<div class="notification-empty-state">No notifications set</div>`;
 		}
 
-		return event.reminders.map(notif => html`
+		return event.reminders.map(
+			(notif) => html`
 			<div class="notification-item">
 				<select
 					class="notification-select"
@@ -4679,14 +4973,20 @@ export class CalendarViewElement extends LitElement {
 						this.updateNotification(event, notif.id, { triggerOffset: offset });
 					}}
 				>
-					${NOTIFICATION_PRESETS.map(p => html`<option value="${p.value}" ?selected=${p.value === notif.triggerOffset}>${p.label}</option>`)}
+					${NOTIFICATION_PRESETS.map(
+						(p) =>
+							html`<option value="${p.value}" ?selected=${
+								p.value === notif.triggerOffset
+							}>${p.label}</option>`,
+					)}
 				</select>
 				<button
 					class="notification-remove-button"
 					@click=${() => this.removeNotification(event, notif.id)}
 				>×</button>
 			</div>
-		`);
+		`,
+		);
 	}
 
 	addNotification(event: CalendarEvent) {
@@ -4696,31 +4996,41 @@ export class CalendarViewElement extends LitElement {
 			enabled: true,
 		};
 		const reminders = [...(event.reminders || []), newNotif];
-		this.dispatchEvent(new CustomEvent("update-event", {
-			detail: { event, updates: { reminders } },
-			bubbles: true,
-			composed: true,
-		}));
+		this.dispatchEvent(
+			new CustomEvent("update-event", {
+				detail: { event, updates: { reminders } },
+				bubbles: true,
+				composed: true,
+			}),
+		);
 	}
 
-	updateNotification(event: CalendarEvent, notifId: string, updates: { triggerOffset: number }) {
-		const reminders = (event.reminders || []).map(n =>
-			n.id === notifId ? { ...n, ...updates } : n
+	updateNotification(
+		event: CalendarEvent,
+		notifId: string,
+		updates: { triggerOffset: number },
+	) {
+		const reminders = (event.reminders || []).map((n) =>
+			n.id === notifId ? { ...n, ...updates } : n,
+		);
+		this.dispatchEvent(
+			new CustomEvent("update-event", {
+				detail: { event, updates: { reminders } },
+				bubbles: true,
+				composed: true,
+			}),
 		);
-		this.dispatchEvent(new CustomEvent("update-event", {
-			detail: { event, updates: { reminders } },
-			bubbles: true,
-			composed: true,
-		}));
 	}
 
 	removeNotification(event: CalendarEvent, notifId: string) {
-		const reminders = (event.reminders || []).filter(n => n.id !== notifId);
-		this.dispatchEvent(new CustomEvent("update-event", {
-			detail: { event, updates: { reminders } },
-			bubbles: true,
-			composed: true,
-		}));
+		const reminders = (event.reminders || []).filter((n) => n.id !== notifId);
+		this.dispatchEvent(
+			new CustomEvent("update-event", {
+				detail: { event, updates: { reminders } },
+				bubbles: true,
+				composed: true,
+			}),
+		);
 	}
 
 	shouldRenderEventWithStripes(event: CalendarEvent): boolean {
@@ -4809,9 +5119,13 @@ export class CalendarViewElement extends LitElement {
 		const containerHeight = this.scrollContainer?.clientHeight || 600;
 
 		// Try positioning to the right, fallback to left if no space
-		const rightPosition = this.selectedEventRect.x + this.selectedEventRect.width + GAP;
+		const rightPosition =
+			this.selectedEventRect.x + this.selectedEventRect.width + GAP;
 		const leftPosition = this.selectedEventRect.x - OVERLAY_WIDTH - GAP;
-		const preferredLeft = rightPosition + OVERLAY_WIDTH <= containerWidth ? rightPosition : leftPosition;
+		const preferredLeft =
+			rightPosition + OVERLAY_WIDTH <= containerWidth
+				? rightPosition
+				: leftPosition;
 
 		// Clamp to viewport boundaries
 		const minLeft = LEFT_GUTTER_WIDTH + GAP;
@@ -4829,24 +5143,22 @@ export class CalendarViewElement extends LitElement {
 
 		return html`
       <div class="event-detail-overlay" style="${style}">
-        <div class="event-detail-color-bar" style="opacity: ${
-					event.readOnly ? "0.5" : "1"
-				}"></div>
-
         <div class="event-detail-content">
           <div class="event-detail-header">
           <div class="event-detail-header-content">
             ${
-              event.calendar
-                ? html`
+							event.calendar
+								? html`
                     <div class="event-detail-section event-detail-calendar">
                         <div class="event-detail-value">${event.calendar}</div>
                     </div>
                     `
-                : null
-            }
+								: null
+						}
             ${
-							event.readOnly
+							event.readOnly ||
+							(event.organizer != null &&
+								!this.currentUserEmails.has(event.organizer.email))
 								? html`
               <h3 class="event-detail-title">${
 								event.rrule ? html`<span style="opacity: 0.6">⟳</span> ` : ""
@@ -5004,21 +5316,32 @@ export class CalendarViewElement extends LitElement {
 							: null;
 					})()}
 
-          ${!event.readOnly ? html`
+          ${
+						!event.readOnly
+							? html`
             <div class="event-detail-section">
-              <div class="event-detail-label">Notifications</div>
+              <div class="event-detail-label">
+                  <span>Notifications</span>
+                  
+                  <button class="notification-add-button" title="Add notification" @click=${() =>
+										this.addNotification(event)}>
+                    +
+                  </button>
+              </div>
               <div class="event-notifications">
                 ${this.renderNotificationsList(event)}
-                <button class="notification-add-button" @click=${() => this.addNotification(event)}>
-                  + Add notification
-                </button>
               </div>
             </div>
-          ` : null}
+          `
+							: null
+					}
 
           ${
-						event.description
-							? html`
+						event.readOnly ||
+						(event.organizer != null &&
+							!this.currentUserEmails.has(event.organizer.email))
+							? event.description
+								? html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <div class="event-detail-description ${
@@ -5048,7 +5371,58 @@ export class CalendarViewElement extends LitElement {
 								}
               </div>
             `
-							: null
+								: null
+							: html`
+              <div class="event-detail-section">
+                <div class="event-detail-label">Description</div>
+                <textarea
+                  class="event-detail-description-input"
+                  .value=${event.description ?? ""}
+                  placeholder="Add description..."
+                  rows="3"
+                  @input=${(e: Event) => {
+										const input = e.target as HTMLTextAreaElement;
+										const newDescription = input.value;
+										if (this.updateEventTimeout) {
+											clearTimeout(this.updateEventTimeout);
+										}
+										this.updateEventTimeout = setTimeout(() => {
+											this.dispatchEvent(
+												new CustomEvent("update-event", {
+													detail: {
+														event,
+														updates: { description: newDescription },
+													},
+													bubbles: true,
+													composed: true,
+												}),
+											);
+											this.updateEventTimeout = null;
+										}, 500);
+									}}
+                  @blur=${(e: Event) => {
+										const input = e.target as HTMLTextAreaElement;
+										const newDescription = input.value;
+										if (this.updateEventTimeout) {
+											clearTimeout(this.updateEventTimeout);
+											this.updateEventTimeout = null;
+										}
+										if (newDescription !== (event.description ?? "")) {
+											this.dispatchEvent(
+												new CustomEvent("update-event", {
+													detail: {
+														event,
+														updates: { description: newDescription },
+													},
+													bubbles: true,
+													composed: true,
+												}),
+											);
+										}
+									}}
+                />
+              </div>
+            `
 					}
           </div>
 
@@ -5113,15 +5487,12 @@ export class CalendarViewElement extends LitElement {
       <div class="container ${this.isDraggingFile ? "dragging-file" : ""}">
         <div class="toolbar">
           <div class="toolbar-left">
-            <button class="toolbar-button" title="CalDAV Sources" @click=${
-							this.onCalDAVClick
-						}>
-            📅
-            </button>
-            <button class="toolbar-button" title="Upcoming Notifications" @click=${
-							this.onNotificationPopoverToggle
+            <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
@@ -5140,7 +5511,6 @@ export class CalendarViewElement extends LitElement {
               →
             </button>
             <div class="toolbar-zoom">
-              <span class="toolbar-zoom-label">Zoom</span>
               <input
                 type="range"
                 class="toolbar-zoom-slider"
@@ -5175,19 +5545,8 @@ export class CalendarViewElement extends LitElement {
                 @input=${this.onFilterInput}
               />
             </div>
-            
-            <slot name="toolbar-center"></slot>
           </div>
         </div>
-        
-        <div class="header">
-            <div class="header-gutter"></div>
-            <div class="weekdays">
-            ${this.internal
-							.getWeekdayNames()
-							.map((name) => html`<div class="weekday">${name}</div>`)}
-            </div>
-        </div>
 
         <div class="body">
           <div class="calendar-area">
@@ -5243,31 +5602,45 @@ export class CalendarViewElement extends LitElement {
 		};
 
 		return html`
-			<div class="notification-popover-overlay" @click=${this.onNotificationPopoverToggle}></div>
+			<div class="notification-popover-overlay" @click=${
+				this.onNotificationPopoverToggle
+			}></div>
 			<div class="notification-popover">
 				<div class="notification-popover-header">
 					<h3>Upcoming Notifications</h3>
-					<button class="notification-popover-close" @click=${this.onNotificationPopoverToggle}>×</button>
+					<button class="notification-popover-close" @click=${
+						this.onNotificationPopoverToggle
+					}>×</button>
 				</div>
 				<div class="notification-popover-content">
-					${this.scheduledNotifications.length === 0
-						? html`<div class="notification-popover-empty">No scheduled notifications</div>`
-						: this.scheduledNotifications.map(
-								(notif) => html`
+					${
+						this.scheduledNotifications.length === 0
+							? html`<div class="notification-popover-empty">No scheduled notifications</div>`
+							: this.scheduledNotifications.map(
+									(notif) => html`
 									<div class="notification-popover-item">
 										<div class="notification-popover-item-header">
-											<div class="notification-popover-item-title">${notif.eventTitle}</div>
-											<div class="notification-popover-item-time">${formatTriggerTime(notif.triggerTime)}</div>
+											<div class="notification-popover-item-title">${
+												notif.eventTitle
+											}</div>
+											<div class="notification-popover-item-time">${formatTriggerTime(
+												notif.triggerTime,
+											)}</div>
 										</div>
 										<div class="notification-popover-item-details">
-											<div class="notification-popover-item-event-time">📅 ${formatEventTime(notif.eventStart)}</div>
-											${notif.eventLocation
-												? html`<div class="notification-popover-item-location">📍 ${notif.eventLocation}</div>`
-												: null}
+											<div class="notification-popover-item-event-time">📅 ${formatEventTime(
+												notif.eventStart,
+											)}</div>
+											${
+												notif.eventLocation
+													? html`<div class="notification-popover-item-location">📍 ${notif.eventLocation}</div>`
+													: null
+											}
 										</div>
 									</div>
 								`,
-						  )}
+							  )
+					}
 				</div>
 			</div>
 		`;