\n {event.summary}\n \n

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

\n {calName &&

{calName}

}\n

\n \n );\n}\n\n// Day events popover component\ninterface DayEventsPopoverProps {\n popoverRef: React.RefObject;\n x: number;\n y: number;\n onClose: () => void;\n date: Date;\n events: AllDayEvent[];\n calendarColors: Record;\n calendarNames: Record;\n onEventClick: (event: AllDayEvent, x: number, y: number) => void;\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\n let newX = x - rect.width / 2;\n let newY = y;\n\n if (newX + rect.width > window.innerWidth - padding) {\n newX = window.innerWidth - rect.width - padding;\n }\n if (newX < padding) newX = padding;\n if (newY + rect.height > window.innerHeight - padding) {\n newY = y - rect.height - 16;\n }\n if (newY < padding) newY = padding;\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 WeeklyCalendar({ year, events, calendars, calendarColors }: WeeklyCalendarProps) {\n const todayKey = formatDateKey(new Date());\n const weeks = useMemo(() => generateWeeksForYear(year), [year]);\n const monthSpans = useMemo(() => calculateMonthSpans(weeks), [weeks]);\n\n const containerRef = useRef(null);\n const [cellHeight, setCellHeight] = useState(70);\n const [containerWidth, setContainerWidth] = useState(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 popoverRef = useRef(null);\n\n // Day popover state\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 dayPopoverRef = useRef(null);\n\n // Measure cell height and container width\n const measureDimensions = useCallback(() => {\n if (!containerRef.current) return;\n const cell = containerRef.current.querySelector('[data-day-cell]');\n if (cell) {\n setCellHeight(cell.getBoundingClientRect().height);\n }\n setContainerWidth(containerRef.current.offsetWidth);\n }, []);\n\n useLayoutEffect(() => {\n measureDimensions();\n }, [weeks, measureDimensions]);\n\n // Re-measure on window resize\n useEffect(() => {\n const handleResize = () => {\n measureDimensions();\n };\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [measureDimensions]);\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) map[cal.id] = cal.name;\n return map;\n }, [calendars]);\n\n // Build date map for events per day\n const dateMap = useMemo(() => {\n const map = new Map();\n for (const ev of events) {\n const start = new Date(ev.startDate + \"T00:00:00\");\n const end = new Date(ev.endDate + \"T00:00:00\"); // exclusive\n for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {\n const key = formatDateKey(d);\n const list = map.get(key) ?? [];\n list.push(ev);\n map.set(key, list);\n }\n }\n return map;\n }, [events]);\n\n // Build week index map for event positioning\n const weekIndexByDate = useMemo(() => {\n const map = new Map();\n weeks.forEach((week, weekIdx) => {\n week.days.forEach((day, dayIdx) => {\n map.set(day.key, { weekIdx, dayIdx });\n });\n });\n return map;\n }, [weeks]);\n\n // Segment events for weekly view\n const eventSegments = useMemo(() => {\n type Seg = { weekIdx: number; startCol: number; endCol: number; ev: AllDayEvent };\n const segments: Seg[] = [];\n\n for (const ev of events) {\n const startPos = weekIndexByDate.get(ev.startDate);\n // endDate is exclusive, so get the day before\n const endDate = new Date(ev.endDate + \"T00:00:00\");\n endDate.setDate(endDate.getDate() - 1);\n const endKey = formatDateKey(endDate);\n const endPos = weekIndexByDate.get(endKey);\n\n if (!startPos || !endPos) continue;\n\n // Create segments for each week the event spans\n for (let weekIdx = startPos.weekIdx; weekIdx <= endPos.weekIdx; weekIdx++) {\n const startCol = weekIdx === startPos.weekIdx ? startPos.dayIdx : 0;\n const endCol = weekIdx === endPos.weekIdx ? endPos.dayIdx : 6;\n segments.push({ weekIdx, startCol, endCol, ev });\n }\n }\n\n return segments;\n }, [events, weekIndexByDate]);\n\n // Group segments by week for lane allocation\n const segmentsByWeek = useMemo(() => {\n const map = new Map();\n for (const seg of eventSegments) {\n const list = map.get(seg.weekIdx) || [];\n list.push(seg);\n map.set(seg.weekIdx, list);\n }\n // Sort each week's segments by start column\n for (const [, segs] of map) {\n segs.sort((a, b) => a.startCol - b.startCol);\n }\n return map;\n }, [eventSegments]);\n\n // Compute event bars and overflow\n const eventBarsAndOverflow = useMemo(() => {\n const bars: React.ReactElement[] = [];\n const overflow = new Map();\n const headerHeight = 28;\n const monthColWidth = 20;\n const kwColWidth = 30;\n const dayColStart = monthColWidth + kwColWidth;\n\n if (!containerWidth) return { bars: null, overflow };\n const dayColWidth = (containerWidth - dayColStart) / 7;\n\n const dayNumberHeight = 18;\n const laneHeight = 16;\n const maxLanes = Math.max(1, Math.floor((cellHeight - dayNumberHeight - 4) / laneHeight));\n\n for (const [weekIdx, segs] of segmentsByWeek) {\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 dayKey = weeks[weekIdx]?.days[col]?.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 = dayColStart + seg.startCol * dayColWidth;\n const top = headerHeight + weekIdx * cellHeight + dayNumberHeight + lane * laneHeight;\n const width = (seg.endCol - seg.startCol + 1) * dayColWidth - 2;\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 {seg.ev.summary}\n \n );\n }\n }\n return { bars, overflow };\n }, [segmentsByWeek, weeks, cellHeight, containerWidth, 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 {/* Header row */}\n

