\n {event.summary}\n \n

{formatDisplayRange(event.startDate, event.endDate)}

\n {calName &&

{calName}

}\n

\n \n );\n}\n\nfunction DayEventsPopover({\n popoverRef,\n x,\n y,\n onClose,\n date,\n events,\n calendarColors,\n calendarNames,\n onEventClick,\n}: DayEventsPopoverProps) {\n const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n\n useLayoutEffect(() => {\n if (!popoverRef.current) return;\n\n const rect = popoverRef.current.getBoundingClientRect();\n const padding = 8;\n const popoverWidth = rect.width;\n const popoverHeight = rect.height;\n\n let newX = x - popoverWidth / 2;\n let newY = y;\n\n if (newX + popoverWidth > window.innerWidth - padding) {\n newX = window.innerWidth - popoverWidth - padding;\n }\n if (newX < padding) {\n newX = padding;\n }\n if (newY + popoverHeight > window.innerHeight - padding) {\n newY = y - popoverHeight - 16;\n }\n if (newY < padding) {\n newY = padding;\n }\n\n setPosition({ x: newX, y: newY });\n }, [x, y, popoverRef]);\n\n const locale = \"de-AT\";\n const dateStr = date.toLocaleDateString(locale, { weekday: \"long\", day: \"numeric\", month: \"long\", year: \"numeric\" });\n\n return (\n \n

\n {dateStr}\n \n

\n {events.map((ev) => {\n const bg = ev.calendarId ? calendarColors[ev.calendarId] : \"#94a3b8\";\n const calName = ev.calendarId ? calendarNames[ev.calendarId] : \"\";\n return (\n {\n const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n onEventClick(ev, rect.left + rect.width / 2, rect.bottom + 8);\n }}\n >\n \n {ev.summary}\n {calName && {calName}}\n

\n );\n })}\n \n \n );\n}\n\nexport function YearCalendar({ year, events, calendars, calendarColors, showDaysOfWeek = false }: YearCalendarProps) {\n const todayKey = formatDateKey(new Date());\n const dateMap = useMemo(() => expandEventsToDateMap(events), [events]);\n const days = useMemo(() => generateYearDays(year), [year]);\n const dayIndexByKey = useMemo(() => {\n const map = new Map();\n days.forEach((d, i) => map.set(d.key, i));\n return map;\n }, [days]);\n\n const containerRef = useRef(null);\n const gridRef = useRef(null);\n const [cellSizePx, setCellSizePx] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n const [popover, setPopover] = useState<{ event: AllDayEvent | null; x: number; y: number }>({\n event: null,\n x: 0,\n y: 0,\n });\n const [dayPopover, setDayPopover] = useState<{ date: Date | null; events: AllDayEvent[]; x: number; y: number }>({\n date: null,\n events: [],\n x: 0,\n y: 0,\n });\n const popoverRef = useRef(null);\n const dayPopoverRef = useRef(null);\n\n const [gridDims, setGridDims] = useState<{ cols: number; cell: number }>(() => ({ cols: 12, cell: 12 }));\n\n // Calculate grid dimensions based on container size\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n function updateDims() {\n if (!containerRef.current) return;\n const width = containerRef.current.clientWidth;\n const height = containerRef.current.clientHeight;\n setGridDims(computeSquareGridColumns(days.length, width, height));\n }\n\n // Use ResizeObserver for accurate container measurements\n const resizeObserver = new ResizeObserver(() => {\n updateDims();\n });\n resizeObserver.observe(container);\n updateDims();\n\n return () => resizeObserver.disconnect();\n }, [days.length]);\n\n // Measure cell size after render\n useLayoutEffect(() => {\n const grid = gridRef.current;\n if (!grid) return;\n const firstCell = grid.querySelector('[data-day-cell=\"1\"]');\n if (firstCell) {\n const rect = firstCell.getBoundingClientRect();\n if (rect.width && rect.height) {\n setCellSizePx({ w: rect.width, h: rect.height });\n }\n }\n }, [gridDims.cols, gridDims.cell, year]);\n\n // Close popovers on outside click or escape\n useEffect(() => {\n function onDocMouseDown(e: MouseEvent) {\n if (e.target instanceof Node) {\n if (popover.event && popoverRef.current && !popoverRef.current.contains(e.target)) {\n setPopover({ event: null, x: 0, y: 0 });\n }\n if (dayPopover.date && dayPopoverRef.current && !dayPopoverRef.current.contains(e.target)) {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n }\n function onKey(e: KeyboardEvent) {\n if (e.key === \"Escape\") {\n setPopover({ event: null, x: 0, y: 0 });\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n document.addEventListener(\"mousedown\", onDocMouseDown);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"mousedown\", onDocMouseDown);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [popover.event, dayPopover.date]);\n\n // Build calendar name map\n const calendarNames = useMemo(() => {\n const map: Record = {};\n for (const cal of calendars) {\n map[cal.id] = cal.name;\n }\n return map;\n }, [calendars]);\n\n // Compute event bars and overflow indicators\n const eventBarsAndOverflow = useMemo(() => {\n const cols = gridDims.cols || 12;\n const gap = 1;\n if (!cols || !cellSizePx.w || !cellSizePx.h) {\n return { bars: null, overflow: new Map() };\n }\n\n type Seg = { row: number; startCol: number; endCol: number; ev: AllDayEvent };\n const rowToSegs = new Map();\n\n for (const ev of events) {\n const startIdx = dayIndexByKey.get(ev.startDate);\n const endIdxExclusive = dayIndexByKey.get(ev.endDate);\n if (startIdx == null || endIdxExclusive == null) continue;\n\n let segStart = startIdx;\n while (segStart < endIdxExclusive) {\n const row = Math.floor(segStart / cols);\n const rowEndExclusive = Math.min(endIdxExclusive, (row + 1) * cols);\n const startCol = segStart % cols;\n const endCol = rowEndExclusive % cols === 0 ? cols : rowEndExclusive % cols;\n const list = rowToSegs.get(row) ?? [];\n list.push({ row, startCol, endCol, ev });\n rowToSegs.set(row, list);\n segStart = rowEndExclusive;\n }\n }\n\n const bars: React.ReactElement[] = [];\n const labelOffset = 16;\n const laneHeight = 16;\n const maxLanes = Math.max(1, Math.floor((cellSizePx.h - labelOffset - 2) / laneHeight));\n\n // Track overflow per day\n const overflow = new Map();\n\n for (const [row, segs] of rowToSegs) {\n segs.sort((a, b) => a.startCol - b.startCol);\n const laneEnds: number[] = [];\n\n for (const seg of segs) {\n let lane = 0;\n while (lane < laneEnds.length && seg.startCol < laneEnds[lane]) {\n lane++;\n }\n\n // Track overflow for each day the segment covers\n if (lane >= maxLanes) {\n for (let col = seg.startCol; col < seg.endCol; col++) {\n const dayIdx = row * cols + col;\n const dayKey = days[dayIdx]?.key;\n if (dayKey) {\n overflow.set(dayKey, (overflow.get(dayKey) || 0) + 1);\n }\n }\n continue;\n }\n\n if (lane === laneEnds.length) laneEnds.push(seg.endCol);\n else laneEnds[lane] = seg.endCol;\n\n const left = seg.startCol * (cellSizePx.w + gap);\n const top = row * (cellSizePx.h + gap) + labelOffset + lane * laneHeight;\n const span = seg.endCol - seg.startCol;\n const width = span * cellSizePx.w + (span - 1) * gap;\n const barKey = `${seg.ev.id}:${row}:${seg.startCol}-${seg.endCol}:${lane}`;\n const bg = seg.ev.calendarId ? calendarColors[seg.ev.calendarId] : \"#94a3b8\";\n\n bars.push(\n {\n e.stopPropagation();\n const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n setPopover({\n event: seg.ev,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n }}\n >\n \n {seg.ev.summary}\n \n \n );\n }\n }\n return { bars, overflow };\n }, [events, days, dayIndexByKey, gridDims.cols, cellSizePx, calendarColors]);\n\n // Handler for clicking on a day to see all events\n const handleDayClick = (date: Date, key: string, e: React.MouseEvent) => {\n const dayEvents = dateMap.get(key) || [];\n if (dayEvents.length === 0) return;\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n setDayPopover({\n date,\n events: dayEvents,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n };\n\n return (\n

\n {/* Day grid */}\n \n {days.map(({ key, date }) => {\n const isToday = key === todayKey;\n const isFirstOfMonth = date.getDate() === 1;\n const isSaturday = date.getDay() === 6;\n const isSunday = date.getDay() === 0;\n const overflowCount = eventBarsAndOverflow.overflow.get(key) || 0;\n const hasEvents = (dateMap.get(key)?.length || 0) > 0;\n return (\n handleDayClick(date, key, e)}\n >\n {isFirstOfMonth && (\n

\n {monthShort[date.getMonth()]}\n {showDaysOfWeek && {dayOfWeekShort[date.getDay()]}}\n

\n )}\n

\n \n {!isFirstOfMonth && showDaysOfWeek && (\n {dayOfWeekShort[date.getDay()]}\n )}\n {date.getDate()}\n \n {overflowCount > 0 && (\n +{overflowCount}\n )}\n

\n );\n })}\n

\n\n {/* Event bars overlay */}\n

\n {eventBarsAndOverflow.bars}\n

\n \n\n {/* Event popover */}\n {popover.event && (\n setPopover({ event: null, x: 0, y: 0 })}\n event={popover.event}\n calendarColors={calendarColors}\n calendarNames={calendarNames}\n />\n )}\n\n {/* Day events popover */}\n {dayPopover.date && (\n setDayPopover({ date: null, events: [], x: 0, y: 0 })}\n date={dayPopover.date}\n events={dayPopover.events}\n calendarColors={calendarColors}\n calendarNames={calendarNames}\n onEventClick={(ev, x, y) => {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n setPopover({ event: ev, x, y });\n }}\n />\n )}\n \n );\n}\n\nexport default YearCalendar;\n","deleted","label",[177,178,159],"frontend","components","permalink","https://www.val.town/x/dervondenbergen/jahreskalender/code/frontend/components/YearCalendar.tsx","extension","actionData","errors"]