Month Grid With Day Detail

1"use client"
2 
3import * as React from "react"
4import { Badge } from "@/components/ui/badge"
5import { Button } from "@/components/ui/button"
6import { Separator } from "@/components/ui/separator"
7import { cn } from "@/lib/utils"
8import { IconPlaceholder } from "@/components/icons/icon-placeholder"
9 
10const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
11const MONTH_NAMES = [
12  "January",
13  "February",
14  "March",
15  "April",
16  "May",
17  "June",
18  "July",
19  "August",
20  "September",
21  "October",
22  "November",
23  "December",
24]
25 
26interface CalEvent {
27  label: string
28  variant: "default" | "secondary" | "outline"
29  time: string
30  location: string
31  description: string
32}
33 
34const EVENTS: Record<string, CalEvent> = {
35  "2025-5-5": {
36    label: "Team sync",
37    variant: "secondary",
38    time: "10:00 – 10:30",
39    location: "Zoom",
40    description: "Weekly cross-functional sync to align on priorities.",
41  },
42  "2025-5-12": {
43    label: "Q2 review",
44    variant: "secondary",
45    time: "14:00 – 15:30",
46    location: "Conf room A",
47    description: "Quarterly business review with leadership.",
48  },
49  "2025-5-17": {
50    label: "Launch",
51    variant: "default",
52    time: "All day",
53    location: "Company-wide",
54    description: "Public launch of the new platform release.",
55  },
56  "2025-5-23": {
57    label: "Design sprint",
58    variant: "secondary",
59    time: "11:00 – 17:00",
60    location: "Studio 2",
61    description: "Full-day design sprint for the onboarding flow.",
62  },
63  "2025-5-28": {
64    label: "Board meeting",
65    variant: "outline",
66    time: "15:00 – 16:00",
67    location: "Main boardroom",
68    description: "Monthly board meeting and financial review.",
69  },
70  "2025-6-3": {
71    label: "All-hands",
72    variant: "default",
73    time: "16:00 – 17:00",
74    location: "Auditorium",
75    description: "Company all-hands with Q3 kickoff.",
76  },
77  "2025-6-15": {
78    label: "Offsite",
79    variant: "secondary",
80    time: "All day",
81    location: "Lakeside resort",
82    description: "Annual team offsite and strategy planning.",
83  },
84}
85 
86const TODAY = { year: 2025, month: 5, day: 17 }
87 
88function keyFor(year: number, month: number, day: number) {
89  return `${year}-${month}-${day}`
90}
91 
92function buildCells(year: number, month: number): (number | null)[] {
93  const leadingBlanks = new Date(year, month, 1).getDay()
94  const totalDays = new Date(year, month + 1, 0).getDate()
95  const cells: (number | null)[] = [
96    ...Array(leadingBlanks).fill(null),
97// … truncated