"use client"; import * as React from "react"; import { cn, useMounted } from "@kineticui/core"; import { ChevronLeftIcon, ChevronRightIcon } from "@kineticui/icons"; export type CalendarEvent = { id: string; title: string; start: Date; end: Date; color?: string; location?: string; }; export type WeekCalendarProps = { events: CalendarEvent[]; /** Any date inside the week to show first. */ date?: Date; startHour?: number; endHour?: number; /** First day of the week, 0 = Sunday, 1 = Monday. */ weekStartsOn?: 0 | 1; onEventClick?: (event: CalendarEvent) => void; /** Called with the clicked slot's start time. */ onSlotClick?: (start: Date) => void; className?: string; }; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const HOUR = 48; const fmt = (d: Date) => `${d.getHours() % 12 || 12}${d.getMinutes() ? `:${String(d.getMinutes()).padStart(2, "0")}` : ""}${d.getHours() < 12 ? "am" : "pm"}`; const sameDay = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); /** Week agenda with hour grid, overlapping-event layout and a live now-line. */ export function WeekCalendar({ events, date, startHour = 8, endHour = 19, weekStartsOn = 1, onEventClick, onSlotClick, className }: WeekCalendarProps) { const mounted = useMounted(); const [anchor, setAnchor] = React.useState(() => date ?? new Date()); const [now, setNow] = React.useState(null); React.useEffect(() => { setNow(new Date()); const t = window.setInterval(() => setNow(new Date()), 60_000); return () => window.clearInterval(t); }, []); const start = new Date(anchor); start.setHours(0, 0, 0, 0); start.setDate(start.getDate() - ((start.getDay() - weekStartsOn + 7) % 7)); const week = Array.from({ length: 7 }, (_, i) => { const d = new Date(start); d.setDate(start.getDate() + i); return d; }); const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i); const shift = (n: number) => setAnchor((a) => new Date(a.getFullYear(), a.getMonth(), a.getDate() + n * 7)); const layout = (dayEvents: CalendarEvent[]) => { const sorted = [...dayEvents].sort((a, b) => a.start.getTime() - b.start.getTime()); const cols: CalendarEvent[][] = []; const placed = new Map(); let cluster: CalendarEvent[] = []; let clusterEnd = 0; const flush = () => { cluster.forEach((e) => (placed.get(e.id)!.cols = cols.length)); cols.length = 0; cluster = []; }; for (const e of sorted) { if (e.start.getTime() >= clusterEnd) flush(); let c = cols.findIndex((col) => col.at(-1)!.end.getTime() <= e.start.getTime()); if (c < 0) { c = cols.length; cols.push([]); } cols[c]!.push(e); placed.set(e.id, { col: c, cols: 1 }); cluster.push(e); clusterEnd = Math.max(clusterEnd, e.end.getTime()); } flush(); return placed; }; const top = (d: Date) => ((d.getHours() + d.getMinutes() / 60 - startHour) * HOUR); return (

{MONTHS[week[0]!.getMonth()]} {week[0]!.getFullYear()}

{week.map((d) => { const isToday = mounted && now && sameDay(d, now); return (

{DAYS[d.getDay()]} {d.getDate()}

); })}

{hours.map((h) => (

{h % 12 || 12}{h < 12 ? "am" : "pm"}

))}

{week.map((d) => { const dayEvents = events.filter((e) => sameDay(e.start, d)); const pos = layout(dayEvents); const isToday = mounted && now && sameDay(d, now); return (

{hours.map((h) => ( ); })} {isToday && now && now.getHours() >= startHour && now.getHours() < endHour ? (

) : null}

); })}

); }

Week Calendar

November 2026

Installation

Exports