@luckydye/calendar 1.3.2 → 1.4.0

package/src/layers/EventsLayer.ts

@@ -3,10 +3,16 @@ import type {
 	EventSegment,
 	WeekInfo,
 } from "../CalendarInternal.js";
-import { TIME_SCALE_DAY_HEIGHT, type CalendarLayer, type LayerContext } from "../CalendarLayer.js";
+import type { CalendarLayer, LayerContext } from "../CalendarLayer.js";
 import { hexToRgb, rgbToHsl } from "../Color.js";
 
 const MIN_EVENT_HEIGHT = 20;
+const COMPACT_EVENT_HEIGHT = 6;
+const COMPACT_EVENT_THRESHOLD = 110;
+const TIME_SCALE_EVENT_THRESHOLD = 400;
+const MONTH_LABEL_HEIGHT = 40;
+const MONTH_LABEL_GAP = 4;
+const DAY_CELL_EVENT_INSET = 6;
 
 export interface EventRect {
 	event: CalendarEvent;
@@ -16,8 +22,22 @@ export interface EventRect {
 	height: number;
 }
 
+export interface PreviewEventData {
+	id: string;
+	start: Date;
+	end: Date;
+	color: {
+		fill: string;
+		stroke: string;
+		text: string;
+		dashed?: boolean;
+	};
+	excludeEventId?: string | null;
+}
+
 export interface EventsState {
 	events: CalendarEvent[];
+	previewEvents: PreviewEventData[];
 	hoveredEventId: string | null;
 	isEventSelected: (event: CalendarEvent) => boolean;
 	shouldRenderEventWithStripes: (event: CalendarEvent) => boolean;
@@ -37,6 +57,7 @@ export function createEventsLayer(
 				width,
 				height,
 				scrollTop,
+				scrollLeft,
 				dayWidth,
 				dayHeight,
 				leftGutterWidth,
@@ -47,25 +68,42 @@ export function createEventsLayer(
 				getDayVisualPosition,
 			} = lc;
 
-			const events = state.events;
+			const previewEvents = state.previewEvents;
+			const excludedEventIds = new Set(
+				previewEvents
+					.map((preview) => preview.excludeEventId)
+					.filter((id): id is string => Boolean(id)),
+			);
+			const events = state.events.filter(
+				(event) => !excludedEventIds.has(event.id),
+			);
 			const viewportBottom = scrollTop + height;
-			const showTimeScale = dayHeight >= TIME_SCALE_DAY_HEIGHT;
+			const showTimeScale = dayHeight >= TIME_SCALE_EVENT_THRESHOLD;
+			const showCompactEvents =
+				!showTimeScale && dayHeight < COMPACT_EVENT_THRESHOLD;
 
 			layer.eventRects = [];
 
 			if (visibleWeeks.length === 0) return;
 
 			const firstVisibleWeek = visibleWeeks[0]!;
-			const lastVisibleWeek =
-				visibleWeeks[visibleWeeks.length - 1]!;
+			const lastVisibleWeek = visibleWeeks[visibleWeeks.length - 1]!;
 			const firstVisibleDay = firstVisibleWeek.days[0]!;
 			const lastVisibleDay = lastVisibleWeek.days[6]!;
 			const visibleStartTime = firstVisibleDay.getTime();
-			const visibleEndTime =
-				lastVisibleDay.getTime() + 86400000 - 1;
+			const visibleEndTime = lastVisibleDay.getTime() + 86400000 - 1;
 
 			const dayOccupiedRows = new Map<string, Set<number>>();
 			const eventRowIndex = new Map<string, number>();
+			const overflowedDays = new Map<
+				string,
+				{
+					weekIndex: number;
+					dayIndex: number;
+					topInset: number;
+					maxEventsInRow: number;
+				}
+			>();
 
 			const segments: EventSegment[] = [];
 			const allDaySegments: EventSegment[] = [];
@@ -76,10 +114,7 @@ export function createEventsLayer(
 				const eventStartTime = event.start.getTime();
 				const eventEndTime = event.end.getTime();
 
-				if (
-					eventEndTime < visibleStartTime ||
-					eventStartTime > visibleEndTime
-				)
+				if (eventEndTime < visibleStartTime || eventStartTime > visibleEndTime)
 					continue;
 
 				const eventWeeks: {
@@ -95,10 +130,7 @@ export function createEventsLayer(
 					const weekStart = weekStartDay.getTime();
 					const weekEnd = weekEndDay.getTime() + 86399999;
 
-					if (
-						eventEndTime >= weekStart &&
-						eventStartTime <= weekEnd
-					) {
+					if (eventEndTime >= weekStart && eventStartTime <= weekEnd) {
 						const weekIndex = allWeeks.indexOf(week);
 						eventWeeks.push({ weekIndex, week });
 					}
@@ -117,19 +149,13 @@ export function createEventsLayer(
 					let endDayIndex = 6;
 
 					if (isStart) {
-						startDayIndex = getDayIndexInWeek(
-							week,
-							event.start,
-						);
+						startDayIndex = getDayIndexInWeek(week, event.start);
 					}
 					if (isEnd) {
 						const effectiveEnd = isAllDay
 							? new Date(event.end.getTime() - 1)
 							: event.end;
-						endDayIndex = getDayIndexInWeek(
-							week,
-							effectiveEnd,
-						);
+						endDayIndex = getDayIndexInWeek(week, effectiveEnd);
 					}
 
 					const segment = {
@@ -153,30 +179,47 @@ export function createEventsLayer(
 
 			const renderedTimedSegments = showTimeScale
 				? timedSegments.flatMap((seg) => {
-						if (seg.startDayIndex === seg.endDayIndex)
-							return [seg];
+						if (seg.startDayIndex === seg.endDayIndex) return [seg];
 						const result = [];
-						for (
-							let d = seg.startDayIndex;
-							d <= seg.endDayIndex;
-							d++
-						) {
+						for (let d = seg.startDayIndex; d <= seg.endDayIndex; d++) {
 							result.push({
 								...seg,
 								startDayIndex: d,
 								endDayIndex: d,
-								isStart:
-									d === seg.startDayIndex && seg.isStart,
+								isStart: d === seg.startDayIndex && seg.isStart,
 								isEnd: d === seg.endDayIndex && seg.isEnd,
 								totalWeeks: 1,
 							});
 						}
 						return result;
-					})
+				  })
 				: timedSegments;
 
 			segments.push(...allDaySegments, ...renderedTimedSegments);
 
+			const monthHeaderWeeks = new Set<number>();
+			const firstVisibleWeekIndex = allWeeks.indexOf(visibleWeeks[0]!);
+			let previousMonthKey: string | null = null;
+			if (firstVisibleWeekIndex > 0) {
+				const previousDay = allWeeks[firstVisibleWeekIndex - 1]?.days[6];
+				if (previousDay) {
+					previousMonthKey = `${previousDay.getMonth()}-${previousDay.getFullYear()}`;
+				}
+			}
+			for (const week of visibleWeeks) {
+				const weekIndex = allWeeks.indexOf(week);
+				if (weekIndex < 0) continue;
+				for (const day of week.days) {
+					if (!day) continue;
+					const monthKey = `${day.getMonth()}-${day.getFullYear()}`;
+					if (monthKey !== previousMonthKey) {
+						monthHeaderWeeks.add(weekIndex);
+						previousMonthKey = monthKey;
+						break;
+					}
+				}
+			}
+
 			// Calculate columns for overlapping events in time scale mode
 			interface EventLayout {
 				segment: EventSegment;
@@ -186,10 +229,7 @@ export function createEventsLayer(
 				totalColumns: number;
 			}
 
-			const segmentsByWeekDay = new Map<
-				string,
-				EventSegment[]
-			>();
+			const segmentsByWeekDay = new Map<string, EventSegment[]>();
 			for (const segment of segments) {
 				const allDay = segment.event.isAllDay === true;
 				if (showTimeScale && !allDay) {
@@ -202,7 +242,7 @@ export function createEventsLayer(
 						if (!segmentsByWeekDay.has(key)) {
 							segmentsByWeekDay.set(key, []);
 						}
-						segmentsByWeekDay.get(key)!.push(segment);
+						segmentsByWeekDay.get(key)?.push(segment);
 					}
 				}
 			}
@@ -214,8 +254,8 @@ export function createEventsLayer(
 
 			for (const [dayKey, daySegments] of segmentsByWeekDay) {
 				const [weekIndexStr, dayIndexStr] = dayKey.split("-");
-				const dayIndex = parseInt(dayIndexStr!);
-				const weekIndex = parseInt(weekIndexStr!);
+				const dayIndex = Number.parseInt(dayIndexStr!);
+				const weekIndex = Number.parseInt(weekIndexStr!);
 
 				interface SegmentTime {
 					segment: EventSegment;
@@ -228,34 +268,31 @@ export function createEventsLayer(
 					const week = allWeeks[weekIndex];
 					if (!week) continue;
 
-					const dayStartTime = new Date(
-						week.days[dayIndex]!,
-					).setHours(0, 0, 0, 0);
-					const dayEndTime = new Date(
-						week.days[dayIndex]!,
-					).setHours(23, 59, 59, 999);
-					const eventStartTime = seg.event.start.getTime();
-					const eventEndTime =
-						seg.event.end.getTime() - 60000;
-
-					const effectiveStartTime = Math.max(
-						eventStartTime,
-						dayStartTime,
+					const dayStartTime = new Date(week.days[dayIndex]!).setHours(
+						0,
+						0,
+						0,
+						0,
 					);
-					const effectiveEndTime = Math.min(
-						eventEndTime,
-						dayEndTime,
+					const dayEndTime = new Date(week.days[dayIndex]!).setHours(
+						23,
+						59,
+						59,
+						999,
 					);
+					const eventStartTime = seg.event.start.getTime();
+					const eventEndTime = seg.event.end.getTime() - 60000;
+
+					const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
+					const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
 
 					const effectiveStart = new Date(effectiveStartTime);
 					const effectiveEnd = new Date(effectiveEndTime);
 
 					const startMinutes =
-						effectiveStart.getHours() * 60 +
-						effectiveStart.getMinutes();
+						effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
 					const endMinutes =
-						effectiveEnd.getHours() * 60 +
-						effectiveEnd.getMinutes();
+						effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
 
 					segmentTimes.push({
 						segment: seg,
@@ -268,9 +305,7 @@ export function createEventsLayer(
 					if (a.startMinutes !== b.startMinutes)
 						return a.startMinutes - b.startMinutes;
 					return (
-						b.endMinutes -
-						b.startMinutes -
-						(a.endMinutes - a.startMinutes)
+						b.endMinutes - b.startMinutes - (a.endMinutes - a.startMinutes)
 					);
 				});
 
@@ -278,15 +313,8 @@ export function createEventsLayer(
 
 				for (const st of segmentTimes) {
 					let columnIndex = 0;
-					for (
-						;
-						columnIndex < columns.length;
-						columnIndex++
-					) {
-						if (
-							columns[columnIndex]!.endMinutes <=
-							st.startMinutes
-						) {
+					for (; columnIndex < columns.length; columnIndex++) {
+						if (columns[columnIndex]?.endMinutes <= st.startMinutes) {
 							break;
 						}
 					}
@@ -294,8 +322,7 @@ export function createEventsLayer(
 					if (columnIndex === columns.length) {
 						columns.push({ endMinutes: st.endMinutes });
 					} else {
-						columns[columnIndex]!.endMinutes =
-							st.endMinutes;
+						columns[columnIndex]!.endMinutes = st.endMinutes;
 					}
 
 					const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
@@ -329,55 +356,52 @@ export function createEventsLayer(
 				const weekYOffset = week.yOffset;
 				const allDay = event.isAllDay === true;
 
-				const startVisualPos =
-					getDayVisualPosition(startDayIndex);
+				const startVisualPos = getDayVisualPosition(startDayIndex);
 				const endVisualPos = getDayVisualPosition(endDayIndex);
 
 				let yStart: number;
 				let yEnd: number;
 
 				if (showTimeScale && !allDay) {
-					const dayStartTime = new Date(
-						week.days[startDayIndex]!,
-					).setHours(0, 0, 0, 0);
-					const dayEndTime = new Date(
-						week.days[endDayIndex]!,
-					).setHours(23, 59, 59, 999);
-					const eventStartTime = event.start.getTime();
-					const eventEndTime =
-						event.end.getTime() - 60000;
-
-					const effectiveStartTime = Math.max(
-						eventStartTime,
-						dayStartTime,
+					const dayStartTime = new Date(week.days[startDayIndex]!).setHours(
+						0,
+						0,
+						0,
+						0,
 					);
-					const effectiveEndTime = Math.min(
-						eventEndTime,
-						dayEndTime,
+					const dayEndTime = new Date(week.days[endDayIndex]!).setHours(
+						23,
+						59,
+						59,
+						999,
 					);
+					const eventStartTime = event.start.getTime();
+					const eventEndTime = event.end.getTime() - 60000;
 
-					const effectiveStart = new Date(
-						effectiveStartTime,
-					);
+					const effectiveStartTime = Math.max(eventStartTime, dayStartTime);
+					const effectiveEndTime = Math.min(eventEndTime, dayEndTime);
+
+					const effectiveStart = new Date(effectiveStartTime);
 					const effectiveEnd = new Date(effectiveEndTime);
 
 					const startMinutes =
-						effectiveStart.getHours() * 60 +
-						effectiveStart.getMinutes();
+						effectiveStart.getHours() * 60 + effectiveStart.getMinutes();
 					const endMinutes =
-						effectiveEnd.getHours() * 60 +
-						effectiveEnd.getMinutes();
+						effectiveEnd.getHours() * 60 + effectiveEnd.getMinutes();
 
-					const visualRowY =
-						weekYOffset +
-						startVisualPos.row * dayHeight;
-					yStart =
-						visualRowY +
-						(startMinutes / 1440) * dayHeight;
-					yEnd =
-						visualRowY +
-						(endMinutes / 1440) * dayHeight;
+					const visualRowY = weekYOffset + startVisualPos.row * dayHeight;
+					yStart = visualRowY + (startMinutes / 1440) * dayHeight;
+					yEnd = visualRowY + (endMinutes / 1440) * dayHeight;
 				} else {
+					const topInset = monthHeaderWeeks.has(weekIndex)
+						? MONTH_LABEL_HEIGHT + MONTH_LABEL_GAP + DAY_CELL_EVENT_INSET
+						: DAY_CELL_EVENT_INSET;
+					const rowHeight = showCompactEvents
+						? COMPACT_EVENT_HEIGHT + 2
+						: MIN_EVENT_HEIGHT + 2;
+					const eventBlockHeight = showCompactEvents
+						? COMPACT_EVENT_HEIGHT
+						: MIN_EVENT_HEIGHT;
 					const eventKey = `${weekIndex}-${event.id}`;
 					let rowIndex = eventRowIndex.get(eventKey);
 
@@ -385,14 +409,9 @@ export function createEventsLayer(
 						rowIndex = 0;
 						while (true) {
 							let rowFree = true;
-							for (
-								let d = startDayIndex;
-								d <= endDayIndex;
-								d++
-							) {
+							for (let d = startDayIndex; d <= endDayIndex; d++) {
 								const dayKey = `${weekIndex}-${d}`;
-								const occupied =
-									dayOccupiedRows.get(dayKey);
+								const occupied = dayOccupiedRows.get(dayKey);
 								if (occupied?.has(rowIndex)) {
 									rowFree = false;
 									break;
@@ -404,11 +423,7 @@ export function createEventsLayer(
 						eventRowIndex.set(eventKey, rowIndex);
 					}
 
-					for (
-						let d = startDayIndex;
-						d <= endDayIndex;
-						d++
-					) {
+					for (let d = startDayIndex; d <= endDayIndex; d++) {
 						const dayKey = `${weekIndex}-${d}`;
 						let occupied = dayOccupiedRows.get(dayKey);
 						if (!occupied) {
@@ -418,23 +433,31 @@ export function createEventsLayer(
 						occupied.add(rowIndex);
 					}
 
-					const maxEventsInRow = Math.floor(
-						(dayHeight - 4) / (MIN_EVENT_HEIGHT + 2),
-					);
-					if (rowIndex >= maxEventsInRow) continue;
+					const maxEventsInRow = Math.floor((dayHeight - topInset) / rowHeight);
+					const visibleEventsInRow = Math.max(0, maxEventsInRow - 1);
+					if (rowIndex >= visibleEventsInRow) {
+						for (let d = startDayIndex; d <= endDayIndex; d++) {
+							overflowedDays.set(`${weekIndex}-${d}`, {
+								weekIndex,
+								dayIndex: d,
+								topInset,
+								maxEventsInRow: visibleEventsInRow,
+							});
+						}
+						continue;
+					}
 
-					const visualRowY =
-						weekYOffset +
-						startVisualPos.row * dayHeight;
-					yStart =
-						visualRowY +
-						4 +
-						rowIndex * (MIN_EVENT_HEIGHT + 2);
-					yEnd = yStart + MIN_EVENT_HEIGHT;
+					const visualRowY = weekYOffset + startVisualPos.row * dayHeight;
+					yStart = visualRowY + topInset + rowIndex * rowHeight;
+					yEnd = yStart + eventBlockHeight;
 				}
 
 				const eventHeight = Math.max(
-					showTimeScale ? 4 : MIN_EVENT_HEIGHT,
+					showTimeScale
+						? 4
+						: showCompactEvents
+						  ? COMPACT_EVENT_HEIGHT
+						  : MIN_EVENT_HEIGHT,
 					yEnd - yStart,
 				);
 
@@ -450,36 +473,28 @@ export function createEventsLayer(
 					columnLayout &&
 					columnLayout.totalColumns > 1
 				) {
-					const columnWidth =
-						dayWidth / columnLayout.totalColumns;
+					const columnWidth = dayWidth / columnLayout.totalColumns;
 					x =
 						leftGutterWidth +
-						startVisualPos.col * dayWidth +
+						startVisualPos.col * dayWidth -
+						scrollLeft +
 						columnLayout.column * columnWidth;
 					spanWidth = columnWidth;
 				} else {
-					const colSpan =
-						endVisualPos.col - startVisualPos.col + 1;
-					x =
-						leftGutterWidth +
-						startVisualPos.col * dayWidth;
+					const colSpan = endVisualPos.col - startVisualPos.col + 1;
+					x = leftGutterWidth + startVisualPos.col * dayWidth - scrollLeft;
 					spanWidth = colSpan * dayWidth;
 				}
 
 				const viewportY = yStart - scrollTop;
 
-				if (
-					viewportY + eventHeight < 0 ||
-					viewportY > height
-				)
-					continue;
+				if (viewportY + eventHeight < 0 || viewportY > height) continue;
 
 				const eventColor = event.color || "#888888";
 				const isSelected = state.isEventSelected(event);
-				const isHovered =
-					state.hoveredEventId === event.id;
+				const isHovered = state.hoveredEventId === event.id;
 
-				const padding = 2;
+				const padding = DAY_CELL_EVENT_INSET;
 				const eventWidth = spanWidth - padding * 2;
 				const leftBorderWidth = 3;
 				const contentPadding = 6;
@@ -512,65 +527,52 @@ export function createEventsLayer(
 
 				const hsl = rgbToHsl(hexToRgb(eventColor));
 				const textPrimary =
-					styles["--text-primary"] ||
-					"rgba(255, 255, 255, 0.9)";
-				const textInverse =
-					styles["--text-inverse"] || "rgb(0, 0, 0)";
+					styles["--text-primary"] || "rgba(255, 255, 255, 0.9)";
+				const textInverse = styles["--text-inverse"] || "rgb(0, 0, 0)";
 				const backgroundColor = isSelected
 					? eventColor
-					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(hsl[2] + 15, 40)}%, 0.45)`;
+					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
+							hsl[2] + 15,
+							40,
+					  )}%, 0.45)`;
 				const borderColor = isSelected
 					? eventColor
-					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(hsl[2] + 10, 70)}%, 1)`;
+					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(
+							hsl[2] + 10,
+							70,
+					  )}%, 1)`;
 
-				const useStripes =
-					state.shouldRenderEventWithStripes(event);
+				const useStripes = state.shouldRenderEventWithStripes(event);
 
 				ctx.beginPath();
-				ctx.roundRect(
-					x + padding,
-					viewportY,
-					eventWidth,
-					eventHeight,
-					[
-						radiusTopLeft,
-						radiusTopRight,
-						radiusBottomRight,
-						radiusBottomLeft,
-					],
-				);
+				ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
+					radiusTopLeft,
+					radiusTopRight,
+					radiusBottomRight,
+					radiusBottomLeft,
+				]);
 
 				ctx.fillStyle = backgroundColor;
 				ctx.fill();
 
 				if (useStripes) {
-					const patternCanvas =
-						state.getStripePatternCanvas();
+					const patternCanvas = state.getStripePatternCanvas();
 					if (patternCanvas) {
 						ctx.save();
 						ctx.beginPath();
-						ctx.roundRect(
-							x + padding,
-							viewportY,
-							eventWidth,
-							eventHeight,
-							[
-								radiusTopLeft,
-								radiusTopRight,
-								radiusBottomRight,
-								radiusBottomLeft,
-							],
-						);
+						ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
+							radiusTopLeft,
+							radiusTopRight,
+							radiusBottomRight,
+							radiusBottomLeft,
+						]);
 						ctx.clip();
 
 						const patternSize = 12;
 						const startX =
-							Math.floor((x + padding) / patternSize) *
-							patternSize;
+							Math.floor((x + padding) / patternSize) * patternSize;
 						const startY =
-							Math.floor(yStart / patternSize) *
-								patternSize -
-							scrollTop;
+							Math.floor(yStart / patternSize) * patternSize - scrollTop;
 
 						for (
 							let py = startY;
@@ -582,13 +584,7 @@ export function createEventsLayer(
 								px < x + padding + eventWidth;
 								px += patternSize
 							) {
-								ctx.drawImage(
-									patternCanvas,
-									px,
-									py,
-									patternSize,
-									patternSize,
-								);
+								ctx.drawImage(patternCanvas, px, py, patternSize, patternSize);
 							}
 						}
 
@@ -604,12 +600,7 @@ export function createEventsLayer(
 						viewportY + 2,
 						leftBorderWidth,
 						eventHeight - 4,
-						[
-							radiusTopLeft,
-							radiusTopLeft,
-							radiusBottomLeft,
-							radiusBottomLeft,
-						],
+						[radiusTopLeft, radiusTopLeft, radiusBottomLeft, radiusBottomLeft],
 					);
 					ctx.fill();
 				}
@@ -618,43 +609,30 @@ export function createEventsLayer(
 					ctx.strokeStyle = textInverse;
 					ctx.lineWidth = 1;
 					ctx.beginPath();
-					ctx.roundRect(
-						x + padding,
-						viewportY,
-						eventWidth,
-						eventHeight,
-						[
-							radiusTopLeft,
-							radiusTopRight,
-							radiusBottomRight,
-							radiusBottomLeft,
-						],
-					);
+					ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
+						radiusTopLeft,
+						radiusTopRight,
+						radiusBottomRight,
+						radiusBottomLeft,
+					]);
 					ctx.stroke();
 				}
 
 				if (isHovered && !isSelected) {
 					ctx.strokeStyle =
-						styles["--grid-color-hover"] ||
-						"rgba(255, 255, 255, 0.2)";
+						styles["--grid-color-hover"] || "rgba(255, 255, 255, 0.2)";
 					ctx.lineWidth = 1;
 					ctx.beginPath();
-					ctx.roundRect(
-						x + padding,
-						viewportY,
-						eventWidth,
-						eventHeight,
-						[
-							radiusTopLeft,
-							radiusTopRight,
-							radiusBottomRight,
-							radiusBottomLeft,
-						],
-					);
+					ctx.roundRect(x + padding, viewportY, eventWidth, eventHeight, [
+						radiusTopLeft,
+						radiusTopRight,
+						radiusBottomRight,
+						radiusBottomLeft,
+					]);
 					ctx.stroke();
 				}
 
-				if (isStart && eventHeight >= 16) {
+				if (!showCompactEvents && isStart && eventHeight >= 16) {
 					const textColor = isSelected
 						? textInverse || "white"
 						: textPrimary || eventColor;
@@ -663,18 +641,9 @@ export function createEventsLayer(
 					ctx.textAlign = "left";
 					ctx.textBaseline = "top";
 
-					const textX =
-						x +
-						padding +
-						leftBorderWidth +
-						contentPadding +
-						1;
+					const textX = x + padding + leftBorderWidth + contentPadding + 1;
 					const textY = viewportY + 6;
-					let maxTextWidth =
-						eventWidth -
-						leftBorderWidth -
-						contentPadding -
-						4;
+					let maxTextWidth = eventWidth - leftBorderWidth - contentPadding - 4;
 
 					ctx.save();
 					ctx.beginPath();
@@ -689,42 +658,29 @@ export function createEventsLayer(
 					if (event.rrule) {
 						ctx.font = `11px ${fontFamily}`;
 						const recurIcon = "⟳";
-						const iconWidth =
-							ctx.measureText(recurIcon).width;
+						const iconWidth = ctx.measureText(recurIcon).width;
 						ctx.fillText(recurIcon, textX, textY);
 						maxTextWidth -= iconWidth + 4;
 					}
 
 					const titleStartX =
-						textX +
-						(event.rrule
-							? ctx.measureText("⟳").width + 4
-							: 0);
+						textX + (event.rrule ? ctx.measureText("⟳").width + 4 : 0);
 					let displayTitle = event.title;
 					ctx.font = `11px ${fontFamily}`;
-					const titleWidth =
-						ctx.measureText(displayTitle).width;
+					const titleWidth = ctx.measureText(displayTitle).width;
 
 					if (titleWidth > maxTextWidth) {
 						const ellipsis = "…";
-						const ellipsisWidth =
-							ctx.measureText(ellipsis).width;
+						const ellipsisWidth = ctx.measureText(ellipsis).width;
 
 						let left = 0;
 						let right = displayTitle.length;
 						let bestFit = 0;
 
 						while (left <= right) {
-							const mid = Math.floor(
-								(left + right) / 2,
-							);
-							const testText = displayTitle.substring(
-								0,
-								mid,
-							);
-							const testWidth =
-								ctx.measureText(testText).width +
-								ellipsisWidth;
+							const mid = Math.floor((left + right) / 2);
+							const testText = displayTitle.substring(0, mid);
+							const testWidth = ctx.measureText(testText).width + ellipsisWidth;
 
 							if (testWidth <= maxTextWidth) {
 								bestFit = mid;
@@ -734,31 +690,23 @@ export function createEventsLayer(
 							}
 						}
 
-						displayTitle =
-							displayTitle.substring(0, bestFit) +
-							ellipsis;
+						displayTitle = displayTitle.substring(0, bestFit) + ellipsis;
 					}
 
-					ctx.fillText(
-						displayTitle,
-						titleStartX,
-						textY,
-					);
+					ctx.fillText(displayTitle, titleStartX, textY);
 
 					if (eventHeight >= 32) {
 						const formatTime = (date: Date) => {
 							const hours = date.getHours();
 							const minutes = date.getMinutes();
-							const ampm =
-								hours >= 12 ? "PM" : "AM";
-							const displayHours =
-								hours % 12 || 12;
-							return `${displayHours}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+							const ampm = hours >= 12 ? "PM" : "AM";
+							const displayHours = hours % 12 || 12;
+							return `${displayHours}:${minutes
+								.toString()
+								.padStart(2, "0")} ${ampm}`;
 						};
 
-						const startTime = formatTime(
-							event.start,
-						);
+						const startTime = formatTime(event.start);
 						const endTime = formatTime(event.end);
 						const timeText = `${startTime} – ${endTime}`;
 
@@ -769,27 +717,21 @@ export function createEventsLayer(
 						ctx.font = `10px ${fontFamily}`;
 
 						let displayTime = timeText;
-						let timeWidth =
-							ctx.measureText(displayTime).width;
+						const timeWidth = ctx.measureText(displayTime).width;
 
 						if (timeWidth > maxTextWidth) {
 							const ellipsis = "…";
-							const ellipsisWidth =
-								ctx.measureText(ellipsis).width;
+							const ellipsisWidth = ctx.measureText(ellipsis).width;
 
 							let left = 0;
 							let right = displayTime.length;
 							let bestFit = 0;
 
 							while (left <= right) {
-								const mid = Math.floor(
-									(left + right) / 2,
-								);
-								const testText =
-									displayTime.substring(0, mid);
+								const mid = Math.floor((left + right) / 2);
+								const testText = displayTime.substring(0, mid);
 								const testWidth =
-									ctx.measureText(testText)
-										.width + ellipsisWidth;
+									ctx.measureText(testText).width + ellipsisWidth;
 
 								if (testWidth <= maxTextWidth) {
 									bestFit = mid;
@@ -799,16 +741,10 @@ export function createEventsLayer(
 								}
 							}
 
-							displayTime =
-								displayTime.substring(0, bestFit) +
-								ellipsis;
+							displayTime = displayTime.substring(0, bestFit) + ellipsis;
 						}
 
-						ctx.fillText(
-							displayTime,
-							textX,
-							textY + 14,
-						);
+						ctx.fillText(displayTime, textX, textY + 14);
 					}
 
 					ctx.restore();
@@ -825,130 +761,324 @@ export function createEventsLayer(
 				});
 			}
 
-			// Render month labels
-			const monthNames = [
-				"January",
-				"February",
-				"March",
-				"April",
-				"May",
-				"June",
-				"July",
-				"August",
-				"September",
-				"October",
-				"November",
-				"December",
-			];
-
-			const monthBoundaries: {
-				monthKey: string;
-				monthName: string;
-				year: number;
-				yOffset: number;
-			}[] = [];
-			const seenMonths = new Set<string>();
+			if (!showTimeScale) {
+				const textMuted = styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
+				ctx.save();
+				ctx.font = `600 12px ${fontFamily}`;
+				ctx.textAlign = "left";
+				ctx.textBaseline = "top";
+				ctx.fillStyle = textMuted;
+
+				for (const overflow of overflowedDays.values()) {
+					if (overflow.maxEventsInRow <= 0) continue;
+					const week = allWeeks[overflow.weekIndex];
+					if (!week || week.height === 0) continue;
 
-			for (const week of visibleWeeks) {
-				const firstDay = week.days[0];
-				if (!firstDay) continue;
-
-				const monthIndex = firstDay.getMonth();
-				const year = firstDay.getFullYear();
-				const monthKey = `${monthIndex}-${year}`;
-
-				if (!seenMonths.has(monthKey)) {
-					seenMonths.add(monthKey);
-					const monthName = monthNames[monthIndex];
-					if (monthName) {
-						monthBoundaries.push({
-							monthKey,
-							monthName,
-							year,
-							yOffset: week.yOffset,
-						});
+					const { col } = getDayVisualPosition(overflow.dayIndex);
+					const visualRowY = week.yOffset;
+					const dotY =
+						visualRowY +
+						overflow.topInset +
+						overflow.maxEventsInRow *
+							(showCompactEvents
+								? COMPACT_EVENT_HEIGHT + 2
+								: MIN_EVENT_HEIGHT + 2) -
+						scrollTop;
+					const dotX = leftGutterWidth + col * dayWidth - scrollLeft + 8;
+
+					if (dotY < 0 || dotY > height) continue;
+					if (
+						dotX + ctx.measureText("...").width >
+						leftGutterWidth + (col + 1) * dayWidth - scrollLeft - 8
+					) {
+						continue;
 					}
+					ctx.fillText("...", dotX, dotY);
 				}
+
+				ctx.restore();
 			}
 
-			for (let i = 0; i < monthBoundaries.length; i++) {
-				const month = monthBoundaries[i]!;
-				const nextMonth = monthBoundaries[i + 1];
-				const labelY = month.yOffset;
-				const nextMonthY = nextMonth
-					? nextMonth.yOffset
-					: Infinity;
+			if (previewEvents.length > 0) {
+				for (const preview of previewEvents) {
+					if (showTimeScale) {
+						renderTimedPreview(
+							ctx,
+							preview,
+							allWeeks,
+							scrollTop,
+							scrollLeft,
+							dayWidth,
+							dayHeight,
+							leftGutterWidth,
+							fontFamily,
+							styles,
+						);
+						continue;
+					}
 
-				if (nextMonthY < scrollTop) continue;
-				if (labelY > viewportBottom) break;
+					renderStackedPreview(
+						ctx,
+						preview,
+						allWeeks,
+						scrollTop,
+						scrollLeft,
+						dayWidth,
+						dayHeight,
+						leftGutterWidth,
+						showCompactEvents,
+						monthHeaderWeeks,
+						dayOccupiedRows,
+					);
+				}
+			}
+		},
+	};
+	return layer;
+}
 
-				const labelPadding = [12, 0, 0, 12];
+function renderTimedPreview(
+	ctx: CanvasRenderingContext2D,
+	preview: PreviewEventData,
+	allWeeks: WeekInfo[],
+	scrollTop: number,
+	scrollLeft: number,
+	dayWidth: number,
+	dayHeight: number,
+	leftGutterWidth: number,
+	fontFamily: string,
+	styles: Record<string, string>,
+): void {
+	const drawBlock = (colX: number, top: number, bottom: number) => {
+		const bx = colX + DAY_CELL_EVENT_INSET;
+		const bw = dayWidth - DAY_CELL_EVENT_INSET * 2;
+		const bh = Math.max(4, bottom - top);
+		ctx.fillStyle = preview.color.fill;
+		ctx.beginPath();
+		ctx.roundRect(bx, top, bw, bh, 4);
+		ctx.fill();
+		ctx.strokeStyle = preview.color.stroke;
+		ctx.lineWidth = 1;
+		if (preview.color.dashed !== false) ctx.setLineDash([6, 3]);
+		ctx.stroke();
+		ctx.setLineDash([]);
+	};
 
-				const stickyTop = Math.max(
-					0,
-					scrollTop - labelY,
-				);
-				const maxStickyTop = nextMonthY - labelY - 24;
-				const clampedStickyTop = Math.min(
-					stickyTop,
-					maxStickyTop,
-				);
-				const labelTopMargin = 32;
-				const finalTop =
-					labelY +
-					clampedStickyTop -
-					scrollTop +
-					labelTopMargin;
+	const getTimeY = (day: Date, hours: number, minutes: number) => {
+		const week = allWeeks.find((w) =>
+			w.days.some((d) => d.toDateString() === day.toDateString()),
+		);
+		if (!week) return null;
+		const totalMinutes = hours * 60 + minutes;
+		return week.yOffset + (totalMinutes / 1440) * dayHeight - scrollTop;
+	};
 
-				ctx.save();
-				ctx.font = `bold 18px ${fontFamily}`;
-				ctx.textAlign = "left";
-				ctx.textBaseline = "top";
+	const getDayColumnX = (day: Date) => {
+		const week = allWeeks.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;
+		return leftGutterWidth + dayIndex * dayWidth - scrollLeft;
+	};
 
-				const labelText = `${month.monthName} ${month.year}`;
-				const textWidth =
-					ctx.measureText(labelText).width;
-				const leftMargin = 8;
-				const textX =
-					64 + labelPadding[3] + leftMargin;
-				const textY = finalTop + labelPadding[0];
-
-				const bgPaddingLeft = 8;
-				const bgPaddingRight = 8;
-				const bgElevated =
-					styles["--bg-elevated"] ||
-					"rgba(0, 0, 0, 0.7)";
-				ctx.fillStyle = bgElevated;
-				ctx.beginPath();
-				ctx.roundRect(
-					textX - bgPaddingLeft,
-					textY - 4,
-					textWidth + bgPaddingLeft + bgPaddingRight,
-					26,
-					6,
-				);
-				ctx.fill();
+	const sameDay = preview.start.toDateString() === preview.end.toDateString();
+	if (sameDay) {
+		const colX = getDayColumnX(preview.start);
+		const top = getTimeY(
+			preview.start,
+			preview.start.getHours(),
+			preview.start.getMinutes(),
+		);
+		const bottom = getTimeY(
+			preview.end,
+			preview.end.getHours(),
+			preview.end.getMinutes(),
+		);
+		if (colX != null && top != null && bottom != null) {
+			drawBlock(colX, top, bottom);
+		}
+	} else {
+		const current = new Date(preview.start);
+		current.setHours(0, 0, 0, 0);
+		const endDay = new Date(preview.end);
+		endDay.setHours(23, 59, 59, 999);
+		while (current <= endDay) {
+			const colX = getDayColumnX(current);
+			if (colX != null) {
+				const isFirst = current.toDateString() === preview.start.toDateString();
+				const isLast = current.toDateString() === preview.end.toDateString();
+				let top: number | null;
+				let bottom: number | null;
+				if (isFirst) {
+					top = getTimeY(
+						current,
+						preview.start.getHours(),
+						preview.start.getMinutes(),
+					);
+					bottom = getTimeY(current, 23, 59);
+				} else if (isLast) {
+					top = getTimeY(current, 0, 0);
+					bottom = getTimeY(
+						current,
+						preview.end.getHours(),
+						preview.end.getMinutes(),
+					);
+				} else {
+					top = getTimeY(current, 0, 0);
+					bottom = getTimeY(current, 23, 59);
+				}
+				if (top != null && bottom != null) {
+					drawBlock(colX, top, bottom);
+				}
+			}
+			current.setDate(current.getDate() + 1);
+		}
+	}
 
-				const monthTextPrimary =
-					styles["--text-primary"] ||
-					"rgba(255, 255, 255, 0.95)";
-				ctx.fillStyle = monthTextPrimary;
-				ctx.fillText(labelText, textX, textY);
-				ctx.restore();
+	const fmtTime = (d: Date) =>
+		`${d.getHours().toString().padStart(2, "0")}:${d
+			.getMinutes()
+			.toString()
+			.padStart(2, "0")}`;
+	const fmtDate = (d: Date) => `${d.getDate()}.${d.getMonth() + 1}`;
+	const label = sameDay
+		? `${fmtTime(preview.start)} – ${fmtTime(preview.end)}`
+		: `${fmtDate(preview.start)} ${fmtTime(preview.start)} – ${fmtDate(
+				preview.end,
+		  )} ${fmtTime(preview.end)}`;
+	const durationMs = Math.abs(preview.end.getTime() - preview.start.getTime());
+	const durationMinutes = durationMs / (1000 * 60);
+	const isShortEvent = durationMinutes < 15;
+	const firstColX = getDayColumnX(preview.start);
+	const lastColX = getDayColumnX(preview.end);
+	const startY = getTimeY(
+		preview.start,
+		preview.start.getHours(),
+		preview.start.getMinutes(),
+	);
+	const endY = getTimeY(
+		preview.end,
+		preview.end.getHours(),
+		preview.end.getMinutes(),
+	);
+
+	if (firstColX != null && lastColX != null && startY != null && endY != null) {
+		ctx.font = `600 11px ${fontFamily}`;
+		ctx.fillStyle = preview.color.text;
+		ctx.textAlign = "left";
+		const labelColX = firstColX;
+
+		if (isShortEvent) {
+			const labelY = startY;
+			const labelBgY = labelY + 6;
+			const labelTextY = labelY + 10;
+			const textWidth = ctx.measureText(label).width;
+			const bgPaddingX = 6;
+			const bgElevated = styles["--bg-elevated"] || "rgba(0, 0, 0, 0.8)";
+			ctx.fillStyle = bgElevated;
+			ctx.beginPath();
+			ctx.roundRect(labelColX + 4, labelBgY, textWidth + bgPaddingX * 2, 16, 4);
+			ctx.fill();
+			ctx.fillStyle = preview.color.text;
+			ctx.textBaseline = "top";
+			ctx.fillText(label, labelColX + 4 + bgPaddingX, labelTextY);
+		} else {
+			ctx.textBaseline = "top";
+			ctx.fillText(label, labelColX + DAY_CELL_EVENT_INSET + 4, startY + 4);
+		}
+	}
+}
+
+function renderStackedPreview(
+	ctx: CanvasRenderingContext2D,
+	preview: PreviewEventData,
+	allWeeks: WeekInfo[],
+	scrollTop: number,
+	scrollLeft: number,
+	dayWidth: number,
+	dayHeight: number,
+	leftGutterWidth: number,
+	showCompactEvents: boolean,
+	monthHeaderWeeks: Set<number>,
+	dayOccupiedRows: Map<string, Set<number>>,
+): void {
+	const rowHeight = showCompactEvents
+		? COMPACT_EVENT_HEIGHT + 2
+		: MIN_EVENT_HEIGHT + 2;
+	const eventBlockHeight = showCompactEvents
+		? COMPACT_EVENT_HEIGHT
+		: MIN_EVENT_HEIGHT;
+
+	for (const [weekIndex, week] of allWeeks.entries()) {
+		if (week.height === 0) continue;
+		const weekStart = week.days[0];
+		const weekEnd = week.days[6];
+		if (!weekStart || !weekEnd) continue;
+		const weekStartMs = weekStart.getTime();
+		const weekEndMs = weekEnd.getTime() + 86399999;
+		if (
+			preview.end.getTime() < weekStartMs ||
+			preview.start.getTime() > weekEndMs
+		) {
+			continue;
+		}
+
+		let startDayIndex = 0;
+		let endDayIndex = 6;
+		if (preview.start.getTime() >= weekStartMs) {
+			startDayIndex = getDayIndexInWeek(week, preview.start);
+		}
+		if (preview.end.getTime() <= weekEndMs) {
+			endDayIndex = getDayIndexInWeek(week, preview.end);
+		}
+
+		let rowIndex = 0;
+		while (true) {
+			let rowFree = true;
+			for (let d = startDayIndex; d <= endDayIndex; d++) {
+				const occupied = dayOccupiedRows.get(`${weekIndex}-${d}`);
+				if (occupied?.has(rowIndex)) {
+					rowFree = false;
+					break;
+				}
 			}
-		},
-	};
-	return layer;
+			if (rowFree) break;
+			rowIndex++;
+		}
+
+		const topInset = monthHeaderWeeks.has(weekIndex)
+			? MONTH_LABEL_HEIGHT + MONTH_LABEL_GAP + DAY_CELL_EVENT_INSET
+			: DAY_CELL_EVENT_INSET;
+		const x =
+			leftGutterWidth +
+			startDayIndex * dayWidth -
+			scrollLeft +
+			DAY_CELL_EVENT_INSET;
+		const width =
+			(endDayIndex - startDayIndex + 1) * dayWidth - DAY_CELL_EVENT_INSET * 2;
+		const y = week.yOffset + topInset + rowIndex * rowHeight - scrollTop;
+
+		ctx.fillStyle = preview.color.fill;
+		ctx.beginPath();
+		ctx.roundRect(x, y, width, eventBlockHeight, 4);
+		ctx.fill();
+		ctx.strokeStyle = preview.color.stroke;
+		ctx.lineWidth = 1;
+		if (preview.color.dashed !== false) ctx.setLineDash([6, 3]);
+		ctx.stroke();
+		ctx.setLineDash([]);
+	}
 }
 
 function getDayIndexInWeek(week: WeekInfo, date: Date) {
 	const dateStart = new Date(date).setHours(0, 0, 0, 0);
 	for (let i = 0; i < 7; i++) {
 		const weekDay = week.days[i];
-		if (
-			weekDay &&
-			new Date(weekDay).setHours(0, 0, 0, 0) === dateStart
-		) {
+		if (weekDay && new Date(weekDay).setHours(0, 0, 0, 0) === dateStart) {
 			return i;
 		}
 	}