"use client"; import { useMemo, useState } from "react"; import { AnimatePresence, motion, type Variants } from "framer-motion"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const MONTHS_SHORT = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; type DateParts = { y: number; m: number; d: number }; type EventMarker = { y: number; m: number; d: number; color: string }; type RangeState = { start: DateParts; end: DateParts | null }; type CalendarWidgetProps = { className?: string; initialMonth?: { y: number; m: number }; today?: DateParts; initialRange?: RangeState; events?: EventMarker[]; }; // Deterministic reference frame so the component renders identically on // server and client (no Date.now()/new Date() at module or render scope). const DEFAULT_MONTH = { y: 2025, m: 2 }; // March 2025 const DEFAULT_TODAY: DateParts = { y: 2025, m: 2, d: 11 }; const DEFAULT_RANGE: RangeState = { start: { y: 2025, m: 2, d: 12 }, end: { y: 2025, m: 2, d: 16 }, }; const DEFAULT_EVENTS: EventMarker[] = [ { y: 2025, m: 2, d: 8, color: "#7c6cff" }, { y: 2025, m: 2, d: 22, color: "#5b8cff" }, { y: 2025, m: 2, d: 26, color: "#7c6cff" }, ]; const DAY_MS = 86400000; function daysInMonth(y: number, m: number): number { return new Date(y, m + 1, 0).getDate(); } function firstWeekday(y: number, m: number): number { return new Date(y, m, 1).getDay(); } function serial(y: number, m: number, d: number): number { return Date.UTC(y, m, d); } function addMonths(y: number, m: number, delta: number): { y: number; m: number } { const total = y * 12 + m + delta; return { y: Math.floor(total / 12), m: ((total % 12) + 12) % 12 }; } type Cell = { date: DateParts; serial: number; inCurrentMonth: boolean; col: number; }; const gridVariants: Variants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.012, delayChildren: 0.02 }, }, exit: { opacity: 0, transition: { duration: 0.14 } }, }; const cellVariants: Variants = { hidden: { opacity: 0, y: 4, scale: 0.96 }, show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.32, ease: EASE } }, }; export function CalendarWidget({ className, initialMonth = DEFAULT_MONTH, today = DEFAULT_TODAY, initialRange = DEFAULT_RANGE, events = DEFAULT_EVENTS, }: CalendarWidgetProps) { const [offset, setOffset] = useState(0); const [direction, setDirection] = useState(0); const [range, setRange] = useState(initialRange); const view = useMemo( () => addMonths(initialMonth.y, initialMonth.m, offset), [initialMonth.y, initialMonth.m, offset] ); const viewYear = view.y; const viewMonth = view.m; const monthKey = `${viewYear}-${viewMonth}`; const cells = useMemo(() => { const first = firstWeekday(viewYear, viewMonth); const dim = daysInMonth(viewYear, viewMonth); const prev = addMonths(viewYear, viewMonth, -1); const prevDim = daysInMonth(prev.y, prev.m); const next = addMonths(viewYear, viewMonth, 1); const out: Cell[] = []; for (let i = 0; i < 42; i++) { const dayIndex = i - first + 1; let date: DateParts; let inCurrentMonth = false; if (dayIndex < 1) { date = { y: prev.y, m: prev.m, d: prevDim + dayIndex }; } else if (dayIndex > dim) { date = { y: next.y, m: next.m, d: dayIndex - dim }; } else { date = { y: viewYear, m: viewMonth, d: dayIndex }; inCurrentMonth = true; } out.push({ date, serial: serial(date.y, date.m, date.d), inCurrentMonth, col: i % 7, }); } return out; }, [viewYear, viewMonth]); const todayS = serial(today.y, today.m, today.d); const startS = serial(range.start.y, range.start.m, range.start.d); const endS = range.end ? serial(range.end.y, range.end.m, range.end.d) : null; function goTo(delta: number) { setDirection(delta); setOffset((o) => o + delta); } function onSelect(dp: DateParts) { const s = serial(dp.y, dp.m, dp.d); setRange((prev) => { if (prev.end != null) return { start: dp, end: null }; const ps = serial(prev.start.y, prev.start.m, prev.start.d); if (s <= ps) return { start: dp, end: null }; return { start: prev.start, end: dp }; }); } const fmt = (dp: DateParts) => `${MONTHS_SHORT[dp.m]} ${dp.d}`; const rangeLabel = range.end ? `${fmt(range.start)} → ${fmt(range.end)}` : fmt(range.start); const nights = endS != null ? Math.round((endS - startS) / DAY_MS) : 0; const metaLabel = endS != null ? `${nights} night${nights === 1 ? "" : "s"}` : "1 day"; return ( {/* ambient depth + bright top edge */}

{/* header */}

{MONTHS[viewMonth]} {viewYear}

goTo(-1)} whileTap={{ scale: 0.92 }} className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/[0.02] text-white/60 transition-colors hover:border-white/20 hover:bg-white/[0.05] hover:text-white" > goTo(1)} whileTap={{ scale: 0.92 }} className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/[0.02] text-white/60 transition-colors hover:border-white/20 hover:bg-white/[0.05] hover:text-white" >

{/* weekday header */}

{WEEKDAYS.map((w) => (

{w}

))}

{/* day grid */}

{cells.map((cell, i) => { const isStart = cell.inCurrentMonth && cell.serial === startS; const isEnd = endS != null && cell.inCurrentMonth && cell.serial === endS; const inRange = cell.inCurrentMonth && (endS != null ? cell.serial >= startS && cell.serial <= endS : cell.serial === startS); const showBand = endS != null && inRange; const isToday = cell.inCurrentMonth && cell.serial === todayS; const isEndpoint = isStart || isEnd; const ev = cell.inCurrentMonth ? events.find( (e) => serial(e.y, e.m, e.d) === cell.serial ) : undefined; return ( cell.inCurrentMonth && onSelect(cell.date) } className={cn( "group/cell relative flex h-10 items-center justify-center outline-none", cell.inCurrentMonth ? "cursor-pointer" : "cursor-default" )} > {/* range band */} {showBand && ( )} {/* hover pill (only on plain days) */} {cell.inCurrentMonth && !isEndpoint && !showBand && ( )} {/* today marker with a restrained idle pulse */} {isToday && !isEndpoint && ( <> )} {/* selected endpoint pill (spring layout) */} {isEndpoint && ( )} {/* day number */} {cell.date.d} {/* event dot */} {ev && ( )} ); })}

{/* footer summary */}

{rangeLabel}

{metaLabel}

); } export default function Demo() { return (

); }

Calendar Widget