{UI_TEXT.CALENDAR_WEEK}

\n {UI_TEXT.WEEKDAYS_SHORT.map((day, i) => (\n

= 5 ? (i === 5 ? 'saturday' : 'sunday') : ''}`}>\n {day}\n

\n ))}\n\n {/* Week rows */}\n {weeks.map((week, weekIdx) => {\n // Check if this is the start of a new month span\n const monthSpan = monthSpans.find(s => s.startIdx === weekIdx);\n\n // Find month boundary index within this week (first day of new month)\n let boundaryIdx = -1;\n for (let i = 1; i < week.days.length; i++) {\n if (week.days[i].month !== week.days[i - 1].month) {\n boundaryIdx = i;\n break;\n }\n }\n\n return (\n \n {/* Month label cell (spans multiple rows) */}\n {monthSpan && (\n \n {monthShort[monthSpan.month]}\n

\n )}\n\n {/* Week number */}\n

{week.weekNumber}

\n\n {/* Day cells */}\n {week.days.map((day, dayIdx) => {\n const isToday = day.key === todayKey;\n const isSaturday = dayIdx === 5;\n const isSunday = dayIdx === 6;\n const isMonthBoundary = boundaryIdx === dayIdx;\n // Horizontal borders: bottom for days before boundary, top for days at/after\n const hasBottomBorder = boundaryIdx > 0 && dayIdx < boundaryIdx;\n const hasTopBorder = boundaryIdx > 0 && dayIdx >= boundaryIdx;\n const overflowCount = eventBarsAndOverflow.overflow.get(day.key) || 0;\n const hasEvents = (dateMap.get(day.key)?.length || 0) > 0;\n\n return (\n handleDayClick(day.date, day.key, e)}\n >\n

\n {day.date.getDate()}\n {overflowCount > 0 && (\n +{overflowCount}\n )}\n

\n );\n })}\n \n );\n })}\n \n\n {/* Events overlay */}\n

\n {eventBarsAndOverflow.bars}\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 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 WeeklyCalendar;\n","deleted","label",[178,179,159],"frontend","components","permalink","https://www.val.town/x/dervondenbergen/jahreskalender/code/frontend/components/WeeklyCalendar.tsx","extension","actionData","errors"]