@luckydye/calendar 1.3.0 → 1.3.2

package/src/layers/EventsLayer.ts

@@ -0,0 +1,958 @@
+import type {
+	CalendarEvent,
+	EventSegment,
+	WeekInfo,
+} from "../CalendarInternal.js";
+import { TIME_SCALE_DAY_HEIGHT, type CalendarLayer, type LayerContext } from "../CalendarLayer.js";
+import { hexToRgb, rgbToHsl } from "../Color.js";
+
+const MIN_EVENT_HEIGHT = 20;
+
+export interface EventRect {
+	event: CalendarEvent;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export interface EventsState {
+	events: CalendarEvent[];
+	hoveredEventId: string | null;
+	isEventSelected: (event: CalendarEvent) => boolean;
+	shouldRenderEventWithStripes: (event: CalendarEvent) => boolean;
+	getStripePatternCanvas: () => HTMLCanvasElement | null;
+}
+
+export function createEventsLayer(
+	state: EventsState,
+): CalendarLayer & { eventRects: EventRect[] } {
+	const layer = {
+		name: "events",
+		enabled: true,
+		eventRects: [] as EventRect[],
+		render(lc: LayerContext): void {
+			const {
+				ctx,
+				width,
+				height,
+				scrollTop,
+				dayWidth,
+				dayHeight,
+				leftGutterWidth,
+				visibleWeeks,
+				allWeeks,
+				fontFamily,
+				styles,
+				getDayVisualPosition,
+			} = lc;
+
+			const events = state.events;
+			const viewportBottom = scrollTop + height;
+			const showTimeScale = dayHeight >= TIME_SCALE_DAY_HEIGHT;
+
+			layer.eventRects = [];
+
+			if (visibleWeeks.length === 0) return;
+
+			const firstVisibleWeek = visibleWeeks[0]!;
+			const lastVisibleWeek =
+				visibleWeeks[visibleWeeks.length - 1]!;
+			const firstVisibleDay = firstVisibleWeek.days[0]!;
+			const lastVisibleDay = lastVisibleWeek.days[6]!;
+			const visibleStartTime = firstVisibleDay.getTime();
+			const visibleEndTime =
+				lastVisibleDay.getTime() + 86400000 - 1;
+
+			const dayOccupiedRows = new Map<string, Set<number>>();
+			const eventRowIndex = new Map<string, number>();
+
+			const segments: EventSegment[] = [];
+			const allDaySegments: EventSegment[] = [];
+			const timedSegments: EventSegment[] = [];
+
+			for (const event of events) {
+				if (event.visualStyle === "heatmap") continue;
+				const eventStartTime = event.start.getTime();
+				const eventEndTime = event.end.getTime();
+
+				if (
+					eventEndTime < visibleStartTime ||
+					eventStartTime > visibleEndTime
+				)
+					continue;
+
+				const eventWeeks: {
+					weekIndex: number;
+					week: WeekInfo;
+				}[] = [];
+
+				for (const week of visibleWeeks) {
+					const weekStartDay = week.days[0];
+					const weekEndDay = week.days[6];
+					if (!weekStartDay || !weekEndDay) continue;
+
+					const weekStart = weekStartDay.getTime();
+					const weekEnd = weekEndDay.getTime() + 86399999;
+
+					if (
+						eventEndTime >= weekStart &&
+						eventStartTime <= weekEnd
+					) {
+						const weekIndex = allWeeks.indexOf(week);
+						eventWeeks.push({ weekIndex, week });
+					}
+				}
+
+				const totalWeeks = eventWeeks.length;
+				const isAllDay = event.isAllDay === true;
+
+				for (let i = 0; i < eventWeeks.length; i++) {
+					const { weekIndex, week } = eventWeeks[i]!;
+
+					const isStart = i === 0;
+					const isEnd = i === eventWeeks.length - 1;
+
+					let startDayIndex = 0;
+					let endDayIndex = 6;
+
+					if (isStart) {
+						startDayIndex = getDayIndexInWeek(
+							week,
+							event.start,
+						);
+					}
+					if (isEnd) {
+						const effectiveEnd = isAllDay
+							? new Date(event.end.getTime() - 1)
+							: event.end;
+						endDayIndex = getDayIndexInWeek(
+							week,
+							effectiveEnd,
+						);
+					}
+
+					const segment = {
+						event,
+						weekIndex,
+						week,
+						startDayIndex,
+						endDayIndex,
+						isStart,
+						isEnd,
+						totalWeeks,
+					};
+
+					if (isAllDay) {
+						allDaySegments.push(segment);
+					} else {
+						timedSegments.push(segment);
+					}
+				}
+			}
+
+			const renderedTimedSegments = showTimeScale
+				? timedSegments.flatMap((seg) => {
+						if (seg.startDayIndex === seg.endDayIndex)
+							return [seg];
+						const result = [];
+						for (
+							let d = seg.startDayIndex;
+							d <= seg.endDayIndex;
+							d++
+						) {
+							result.push({
+								...seg,
+								startDayIndex: d,
+								endDayIndex: d,
+								isStart:
+									d === seg.startDayIndex && seg.isStart,
+								isEnd: d === seg.endDayIndex && seg.isEnd,
+								totalWeeks: 1,
+							});
+						}
+						return result;
+					})
+				: timedSegments;
+
+			segments.push(...allDaySegments, ...renderedTimedSegments);
+
+			// Calculate columns for overlapping events in time scale mode
+			interface EventLayout {
+				segment: EventSegment;
+				yStart: number;
+				yEnd: number;
+				column: number;
+				totalColumns: number;
+			}
+
+			const segmentsByWeekDay = new Map<
+				string,
+				EventSegment[]
+			>();
+			for (const segment of segments) {
+				const allDay = segment.event.isAllDay === true;
+				if (showTimeScale && !allDay) {
+					for (
+						let dayIdx = segment.startDayIndex;
+						dayIdx <= segment.endDayIndex;
+						dayIdx++
+					) {
+						const key = `${segment.weekIndex}-${dayIdx}`;
+						if (!segmentsByWeekDay.has(key)) {
+							segmentsByWeekDay.set(key, []);
+						}
+						segmentsByWeekDay.get(key)!.push(segment);
+					}
+				}
+			}
+
+			const segmentColumns = new Map<
+				string,
+				{ column: number; totalColumns: number }
+			>();
+
+			for (const [dayKey, daySegments] of segmentsByWeekDay) {
+				const [weekIndexStr, dayIndexStr] = dayKey.split("-");
+				const dayIndex = parseInt(dayIndexStr!);
+				const weekIndex = parseInt(weekIndexStr!);
+
+				interface SegmentTime {
+					segment: EventSegment;
+					startMinutes: number;
+					endMinutes: number;
+				}
+				const segmentTimes: SegmentTime[] = [];
+
+				for (const seg of daySegments) {
+					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 effectiveEndTime = Math.min(
+						eventEndTime,
+						dayEndTime,
+					);
+
+					const effectiveStart = new Date(effectiveStartTime);
+					const effectiveEnd = new Date(effectiveEndTime);
+
+					const startMinutes =
+						effectiveStart.getHours() * 60 +
+						effectiveStart.getMinutes();
+					const endMinutes =
+						effectiveEnd.getHours() * 60 +
+						effectiveEnd.getMinutes();
+
+					segmentTimes.push({
+						segment: seg,
+						startMinutes,
+						endMinutes,
+					});
+				}
+
+				segmentTimes.sort((a, b) => {
+					if (a.startMinutes !== b.startMinutes)
+						return a.startMinutes - b.startMinutes;
+					return (
+						b.endMinutes -
+						b.startMinutes -
+						(a.endMinutes - a.startMinutes)
+					);
+				});
+
+				const columns: { endMinutes: number }[] = [];
+
+				for (const st of segmentTimes) {
+					let columnIndex = 0;
+					for (
+						;
+						columnIndex < columns.length;
+						columnIndex++
+					) {
+						if (
+							columns[columnIndex]!.endMinutes <=
+							st.startMinutes
+						) {
+							break;
+						}
+					}
+
+					if (columnIndex === columns.length) {
+						columns.push({ endMinutes: st.endMinutes });
+					} else {
+						columns[columnIndex]!.endMinutes =
+							st.endMinutes;
+					}
+
+					const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
+					segmentColumns.set(segmentKey, {
+						column: columnIndex,
+						totalColumns: columns.length,
+					});
+				}
+
+				for (const st of segmentTimes) {
+					const segmentKey = `${st.segment.weekIndex}-${st.segment.event.id}-${dayIndex}`;
+					const layout = segmentColumns.get(segmentKey);
+					if (layout) {
+						layout.totalColumns = columns.length;
+					}
+				}
+			}
+
+			// Render segments
+			for (const segment of segments) {
+				const {
+					event,
+					week,
+					weekIndex,
+					startDayIndex,
+					endDayIndex,
+					isStart,
+					isEnd,
+					totalWeeks,
+				} = segment;
+				const weekYOffset = week.yOffset;
+				const allDay = event.isAllDay === true;
+
+				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 effectiveEndTime = Math.min(
+						eventEndTime,
+						dayEndTime,
+					);
+
+					const effectiveStart = new Date(
+						effectiveStartTime,
+					);
+					const effectiveEnd = new Date(effectiveEndTime);
+
+					const startMinutes =
+						effectiveStart.getHours() * 60 +
+						effectiveStart.getMinutes();
+					const endMinutes =
+						effectiveEnd.getHours() * 60 +
+						effectiveEnd.getMinutes();
+
+					const visualRowY =
+						weekYOffset +
+						startVisualPos.row * dayHeight;
+					yStart =
+						visualRowY +
+						(startMinutes / 1440) * dayHeight;
+					yEnd =
+						visualRowY +
+						(endMinutes / 1440) * dayHeight;
+				} else {
+					const eventKey = `${weekIndex}-${event.id}`;
+					let rowIndex = eventRowIndex.get(eventKey);
+
+					if (rowIndex === undefined) {
+						rowIndex = 0;
+						while (true) {
+							let rowFree = true;
+							for (
+								let d = startDayIndex;
+								d <= endDayIndex;
+								d++
+							) {
+								const dayKey = `${weekIndex}-${d}`;
+								const occupied =
+									dayOccupiedRows.get(dayKey);
+								if (occupied?.has(rowIndex)) {
+									rowFree = false;
+									break;
+								}
+							}
+							if (rowFree) break;
+							rowIndex++;
+						}
+						eventRowIndex.set(eventKey, rowIndex);
+					}
+
+					for (
+						let d = startDayIndex;
+						d <= endDayIndex;
+						d++
+					) {
+						const dayKey = `${weekIndex}-${d}`;
+						let occupied = dayOccupiedRows.get(dayKey);
+						if (!occupied) {
+							occupied = new Set();
+							dayOccupiedRows.set(dayKey, occupied);
+						}
+						occupied.add(rowIndex);
+					}
+
+					const maxEventsInRow = Math.floor(
+						(dayHeight - 4) / (MIN_EVENT_HEIGHT + 2),
+					);
+					if (rowIndex >= maxEventsInRow) continue;
+
+					const visualRowY =
+						weekYOffset +
+						startVisualPos.row * dayHeight;
+					yStart =
+						visualRowY +
+						4 +
+						rowIndex * (MIN_EVENT_HEIGHT + 2);
+					yEnd = yStart + MIN_EVENT_HEIGHT;
+				}
+
+				const eventHeight = Math.max(
+					showTimeScale ? 4 : MIN_EVENT_HEIGHT,
+					yEnd - yStart,
+				);
+
+				let x: number;
+				let spanWidth: number;
+
+				const segmentKey = `${weekIndex}-${event.id}-${startDayIndex}`;
+				const columnLayout = segmentColumns.get(segmentKey);
+
+				if (
+					showTimeScale &&
+					!allDay &&
+					columnLayout &&
+					columnLayout.totalColumns > 1
+				) {
+					const columnWidth =
+						dayWidth / columnLayout.totalColumns;
+					x =
+						leftGutterWidth +
+						startVisualPos.col * dayWidth +
+						columnLayout.column * columnWidth;
+					spanWidth = columnWidth;
+				} else {
+					const colSpan =
+						endVisualPos.col - startVisualPos.col + 1;
+					x =
+						leftGutterWidth +
+						startVisualPos.col * dayWidth;
+					spanWidth = colSpan * dayWidth;
+				}
+
+				const viewportY = yStart - scrollTop;
+
+				if (
+					viewportY + eventHeight < 0 ||
+					viewportY > height
+				)
+					continue;
+
+				const eventColor = event.color || "#888888";
+				const isSelected = state.isEventSelected(event);
+				const isHovered =
+					state.hoveredEventId === event.id;
+
+				const padding = 2;
+				const eventWidth = spanWidth - padding * 2;
+				const leftBorderWidth = 3;
+				const contentPadding = 6;
+
+				let radiusTopLeft = 4;
+				let radiusTopRight = 4;
+				let radiusBottomLeft = 4;
+				let radiusBottomRight = 4;
+
+				if (totalWeeks > 1) {
+					if (isStart && !isEnd) {
+						radiusTopRight = 0;
+						radiusBottomRight = 0;
+					} else if (!isStart && isEnd) {
+						radiusTopLeft = 0;
+						radiusBottomLeft = 0;
+					} else if (!isStart && !isEnd) {
+						radiusTopLeft = 0;
+						radiusTopRight = 0;
+						radiusBottomLeft = 0;
+						radiusBottomRight = 0;
+					}
+				}
+
+				ctx.save();
+
+				if (event.readOnly) {
+					ctx.globalAlpha = 0.5;
+				}
+
+				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)";
+				const backgroundColor = isSelected
+					? eventColor
+					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(hsl[2] + 15, 40)}%, 0.45)`;
+				const borderColor = isSelected
+					? eventColor
+					: `hsla(${hsl[0]}, ${Math.min(hsl[1] * 0.9, 90)}%, ${Math.min(hsl[2] + 10, 70)}%, 1)`;
+
+				const useStripes =
+					state.shouldRenderEventWithStripes(event);
+
+				ctx.beginPath();
+				ctx.roundRect(
+					x + padding,
+					viewportY,
+					eventWidth,
+					eventHeight,
+					[
+						radiusTopLeft,
+						radiusTopRight,
+						radiusBottomRight,
+						radiusBottomLeft,
+					],
+				);
+
+				ctx.fillStyle = backgroundColor;
+				ctx.fill();
+
+				if (useStripes) {
+					const patternCanvas =
+						state.getStripePatternCanvas();
+					if (patternCanvas) {
+						ctx.save();
+						ctx.beginPath();
+						ctx.roundRect(
+							x + padding,
+							viewportY,
+							eventWidth,
+							eventHeight,
+							[
+								radiusTopLeft,
+								radiusTopRight,
+								radiusBottomRight,
+								radiusBottomLeft,
+							],
+						);
+						ctx.clip();
+
+						const patternSize = 12;
+						const startX =
+							Math.floor((x + padding) / patternSize) *
+							patternSize;
+						const startY =
+							Math.floor(yStart / patternSize) *
+								patternSize -
+							scrollTop;
+
+						for (
+							let py = startY;
+							py < viewportY + eventHeight;
+							py += patternSize
+						) {
+							for (
+								let px = startX;
+								px < x + padding + eventWidth;
+								px += patternSize
+							) {
+								ctx.drawImage(
+									patternCanvas,
+									px,
+									py,
+									patternSize,
+									patternSize,
+								);
+							}
+						}
+
+						ctx.restore();
+					}
+				}
+
+				if (!isSelected) {
+					ctx.fillStyle = borderColor;
+					ctx.beginPath();
+					ctx.roundRect(
+						x + padding + 2,
+						viewportY + 2,
+						leftBorderWidth,
+						eventHeight - 4,
+						[
+							radiusTopLeft,
+							radiusTopLeft,
+							radiusBottomLeft,
+							radiusBottomLeft,
+						],
+					);
+					ctx.fill();
+				}
+
+				if (isSelected) {
+					ctx.strokeStyle = textInverse;
+					ctx.lineWidth = 1;
+					ctx.beginPath();
+					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)";
+					ctx.lineWidth = 1;
+					ctx.beginPath();
+					ctx.roundRect(
+						x + padding,
+						viewportY,
+						eventWidth,
+						eventHeight,
+						[
+							radiusTopLeft,
+							radiusTopRight,
+							radiusBottomRight,
+							radiusBottomLeft,
+						],
+					);
+					ctx.stroke();
+				}
+
+				if (isStart && eventHeight >= 16) {
+					const textColor = isSelected
+						? textInverse || "white"
+						: textPrimary || eventColor;
+					ctx.fillStyle = textColor;
+					ctx.font = `11px ${fontFamily}`;
+					ctx.textAlign = "left";
+					ctx.textBaseline = "top";
+
+					const textX =
+						x +
+						padding +
+						leftBorderWidth +
+						contentPadding +
+						1;
+					const textY = viewportY + 6;
+					let maxTextWidth =
+						eventWidth -
+						leftBorderWidth -
+						contentPadding -
+						4;
+
+					ctx.save();
+					ctx.beginPath();
+					ctx.rect(
+						x + padding + leftBorderWidth,
+						viewportY,
+						eventWidth - leftBorderWidth,
+						eventHeight,
+					);
+					ctx.clip();
+
+					if (event.rrule) {
+						ctx.font = `11px ${fontFamily}`;
+						const recurIcon = "⟳";
+						const iconWidth =
+							ctx.measureText(recurIcon).width;
+						ctx.fillText(recurIcon, textX, textY);
+						maxTextWidth -= iconWidth + 4;
+					}
+
+					const titleStartX =
+						textX +
+						(event.rrule
+							? ctx.measureText("⟳").width + 4
+							: 0);
+					let displayTitle = event.title;
+					ctx.font = `11px ${fontFamily}`;
+					const titleWidth =
+						ctx.measureText(displayTitle).width;
+
+					if (titleWidth > maxTextWidth) {
+						const ellipsis = "…";
+						const ellipsisWidth =
+							ctx.measureText(ellipsis).width;
+
+						let left = 0;
+						let right = displayTitle.length;
+						let bestFit = 0;
+
+						while (left <= right) {
+							const mid = Math.floor(
+								(left + right) / 2,
+							);
+							const testText = displayTitle.substring(
+								0,
+								mid,
+							);
+							const testWidth =
+								ctx.measureText(testText).width +
+								ellipsisWidth;
+
+							if (testWidth <= maxTextWidth) {
+								bestFit = mid;
+								left = mid + 1;
+							} else {
+								right = mid - 1;
+							}
+						}
+
+						displayTitle =
+							displayTitle.substring(0, bestFit) +
+							ellipsis;
+					}
+
+					ctx.fillText(
+						displayTitle,
+						titleStartX,
+						textY,
+					);
+
+					if (eventHeight >= 32) {
+						const formatTime = (date: Date) => {
+							const hours = date.getHours();
+							const minutes = date.getMinutes();
+							const ampm =
+								hours >= 12 ? "PM" : "AM";
+							const displayHours =
+								hours % 12 || 12;
+							return `${displayHours}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+						};
+
+						const startTime = formatTime(
+							event.start,
+						);
+						const endTime = formatTime(event.end);
+						const timeText = `${startTime} – ${endTime}`;
+
+						const timeTextColor = isSelected
+							? textInverse || "white"
+							: textPrimary || eventColor;
+						ctx.fillStyle = timeTextColor;
+						ctx.font = `10px ${fontFamily}`;
+
+						let displayTime = timeText;
+						let timeWidth =
+							ctx.measureText(displayTime).width;
+
+						if (timeWidth > maxTextWidth) {
+							const ellipsis = "…";
+							const ellipsisWidth =
+								ctx.measureText(ellipsis).width;
+
+							let left = 0;
+							let right = displayTime.length;
+							let bestFit = 0;
+
+							while (left <= right) {
+								const mid = Math.floor(
+									(left + right) / 2,
+								);
+								const testText =
+									displayTime.substring(0, mid);
+								const testWidth =
+									ctx.measureText(testText)
+										.width + ellipsisWidth;
+
+								if (testWidth <= maxTextWidth) {
+									bestFit = mid;
+									left = mid + 1;
+								} else {
+									right = mid - 1;
+								}
+							}
+
+							displayTime =
+								displayTime.substring(0, bestFit) +
+								ellipsis;
+						}
+
+						ctx.fillText(
+							displayTime,
+							textX,
+							textY + 14,
+						);
+					}
+
+					ctx.restore();
+				}
+
+				ctx.restore();
+
+				layer.eventRects.push({
+					event,
+					x: x + padding,
+					y: yStart,
+					width: eventWidth,
+					height: eventHeight,
+				});
+			}
+
+			// Render month labels
+			const monthNames = [
+				"January",
+				"February",
+				"March",
+				"April",
+				"May",
+				"June",
+				"July",
+				"August",
+				"September",
+				"October",
+				"November",
+				"December",
+			];
+
+			const monthBoundaries: {
+				monthKey: string;
+				monthName: string;
+				year: number;
+				yOffset: number;
+			}[] = [];
+			const seenMonths = new Set<string>();
+
+			for (const week of visibleWeeks) {
+				const firstDay = week.days[0];
+				if (!firstDay) continue;
+
+				const monthIndex = firstDay.getMonth();
+				const year = firstDay.getFullYear();
+				const monthKey = `${monthIndex}-${year}`;
+
+				if (!seenMonths.has(monthKey)) {
+					seenMonths.add(monthKey);
+					const monthName = monthNames[monthIndex];
+					if (monthName) {
+						monthBoundaries.push({
+							monthKey,
+							monthName,
+							year,
+							yOffset: week.yOffset,
+						});
+					}
+				}
+			}
+
+			for (let i = 0; i < monthBoundaries.length; i++) {
+				const month = monthBoundaries[i]!;
+				const nextMonth = monthBoundaries[i + 1];
+				const labelY = month.yOffset;
+				const nextMonthY = nextMonth
+					? nextMonth.yOffset
+					: Infinity;
+
+				if (nextMonthY < scrollTop) continue;
+				if (labelY > viewportBottom) break;
+
+				const labelPadding = [12, 0, 0, 12];
+
+				const stickyTop = Math.max(
+					0,
+					scrollTop - labelY,
+				);
+				const maxStickyTop = nextMonthY - labelY - 24;
+				const clampedStickyTop = Math.min(
+					stickyTop,
+					maxStickyTop,
+				);
+				const labelTopMargin = 32;
+				const finalTop =
+					labelY +
+					clampedStickyTop -
+					scrollTop +
+					labelTopMargin;
+
+				ctx.save();
+				ctx.font = `bold 18px ${fontFamily}`;
+				ctx.textAlign = "left";
+				ctx.textBaseline = "top";
+
+				const labelText = `${month.monthName} ${month.year}`;
+				const textWidth =
+					ctx.measureText(labelText).width;
+				const leftMargin = 8;
+				const textX =
+					64 + 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 monthTextPrimary =
+					styles["--text-primary"] ||
+					"rgba(255, 255, 255, 0.95)";
+				ctx.fillStyle = monthTextPrimary;
+				ctx.fillText(labelText, textX, textY);
+				ctx.restore();
+			}
+		},
+	};
+	return layer;
+}
+
+function getDayIndexInWeek(week: WeekInfo, date: Date) {
+	const dateStart = new Date(date).setHours(0, 0, 0, 0);
+	for (let i = 0; i < 7; i++) {
+		const weekDay = week.days[i];
+		if (
+			weekDay &&
+			new Date(weekDay).setHours(0, 0, 0, 0) === dateStart
+		) {
+			return i;
+		}
+	}
+	const weekStart = new Date(week.days[0]!).setHours(0, 0, 0, 0);
+	if (dateStart < weekStart) return 0;
+	return 6;
+}