);
};
// ---------- Day detail popover (floats next to clicked cell) ----------
const KpDayPopover = ({ dayKey, anchorRect, events, onOpenInquiry, onClear }) => {
const popRef = React.useRef(null);
const [pos, setPos] = useStateK(null);
// Position the popover next to the anchor cell — flip to the left or above
// when there's not enough room on the right / below. Recomputes on resize
// and scroll so it stays glued to its cell.
useEffectK(() => {
if (!dayKey || !anchorRect) return undefined;
const W = 340, GAP = 10, MARGIN = 12;
const compute = () => {
const vw = window.innerWidth;
const vh = window.innerHeight;
const rect = anchorRect;
// Horizontal: prefer right of cell; flip left if no room
let left = rect.right + GAP;
if (left + W > vw - MARGIN) left = rect.left - GAP - W;
if (left < MARGIN) left = Math.max(MARGIN, Math.min(vw - W - MARGIN, rect.left));
// Vertical: align top to cell top, then clamp into viewport
const maxH = Math.min(420, vh - MARGIN * 2);
let top = rect.top;
if (top + maxH > vh - MARGIN) top = Math.max(MARGIN, vh - maxH - MARGIN);
if (top < MARGIN) top = MARGIN;
setPos({ left, top, maxH, width: W });
};
compute();
window.addEventListener('resize', compute);
window.addEventListener('scroll', compute, true);
return () => {
window.removeEventListener('resize', compute);
window.removeEventListener('scroll', compute, true);
};
}, [dayKey, anchorRect]);
// Outside-click + Escape dismiss
useEffectK(() => {
if (!dayKey) return undefined;
const onDown = (e) => {
if (popRef.current && !popRef.current.contains(e.target)) {
// Don't close if click landed on a calendar day cell — let the cell
// handler swap the selection cleanly.
const cell = e.target.closest && e.target.closest('[data-kp-cell]');
if (cell) return;
onClear();
}
};
const onKey = (e) => { if (e.key === 'Escape') onClear(); };
document.addEventListener('mousedown', onDown);
window.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onDown);
window.removeEventListener('keydown', onKey);
};
}, [dayKey, onClear]);
if (!dayKey || !pos) return null;
const [y, m, d] = dayKey.split('-').map(Number);
const date = new Date(y, m-1, d);
const dowLong = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'][date.getDay()];
return (
{dowLong}
{d}. {KP_MONTHS[m-1]}
{events.length === 0 ? (
Keine Termine an diesem Tag.
) : events.map(ev => {
const c = kpCourseById[ev.courseId];
const cat = kpCatById[c.cat];
// Klick auf die Karte (außer auf „Anfrage stellen") öffnet das
// Kurs-Detail-Modal via CustomEvent — dieselbe Pipeline wie das
// Kurs-Karussell unten, daher konsistent.
const openCourseDetail = () => {
onClear();
// Kleiner Tick, damit der Day-Popup-Close fertig ist, bevor das
// Modal aufploppt — sonst räumt der mousedown-handler oben das
// gerade geöffnete Modal manchmal direkt wieder weg.
setTimeout(() => {
window.dispatchEvent(new CustomEvent('wb-open-course-by-id', {
detail: { id: ev.courseId, title: c.title },
}));
}, 30);
};
return (