@luckydye/calendar 1.1.2 → 1.1.3

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;
@@ -381,6 +342,18 @@ export class CalendarViewElement extends LitElement {
       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));
@@ -430,6 +403,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 +429,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 +516,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 {
@@ -846,6 +827,53 @@ 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 }> = [];
@@ -957,7 +985,34 @@ export class CalendarViewElement extends LitElement {
 	}
 
 	scrollToToday = (): void => {
-		this.scrollToDate(new Date(), 0.5, true, true);
+		const now = new Date();
+
+		// Ensure today is in range before computing offset
+		let weekIndex = this.weeks.findIndex(
+			(w) => w.days.some((d) => CalendarInternal.isSameDay(d, now)),
+		);
+		if (weekIndex < 0) {
+			this.weeks = this.internal.resetRangeAroundDate(now);
+			this.updateWeekOffsets();
+			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, true, true);
 	};
 
 	// History management methods
@@ -1180,7 +1235,6 @@ 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);
@@ -1193,7 +1247,6 @@ export class CalendarViewElement extends LitElement {
 		super.disconnectedCallback();
 		document.removeEventListener("mousemove", this.onMouseMove);
 		document.removeEventListener("mouseup", this.onMouseUp);
-		window.removeEventListener("keydown", this.onKeyDown);
 		window.removeEventListener("paste", this.onPaste);
 		this.removeEventListener("dragstart", this.onDragStart);
 		this.removeEventListener("dragend", this.onDragEnd);
@@ -1323,6 +1376,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 +1399,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 +1445,40 @@ 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 +1496,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 +1533,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 +1615,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 +1655,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 +1678,14 @@ 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");
@@ -1671,6 +1762,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();
 		}
@@ -1946,11 +2041,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 +2086,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 +2122,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 +2155,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 +2535,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 +2546,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
@@ -2953,110 +3064,82 @@ 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 +3589,16 @@ 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 +3616,37 @@ 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 +3660,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;
-
-				const rangeStart = new Date(startDay);
-				rangeStart.setHours(0, 0, 0, 0);
+				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;
+					
+					// 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(endDay);
-				rangeEnd.setHours(23, 59, 59, 999);
+					const rangeEnd = new Date(day);
+					rangeEnd.setHours(23, 59, 59, 999);
 
-				timeRanges.push({ start: rangeStart, end: rangeEnd });
+					timeRanges.push({ start: rangeStart, end: rangeEnd });
+				}
 			}
 		}
 
@@ -3761,10 +3864,6 @@ 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) {
@@ -4091,16 +4190,22 @@ 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 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 (
-				week.yOffset + (totalMinutes / 1440) * week.height - this.scrollTop
+				rowY + (totalMinutes / 1440) * this.dayHeight - this.scrollTop
 			);
 		};
 
@@ -4113,7 +4218,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 +4361,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 +4381,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 +4405,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 +4424,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 +4692,14 @@ 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 +4709,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 +4723,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 +4743,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 +4757,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 };
 	}
@@ -4846,7 +5034,7 @@ export class CalendarViewElement extends LitElement {
                 : 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> ` : ""
@@ -5006,19 +5194,23 @@ export class CalendarViewElement extends LitElement {
 
           ${!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}
 
           ${
-						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 +5240,52 @@ 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,16 +5350,8 @@ 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
-						}>
-            🔔
-            </button>
+            <slot name="toolbar-center"></slot>
+            
             <button class="toolbar-button" title="Today" @click=${
 							this.scrollToToday
 						}>
@@ -5140,7 +5369,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 +5403,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">