@luckydye/calendar 1.1.3 → 1.2.1

package/src/CalendarView.ts

@@ -241,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;
     }
@@ -330,12 +334,11 @@ 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;
@@ -356,7 +359,6 @@ export class CalendarViewElement extends LitElement {
 
     .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 {
@@ -377,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 {
@@ -745,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();
@@ -851,17 +928,19 @@ export class CalendarViewElement extends LitElement {
 		return { row, col };
 	}
 
-	getVisualPositionFromCoords(x: number, y: number, gridWidth: number): { dayIndex: number; timeFraction: number; weekYOffset: number } | null {
+	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
+		const week = this.weeks.find(
+			(w) => w.height > 0 && y >= w.yOffset && y < w.yOffset + w.height,
 		);
 		if (!week) return null;
 
@@ -933,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 {
@@ -984,18 +1070,16 @@ export class CalendarViewElement extends LitElement {
 		}
 	}
 
-	scrollToToday = (): void => {
+	scrollToToday = (animate = true): void => {
 		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)),
+		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)),
+			weekIndex = this.weeks.findIndex((w) =>
+				w.days.some((d) => CalendarInternal.isSameDay(d, now)),
 			);
 		}
 
@@ -1012,7 +1096,17 @@ export class CalendarViewElement extends LitElement {
 			}
 		}
 
-		this.scrollToDate(now, offsetInWeek, true, true);
+		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
@@ -1100,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)) ||
@@ -1113,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(
@@ -1127,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();
 			}
 		}
 	}
@@ -1147,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) {
@@ -1234,25 +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("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("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",
@@ -1277,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() {
@@ -1299,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,
@@ -1451,15 +1535,18 @@ export class CalendarViewElement extends LitElement {
 
 	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)));
-		
+		const optimalColumns = Math.max(
+			1,
+			Math.min(7, Math.floor(gridWidth / minDayWidth)),
+		);
+
 		if (this._columnsPerRow !== optimalColumns) {
 			this._columnsPerRow = optimalColumns;
 			this.updateWeekOffsets();
@@ -1685,7 +1772,8 @@ export class CalendarViewElement extends LitElement {
 				if (todayIndex >= 0) {
 					const { row } = this.getDayVisualPosition(todayIndex);
 					const currentMinutes = today.getHours() * 60 + today.getMinutes();
-					const timeY = y + row * this.dayHeight + (currentMinutes / 1440) * this.dayHeight;
+					const timeY =
+						y + row * this.dayHeight + (currentMinutes / 1440) * this.dayHeight;
 
 					if (timeY >= 0 && timeY <= height) {
 						const hours = today.getHours().toString().padStart(2, "0");
@@ -1718,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();
 					}
@@ -1762,10 +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();
 		}
@@ -1895,7 +1986,7 @@ export class CalendarViewElement extends LitElement {
 						});
 					}
 					return result;
-				})
+			  })
 			: timedSegments;
 
 		// Combine segments with all-day events first (so they get top rows)
