"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn, useMounted } from "@kineticui/core"; import { ChevronLeftIcon, ChevronRightIcon } from "@kineticui/icons"; export type MonthEvent = { id: string; title: string; date: Date; end?: Date; color?: string; allDay?: boolean }; export type MonthCalendarProps = { events: MonthEvent[]; /** Any date in the month to show first. */ month?: Date; weekStartsOn?: 0 | 1; /** Events visible per day before "+N more". */ maxPerDay?: number; onDayClick?: (date: Date) => void; onEventClick?: (e: MonthEvent) => void; className?: string; }; const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const key = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`; const sameDay = (a: Date, b: Date) => key(a) === key(b); /** Month view with event chips, "+N more" popovers, today ring and animated month switching. */ export function MonthCalendar({ events, month, weekStartsOn = 1, maxPerDay = 3, onDayClick, onEventClick, className }: MonthCalendarProps) { const mounted = useMounted(); const [cursor, setCursor] = React.useState(() => { const d = month ?? new Date(); return new Date(d.getFullYear(), d.getMonth(), 1); }); const [dir, setDir] = React.useState(1); const [expanded, setExpanded] = React.useState(null); const first = new Date(cursor); const offset = (first.getDay() - weekStartsOn + 7) % 7; const start = new Date(first.getFullYear(), first.getMonth(), 1 - offset); const days = Array.from({ length: 42 }, (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i)); const byDay = React.useMemo(() => { const m = new Map(); for (const e of events) { const end = e.end ?? e.date; for (let d = new Date(e.date.getFullYear(), e.date.getMonth(), e.date.getDate()); d <= end; d.setDate(d.getDate() + 1)) { const k = key(d); m.set(k, [...(m.get(k) ?? []), e]); } } return m; }, [events]); const go = (n: number) => { setDir(n); setCursor((c) => new Date(c.getFullYear(), c.getMonth() + n, 1)); setExpanded(null); }; const today = mounted ? new Date() : null; const weekdays = Array.from({ length: 7 }, (_, i) => DAYS[(i + weekStartsOn) % 7]!); return (

{MONTHS[cursor.getMonth()]} {cursor.getFullYear()}

{weekdays.map((d) => ( {d} ))}

{days.map((d) => { const list = byDay.get(key(d)) ?? []; const inMonth = d.getMonth() === cursor.getMonth(); const isToday = today && sameDay(d, today); const k = key(d); const more = list.length - maxPerDay; return (

onDayClick?.(d)} className={cn("relative flex min-h-24 flex-col gap-1 border-b border-r border-border p-1.5 last:border-r-0 [&:nth-child(7n)]:border-r-0", !inMonth && "bg-background/40", onDayClick && "cursor-pointer hover:bg-surface-raised/50")} > {d.getDate()} {(expanded === k ? list : list.slice(0, maxPerDay)).map((e) => ( ))} {more > 0 && expanded !== k ? ( ) : null}

); })}

); }

Month Calendar

November 2026

Installation

Exports