@@ -2577,6 +2668,8 @@ export class CalendarViewElement extends LitElement {
 	}
 
 	onWheel = (e: WheelEvent): void => {
+		if (this.hasAttribute("scroll-lock")) return;
+
 		if (this.scrollAnimationFrame) {
 			this.cancelScrollAnimation();
 		}
@@ -3077,7 +3170,9 @@ export class CalendarViewElement extends LitElement {
 		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`);
+			queueStatus(
+				`Copied ${count} event${count === 1 ? "" : "s"} to clipboard`,
+			);
 		});
 	}
 
@@ -3594,11 +3689,17 @@ export class CalendarViewElement extends LitElement {
 		// Find column indices from X coordinates
 		const startCol = Math.max(
 			0,
-			Math.min(this._columnsPerRow - 1, Math.floor((minX - LEFT_GUTTER_WIDTH) / dayWidth)),
+			Math.min(
+				this._columnsPerRow - 1,
+				Math.floor((minX - LEFT_GUTTER_WIDTH) / dayWidth),
+			),
 		);
 		const endCol = Math.max(
 			0,
-			Math.min(this._columnsPerRow - 1, 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
@@ -3620,19 +3721,19 @@ export class CalendarViewElement extends LitElement {
 				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);
 
@@ -3646,7 +3747,9 @@ export class CalendarViewElement extends LitElement {
 
 					// Calculate end time for this day
 					const dayEndOffset = dayMaxY - rowTop;
-					const endMinutes = Math.ceil((dayEndOffset / this.dayHeight) * 24 * 60);
+					const endMinutes = Math.ceil(
+						(dayEndOffset / this.dayHeight) * 24 * 60,
+					);
 					const endHour = Math.floor(endMinutes / 60);
 					const endMinute = endMinutes % 60;
 
@@ -3667,18 +3770,18 @@ export class CalendarViewElement extends LitElement {
 				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);
 
@@ -3764,6 +3867,8 @@ export class CalendarViewElement extends LitElement {
 
 			this.renderCanvas();
 
+			this.repositionEventDetailOverlay();
+
 			this.checkAndExtendRange();
 
 			this.saveScrollPosition();
@@ -3867,7 +3972,9 @@ export class CalendarViewElement extends LitElement {
 	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();
 	};
@@ -3877,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;
@@ -3912,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 {
@@ -4204,9 +4308,7 @@ export class CalendarViewElement extends LitElement {
 			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
-			);
+			return rowY + (totalMinutes / 1440) * this.dayHeight - this.scrollTop;
 		};
 
 		const getDayColumnX = (day: Date) => {
@@ -4381,7 +4483,7 @@ export class CalendarViewElement extends LitElement {
 			for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
 				const day = week.days[dayIndex];
 				if (!day) continue;
-				
+
 				const { row, col } = this.getDayVisualPosition(dayIndex);
 				const x = col * dayWidth;
 				const dayTop = week.yOffset + row * this.dayHeight - scrollTop;
@@ -4699,7 +4801,10 @@ export class CalendarViewElement extends LitElement {
 
 		const col = Math.max(
 			0,
-			Math.min(this._columnsPerRow - 1, Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth)),
+			Math.min(
+				this._columnsPerRow - 1,
+				Math.floor((x - LEFT_GUTTER_WIDTH) / dayWidth),
+			),
 		);
 
 		// Find week at Y position
@@ -4712,9 +4817,9 @@ export class CalendarViewElement extends LitElement {
 		// Calculate which visual row within the week
 		const rowInWeek = Math.floor((y - week.yOffset) / this.dayHeight);
 		const dayIndex = rowInWeek * this._columnsPerRow + col;
-		
+
 		if (dayIndex < 0 || dayIndex > 6) return null;
-		
+
 		const day = week.days[dayIndex];
 		if (!day) return null;
 
@@ -4857,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"
@@ -4867,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) {
@@ -4884,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 {
@@ -4997,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;
@@ -5017,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.organizer != null && !this.currentUserEmails.has(event.organizer.email)))
+							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> ` : ""
@@ -5192,12 +5316,15 @@ export class CalendarViewElement extends LitElement {
 							: null;
 					})()}
 
-          ${!event.readOnly ? html`
+          ${
+						!event.readOnly
+							? html`
             <div class="event-detail-section">
               <div class="event-detail-label">
                   <span>Notifications</span>
                   
-                  <button class="notification-add-button" title="Add notification" @click=${() => this.addNotification(event)}>
+                  <button class="notification-add-button" title="Add notification" @click=${() =>
+										this.addNotification(event)}>
                     +
                   </button>
               </div>
@@ -5205,10 +5332,14 @@ export class CalendarViewElement extends LitElement {
                 ${this.renderNotificationsList(event)}
               </div>
             </div>
-          ` : null}
+          `
+							: null
+					}
 
           ${
-						(event.readOnly || (event.organizer != null && !this.currentUserEmails.has(event.organizer.email)))
+						event.readOnly ||
+						(event.organizer != null &&
+							!this.currentUserEmails.has(event.organizer.email))
 							? event.description
 								? html`
               <div class="event-detail-section">
@@ -5258,7 +5389,10 @@ export class CalendarViewElement extends LitElement {
 										this.updateEventTimeout = setTimeout(() => {
 											this.dispatchEvent(
 												new CustomEvent("update-event", {
-													detail: { event, updates: { description: newDescription } },
+													detail: {
+														event,
+														updates: { description: newDescription },
+													},
 													bubbles: true,
 													composed: true,
 												}),
@@ -5276,7 +5410,10 @@ export class CalendarViewElement extends LitElement {
 										if (newDescription !== (event.description ?? "")) {
 											this.dispatchEvent(
 												new CustomEvent("update-event", {
-													detail: { event, updates: { description: newDescription } },
+													detail: {
+														event,
+														updates: { description: newDescription },
+													},
 													bubbles: true,
 													composed: true,
 												}),
@@ -5352,6 +5489,11 @@ export class CalendarViewElement extends LitElement {
           <div class="toolbar-left">
             <slot name="toolbar-center"></slot>
             
+            <button class="toolbar-button" title="Month" @click=${
+							this.scrollToMonth
+						}>
+              Month
+            </button>
             <button class="toolbar-button" title="Today" @click=${
 							this.scrollToToday
 						}>
@@ -5460,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>
 		`;