├── .eslintrc.json
├── .prettierignore
├── postcss.config.mjs
├── lib
    └── utils.ts
├── components
    ├── theme-provider.tsx
    ├── event-calendar
    │   ├── types.ts
    │   ├── constants.ts
    │   ├── index.ts
    │   ├── droppable-cell.tsx
    │   ├── hooks
    │   │   ├── use-current-time-indicator.ts
    │   │   └── use-event-visibility.ts
    │   ├── agenda-view.tsx
    │   ├── draggable-event.tsx
    │   ├── events-popup.tsx
    │   ├── utils.ts
    │   ├── event-item.tsx
    │   ├── month-view.tsx
    │   ├── day-view.tsx
    │   ├── calendar-dnd-context.tsx
    │   ├── event-calendar.tsx
    │   ├── week-view.tsx
    │   └── event-dialog.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── sonner.tsx
    │   ├── textarea.tsx
    │   ├── input.tsx
    │   ├── radio-group.tsx
    │   ├── popover.tsx
    │   ├── button.tsx
    │   ├── checkbox.tsx
    │   ├── calendar.tsx
    │   ├── dialog.tsx
    │   ├── select.tsx
    │   └── dropdown-menu.tsx
    └── theme-toggle.tsx
├── components.json
├── public
    ├── placeholder-logo.png
    ├── placeholder.jpg
    ├── placeholder-user.jpg
    ├── placeholder-logo.svg
    └── placeholder.svg
├── hooks
    └── use-mobile.tsx
├── tsconfig.json
├── .gitignore
├── app
    ├── layout.tsx
    ├── page.tsx
    └── globals.css
├── next.config.mjs
├── LICENSE.md
├── package.json
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | pnpm-lock.yaml
 3 | 
 4 | # Build output
 5 | .next
 6 | build
 7 | dist
 8 | 
 9 | # Cache
10 | .cache
11 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     "@tailwindcss/postcss": {},
5 |   },
6 | }
7 | 
8 | export default config
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   ThemeProvider as NextThemesProvider,
 5 |   type ThemeProviderProps,
 6 | } from "next-themes"
 7 | 
 8 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 9 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
10 | }
11 | 


--------------------------------------------------------------------------------
/components/event-calendar/types.ts:
--------------------------------------------------------------------------------
 1 | export type CalendarView = "month" | "week" | "day" | "agenda"
 2 | 
 3 | export interface CalendarEvent {
 4 |   id: string
 5 |   title: string
 6 |   description?: string
 7 |   start: Date
 8 |   end: Date
 9 |   allDay?: boolean
10 |   color?: EventColor
11 |   location?: string
12 | }
13 | 
14 | export type EventColor =
15 |   | "sky"
16 |   | "amber"
17 |   | "violet"
18 |   | "rose"
19 |   | "emerald"
20 |   | "orange"
21 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/public/placeholder-logo.png:
--------------------------------------------------------------------------------
1 | �PNG
2 | 
3 |    IHDR      �   M��   0PLTE                                                Z?   tRNS � �@��`P0p���w  �IDATx��ؽJ3Q�7'��%�|?� ���E�l�7���(X�D������w`����[�*t����D���mD�}��4;;�DDDDDDDDDDDD_�_İ��!�y�`�_�:��;Ļ�'|�	��;.I"����3*5����J�1�� �T��FI��	��=��3܃�2~�b���0��U9\��]�4�#w0��Gt\&1�?21,���o!e�m��ĻR�����5�� ؽAJ�9��R)�5�0.FFASaǃ�T�#|�K���I�������1�
4 | M������N"��$����G�V�T���T^^��A�$S��h(�������G]co"J׸^^�'�=���%�	�W�6Ы�W��w�a�߇*�^^�YG�c���`'F����������������^ 5_�,�S�%    IEND�B`�


--------------------------------------------------------------------------------
/components/event-calendar/constants.ts:
--------------------------------------------------------------------------------
 1 | export const EventHeight = 24
 2 | 
 3 | // Vertical gap between events in pixels - controls spacing in month view
 4 | export const EventGap = 4
 5 | 
 6 | // Height of hour cells in week and day views - controls the scale of time display
 7 | export const WeekCellsHeight = 72
 8 | 
 9 | // Number of days to show in the agenda view
10 | export const AgendaDaysToShow = 30
11 | 
12 | // Start and end hours for the week and day views
13 | export const StartHour = 0
14 | export const EndHour = 24
15 | 
16 | // Default start and end times
17 | export const DefaultStartHour = 9 // 9 AM
18 | export const DefaultEndHour = 10 // 10 AM
19 | 


--------------------------------------------------------------------------------
/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | const MOBILE_BREAKPOINT = 768
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 |     }
13 |     mql.addEventListener("change", onChange)
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 |     return () => mql.removeEventListener("change", onChange)
16 |   }, [])
17 | 
18 |   return !!isMobile
19 | }
20 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "text-foreground text-sm leading-4 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "target": "ES6",
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner, ToasterProps } from "sonner"
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = "system" } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps["theme"]}
12 |       className="toaster group"
13 |       style={
14 |         {
15 |           "--normal-bg": "var(--popover)",
16 |           "--normal-text": "var(--popover-foreground)",
17 |           "--normal-border": "var(--border)",
18 |         } as React.CSSProperties
19 |       }
20 |       toastOptions={{
21 |         classNames: {
22 |           description: "text-muted-foreground!",
23 |         },
24 |       }}
25 |       {...props}
26 |     />
27 |   )
28 | }
29 | 
30 | export { Toaster }
31 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex min-h-19.5 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | Textarea.displayName = "Textarea"
18 | 
19 | export { Textarea }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | .env*.local
43 | 
44 | # misc
45 | .deprecated
46 | data-examples
47 | 
48 | # vscode
49 | .vscode/symbols.json
50 | 
51 | # drizzle
52 | drizzle
53 | 
54 | # certificates
55 | certificates
56 | 
57 | # Turborepo
58 | .turbo
59 | 


--------------------------------------------------------------------------------
/components/event-calendar/index.ts:
--------------------------------------------------------------------------------
 1 | // Component exports
 2 | export { AgendaView } from "./agenda-view"
 3 | export { DayView } from "./day-view"
 4 | export { DraggableEvent } from "./draggable-event"
 5 | export { DroppableCell } from "./droppable-cell"
 6 | export { EventDialog } from "./event-dialog"
 7 | export { EventItem } from "./event-item"
 8 | export { EventsPopup } from "./events-popup"
 9 | export { EventCalendar } from "./event-calendar"
10 | export { MonthView } from "./month-view"
11 | export { WeekView } from "./week-view"
12 | export { CalendarDndProvider, useCalendarDnd } from "./calendar-dnd-context"
13 | 
14 | // Constants and utility exports
15 | export * from "./constants"
16 | export * from "./utils"
17 | 
18 | // Hook exports
19 | export * from "./hooks/use-current-time-indicator"
20 | export * from "./hooks/use-event-visibility"
21 | 
22 | // Type exports
23 | export type { CalendarEvent, CalendarView, EventColor } from "./types"
24 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Geist, Geist_Mono } from "next/font/google"
 2 | 
 3 | import { Toaster } from "@/components/ui/sonner"
 4 | import { ThemeProvider } from "@/components/theme-provider"
 5 | 
 6 | import "./globals.css"
 7 | 
 8 | const fontSans = Geist({
 9 |   variable: "--font-sans",
10 |   subsets: ["latin"],
11 | })
12 | 
13 | const fontMono = Geist_Mono({
14 |   variable: "--font-mono",
15 |   subsets: ["latin"],
16 | })
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: Readonly<{
21 |   children: React.ReactNode
22 | }>) {
23 |   return (
24 |     <html lang="en" suppressHydrationWarning>
25 |       <body
26 |         className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased`}
27 |       >
28 |         <ThemeProvider
29 |           attribute="class"
30 |           defaultTheme="system"
31 |           enableSystem
32 |           disableTransitionOnChange
33 |         >
34 |           {children}
35 |           <Toaster />
36 |         </ThemeProvider>
37 |       </body>
38 |     </html>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/public/placeholder.jpg:
--------------------------------------------------------------------------------
1 | ���� JFIF   H H  �� �Exif  MM *                  J       R(       �i       Z       H      H    �       �       �           �� 8Photoshop 3.0 8BIM      8BIM%     ��ُ ��	���B~��    ��           	
2 | �� � s !1"AQ2aq#� �B�R3�$b0�r�C�4��S@%c5�s�PD���&T6d�t�`҄�p�'E7e�Uu��Å��Fv��GVf�	
3 | ()*89:HIJWXYZghijwxyz�����������������������������������������������������������        	
4 | �� � � ! 1A0"2Q@3#aBqR4�P$��C�b5S��%`�D�r��c6p&ET�'��	
5 | ()*789:FGHIJUVWXYZdefghijstuvwxyz����������������������������������������������������������������������������� C 
6 | 
7 | 	
8 | ")$+*($''-2@7-0=0''8L9=CEHIH+6OUNFT@GHE�� C!!E.'.EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE��    �k��  �� ?�� ?��  ?�� 3     !1AQaq��������� 0@P`p���������  ?!���    �� 3   	 !1AQa q𑁡�����0@P`p��������� ?��� ?���  ?���


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | let userConfig = undefined
 2 | try {
 3 |   userConfig = await import("./v0-user-next.config")
 4 | } catch (e) {
 5 |   // ignore error
 6 | }
 7 | 
 8 | /** @type {import('next').NextConfig} */
 9 | const nextConfig = {
10 |   eslint: {
11 |     ignoreDuringBuilds: true,
12 |   },
13 |   typescript: {
14 |     ignoreBuildErrors: true,
15 |   },
16 |   images: {
17 |     unoptimized: true,
18 |   },
19 |   experimental: {
20 |     webpackBuildWorker: true,
21 |     parallelServerBuildTraces: true,
22 |     parallelServerCompiles: true,
23 |   },
24 | }
25 | 
26 | mergeConfig(nextConfig, userConfig)
27 | 
28 | function mergeConfig(nextConfig, userConfig) {
29 |   if (!userConfig) {
30 |     return
31 |   }
32 | 
33 |   for (const key in userConfig) {
34 |     if (
35 |       typeof nextConfig[key] === "object" &&
36 |       !Array.isArray(nextConfig[key])
37 |     ) {
38 |       nextConfig[key] = {
39 |         ...nextConfig[key],
40 |         ...userConfig[key],
41 |       }
42 |     } else {
43 |       nextConfig[key] = userConfig[key]
44 |     }
45 |   }
46 | }
47 | 
48 | export default nextConfig
49 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground/70 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         type === "search" &&
15 |           "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
16 |         type === "file" &&
17 |           "text-muted-foreground/70 file:border-input file:text-foreground p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic",
18 |         className
19 |       )}
20 |       {...props}
21 |     />
22 |   )
23 | }
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/event-calendar/droppable-cell.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useDroppable } from "@dnd-kit/core"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { useCalendarDnd } from "@/components/event-calendar"
 7 | 
 8 | interface DroppableCellProps {
 9 |   id: string
10 |   date: Date
11 |   time?: number // For week/day views, represents hours (e.g., 9.25 for 9:15)
12 |   children?: React.ReactNode
13 |   className?: string
14 |   onClick?: () => void
15 | }
16 | 
17 | export function DroppableCell({
18 |   id,
19 |   date,
20 |   time,
21 |   children,
22 |   className,
23 |   onClick,
24 | }: DroppableCellProps) {
25 |   const { activeEvent } = useCalendarDnd()
26 | 
27 |   const { setNodeRef, isOver } = useDroppable({
28 |     id,
29 |     data: {
30 |       date,
31 |       time,
32 |     },
33 |   })
34 | 
35 |   // Format time for display in tooltip (only for debugging)
36 |   const formattedTime =
37 |     time !== undefined
38 |       ? `${Math.floor(time)}:${Math.round((time - Math.floor(time)) * 60)
39 |           .toString()
40 |           .padStart(2, "0")}`
41 |       : null
42 | 
43 |   return (
44 |     <div
45 |       ref={setNodeRef}
46 |       onClick={onClick}
47 |       className={cn(
48 |         "data-dragging:bg-accent flex h-full flex-col overflow-hidden px-0.5 py-1 sm:px-1",
49 |         className
50 |       )}
51 |       title={formattedTime ? `${formattedTime}` : undefined}
52 |       data-dragging={isOver && activeEvent ? true : undefined}
53 |     >
54 |       {children}
55 |     </div>
56 |   )
57 | }
58 | 


--------------------------------------------------------------------------------
/public/placeholder-user.jpg:
--------------------------------------------------------------------------------
 1 | ���� JFIF      �� C 
 2 | 	
 3 | 		
 4 | $ &%# #"(-90(*6+"#2D26;=@@@&0FKE>J9?@=�� C=)#)==================================================��  � � ��             ��                 ��     ـ                                                           |�r4�-�       ̈"x�'�0      �Í��8�H�N�      q�����Q��      �����V�`=       �($q"_��               
 5 | �S8�P��0     VFbP��!
 6 | Io40     ��[?p #�|�@    !.E�  3��4p    Bq  �Z    s   �                                                          �� C 		       AQR�!1@Ua��02Tq���56cps�� "#$PS�����  ? ��R���,�����
 7 | �n�k��n8rZ�����9Vv� �V��ms$9zWʏh�-+@Z�2�PGE������EY9��i�Ͻ�S	��O��Ȕ��_I��W髵�}�����B�ՎT��>%r�[e/,W�D}��D�>b�e>�v�Z�p&�*VS��V�sV�c �:��~K������� C��:��k�'An|ʶ�}\��C� �f����a�;�h��J����q!i=���"�q�NF�IZ�`�wĝ5hAj�	
 8 | �RXl䎉�lk���@I�%l��Ն���FDY-����Eq�i����O�I�_�2b�lǋ�Yu��k���AO����٣��ܭ�n��cam�jN�j���VL�}�;��oކ6��շs��,���ք���l�i����l{I�O��(!%J $���n�-@G����n��ܮi!�괁G�:�^��n�g3l�F%���9]�Pq��)�:���@�*ɍmׅ�VLY'�s+�z���V�m �J9��S�_���#��;�����Ǌ!5�#�q\�M@��@�]yz�����A;e�k��@� s�^���G����\�5F��(�� S��Ly���c�i8�����o�8T��i�N��7D����t-� p�3`r� qr�;|�.��bTG��[i H��͚-�
 9 | ��Oj�H����M�ؒFE�{�3X�n���e� �R3/�~�����
10 | �� a����!�j&@^r�����Y�������l�Z? �7땵��)ki�w��\.�u�����X��\.�u�����X��\.�u�����X��\.�u��p�M����o(N��3�Vg�����Z�s��%�\�]q}d�k\_Y5���MG�����Q��q}d�k\_Y5���MG�����Q��q}d�kV|5���8���//����                ��� ? ��                ��� ? ��


--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function RadioGroup({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
12 |   return (
13 |     <RadioGroupPrimitive.Root
14 |       data-slot="radio-group"
15 |       className={cn("grid gap-3", className)}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function RadioGroupItem({
22 |   className,
23 |   ...props
24 | }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
25 |   return (
26 |     <RadioGroupPrimitive.Item
27 |       data-slot="radio-group-item"
28 |       className={cn(
29 |         "border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-current">
35 |         <svg
36 |           width="6"
37 |           height="6"
38 |           viewBox="0 0 6 6"
39 |           fill="currentcolor"
40 |           xmlns="http://www.w3.org/2000/svg"
41 |         >
42 |           <circle cx="3" cy="3" r="3" />
43 |         </svg>
44 |       </RadioGroupPrimitive.Indicator>
45 |     </RadioGroupPrimitive.Item>
46 |   )
47 | }
48 | 
49 | export { RadioGroup, RadioGroupItem }
50 | 


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useId, useState } from "react"
 4 | import { RiMoonClearLine, RiSunLine } from "@remixicon/react"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | export default function ThemeToggle() {
 8 |   const id = useId()
 9 |   const { theme, setTheme } = useTheme()
10 |   const [system, setSystem] = useState(false)
11 | 
12 |   const smartToggle = () => {
13 |     /* The smart toggle by @nrjdalal */
14 |     const prefersDarkScheme = window.matchMedia(
15 |       "(prefers-color-scheme: dark)"
16 |     ).matches
17 |     if (theme === "system") {
18 |       setTheme(prefersDarkScheme ? "light" : "dark")
19 |       setSystem(false)
20 |     } else if (
21 |       (theme === "light" && !prefersDarkScheme) ||
22 |       (theme === "dark" && prefersDarkScheme)
23 |     ) {
24 |       setTheme(theme === "light" ? "dark" : "light")
25 |       setSystem(false)
26 |     } else {
27 |       setTheme("system")
28 |       setSystem(true)
29 |     }
30 |   }
31 | 
32 |   return (
33 |     <div className="flex flex-col justify-center">
34 |       <input
35 |         type="checkbox"
36 |         name="theme-toggle"
37 |         id={id}
38 |         className="peer sr-only"
39 |         checked={system}
40 |         onChange={smartToggle}
41 |         aria-label="Toggle dark mode"
42 |       />
43 |       <label
44 |         className="text-muted-foreground hover:text-foreground/80 peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 relative inline-flex size-9 cursor-pointer items-center justify-center rounded transition-[color,box-shadow] outline-none peer-focus-visible:ring-[3px]"
45 |         htmlFor={id}
46 |         aria-hidden="true"
47 |       >
48 |         <RiSunLine className="dark:hidden" size={20} aria-hidden="true" />
49 |         <RiMoonClearLine
50 |           className="hidden dark:block"
51 |           size={20}
52 |           aria-hidden="true"
53 |         />
54 |         <span className="sr-only">Switch to system/light/dark version</span>
55 |       </label>
56 |     </div>
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Popover({
 9 |   ...props
10 | }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11 |   return <PopoverPrimitive.Root data-slot="popover" {...props} />
12 | }
13 | 
14 | function PopoverTrigger({
15 |   ...props
16 | }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17 |   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
18 | }
19 | 
20 | function PopoverContent({
21 |   className,
22 |   align = "center",
23 |   sideOffset = 4,
24 |   showArrow = false,
25 |   ...props
26 | }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
27 |   showArrow?: boolean
28 | }) {
29 |   return (
30 |     <PopoverPrimitive.Portal>
31 |       <PopoverPrimitive.Content
32 |         data-slot="popover-content"
33 |         align={align}
34 |         sideOffset={sideOffset}
35 |         className={cn(
36 |           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
37 |           className
38 |         )}
39 |         {...props}
40 |       >
41 |         {props.children}
42 |         {showArrow && (
43 |           <PopoverPrimitive.Arrow className="fill-popover -my-px drop-shadow-[0_1px_0_hsl(var(--border))]" />
44 |         )}
45 |       </PopoverPrimitive.Content>
46 |     </PopoverPrimitive.Portal>
47 |   )
48 | }
49 | 
50 | function PopoverAnchor({
51 |   ...props
52 | }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
53 |   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
54 | }
55 | 
56 | export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
57 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
16 |         outline:
17 |           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-3 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "size-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | function Button({
38 |   className,
39 |   variant,
40 |   size,
41 |   asChild = false,
42 |   ...props
43 | }: React.ComponentProps<"button"> &
44 |   VariantProps<typeof buttonVariants> & {
45 |     asChild?: boolean
46 |   }) {
47 |   const Comp = asChild ? Slot : "button"
48 | 
49 |   return (
50 |     <Comp
51 |       data-slot="button"
52 |       className={cn(buttonVariants({ variant, size, className }))}
53 |       {...props}
54 |     />
55 |   )
56 | }
57 | 
58 | export { Button, buttonVariants }
59 | 


--------------------------------------------------------------------------------
/components/event-calendar/hooks/use-current-time-indicator.ts:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useEffect, useState } from "react"
 4 | import { endOfWeek, isSameDay, isWithinInterval, startOfWeek } from "date-fns"
 5 | 
 6 | import { EndHour, StartHour } from "@/components/event-calendar/constants"
 7 | 
 8 | export function useCurrentTimeIndicator(
 9 |   currentDate: Date,
10 |   view: "day" | "week"
11 | ) {
12 |   const [currentTimePosition, setCurrentTimePosition] = useState<number>(0)
13 |   const [currentTimeVisible, setCurrentTimeVisible] = useState<boolean>(false)
14 | 
15 |   useEffect(() => {
16 |     const calculateTimePosition = () => {
17 |       const now = new Date()
18 |       const hours = now.getHours()
19 |       const minutes = now.getMinutes()
20 |       const totalMinutes = (hours - StartHour) * 60 + minutes
21 |       const dayStartMinutes = 0 // 12am
22 |       const dayEndMinutes = (EndHour - StartHour) * 60 // 12am next day
23 | 
24 |       // Calculate position as percentage of day
25 |       const position =
26 |         ((totalMinutes - dayStartMinutes) / (dayEndMinutes - dayStartMinutes)) *
27 |         100
28 | 
29 |       // Check if current day is in view based on the calendar view
30 |       let isCurrentTimeVisible = false
31 | 
32 |       if (view === "day") {
33 |         isCurrentTimeVisible = isSameDay(now, currentDate)
34 |       } else if (view === "week") {
35 |         const startOfWeekDate = startOfWeek(currentDate, { weekStartsOn: 0 })
36 |         const endOfWeekDate = endOfWeek(currentDate, { weekStartsOn: 0 })
37 |         isCurrentTimeVisible = isWithinInterval(now, {
38 |           start: startOfWeekDate,
39 |           end: endOfWeekDate,
40 |         })
41 |       }
42 | 
43 |       setCurrentTimePosition(position)
44 |       setCurrentTimeVisible(isCurrentTimeVisible)
45 |     }
46 | 
47 |     // Calculate immediately
48 |     calculateTimePosition()
49 | 
50 |     // Update every minute
51 |     const interval = setInterval(calculateTimePosition, 60000)
52 | 
53 |     return () => clearInterval(interval)
54 |   }, [currentDate, view])
55 | 
56 |   return { currentTimePosition, currentTimeVisible }
57 | }
58 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Checkbox({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
12 |   return (
13 |     <CheckboxPrimitive.Root
14 |       data-slot="checkbox"
15 |       className={cn(
16 |         "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-500",
17 |         className
18 |       )}
19 |       {...props}
20 |     >
21 |       <CheckboxPrimitive.Indicator
22 |         data-slot="checkbox-indicator"
23 |         className="grid place-content-center text-current"
24 |       >
25 |         {props.checked === "indeterminate" ? (
26 |           <svg
27 |             width="9"
28 |             height="9"
29 |             viewBox="0 0 9 9"
30 |             fill="currentcolor"
31 |             xmlns="http://www.w3.org/2000/svg"
32 |           >
33 |             <path
34 |               fillRule="evenodd"
35 |               clipRule="evenodd"
36 |               d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
37 |             />
38 |           </svg>
39 |         ) : (
40 |           <svg
41 |             width="9"
42 |             height="9"
43 |             viewBox="0 0 9 9"
44 |             fill="currentcolor"
45 |             xmlns="http://www.w3.org/2000/svg"
46 |           >
47 |             <path
48 |               fillRule="evenodd"
49 |               clipRule="evenodd"
50 |               d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
51 |             />
52 |           </svg>
53 |         )}
54 |       </CheckboxPrimitive.Indicator>
55 |     </CheckboxPrimitive.Root>
56 |   )
57 | }
58 | 
59 | export { Checkbox }
60 | 


--------------------------------------------------------------------------------
/components/event-calendar/hooks/use-event-visibility.ts:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useLayoutEffect, useMemo, useRef, useState } from "react"
 4 | 
 5 | interface EventVisibilityOptions {
 6 |   eventHeight: number
 7 |   eventGap: number
 8 | }
 9 | 
10 | interface EventVisibilityResult {
11 |   contentRef: React.RefObject<HTMLDivElement>
12 |   contentHeight: number | null
13 |   getVisibleEventCount: (totalEvents: number) => number
14 | }
15 | 
16 | /**
17 |  * Hook for calculating event visibility based on container height
18 |  * Uses ResizeObserver for efficient updates
19 |  */
20 | export function useEventVisibility({
21 |   eventHeight,
22 |   eventGap,
23 | }: EventVisibilityOptions): EventVisibilityResult {
24 |   // Use the standard pattern for React refs
25 |   const contentRef = useRef<HTMLDivElement>(null)
26 |   const observerRef = useRef<ResizeObserver | null>(null)
27 |   const [contentHeight, setContentHeight] = useState<number | null>(null)
28 | 
29 |   // Use layout effect for synchronous measurement before paint
30 |   useLayoutEffect(() => {
31 |     if (!contentRef.current) return
32 | 
33 |     // Function to update the content height
34 |     const updateHeight = () => {
35 |       if (contentRef.current) {
36 |         setContentHeight(contentRef.current.clientHeight)
37 |       }
38 |     }
39 | 
40 |     // Initial measurement (synchronous)
41 |     updateHeight()
42 | 
43 |     // Create observer only once and reuse it
44 |     if (!observerRef.current) {
45 |       observerRef.current = new ResizeObserver(() => {
46 |         // Just call updateHeight when resize is detected
47 |         updateHeight()
48 |       })
49 |     }
50 | 
51 |     // Start observing the content container
52 |     observerRef.current.observe(contentRef.current)
53 | 
54 |     // Clean up function
55 |     return () => {
56 |       if (observerRef.current) {
57 |         observerRef.current.disconnect()
58 |       }
59 |     }
60 |   }, [])
61 | 
62 |   // Function to calculate visible events for a cell
63 |   const getVisibleEventCount = useMemo(() => {
64 |     return (totalEvents: number): number => {
65 |       if (!contentHeight) return totalEvents
66 | 
67 |       // Calculate how many events can fit in the container
68 |       const maxEvents = Math.floor(contentHeight / (eventHeight + eventGap))
69 | 
70 |       // If all events fit, show them all
71 |       if (totalEvents <= maxEvents) {
72 |         return totalEvents
73 |       } else {
74 |         // Otherwise, reserve space for "more" button by showing one less
75 |         return maxEvents > 0 ? maxEvents - 1 : 0
76 |       }
77 |     }
78 |   }, [contentHeight, eventHeight, eventGap])
79 | 
80 |   // Use type assertion to satisfy TypeScript
81 |   return {
82 |     contentRef,
83 |     contentHeight,
84 |     getVisibleEventCount,
85 |   } as EventVisibilityResult
86 | }
87 | 


--------------------------------------------------------------------------------
/components/event-calendar/agenda-view.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useMemo } from "react"
 4 | import { RiCalendarEventLine } from "@remixicon/react"
 5 | import { addDays, format, isToday } from "date-fns"
 6 | 
 7 | import {
 8 |   AgendaDaysToShow,
 9 |   CalendarEvent,
10 |   EventItem,
11 |   getAgendaEventsForDay,
12 | } from "@/components/event-calendar"
13 | 
14 | interface AgendaViewProps {
15 |   currentDate: Date
16 |   events: CalendarEvent[]
17 |   onEventSelect: (event: CalendarEvent) => void
18 | }
19 | 
20 | export function AgendaView({
21 |   currentDate,
22 |   events,
23 |   onEventSelect,
24 | }: AgendaViewProps) {
25 |   // Show events for the next days based on constant
26 |   const days = useMemo(() => {
27 |     console.log("Agenda view updating with date:", currentDate.toISOString())
28 |     return Array.from({ length: AgendaDaysToShow }, (_, i) =>
29 |       addDays(new Date(currentDate), i)
30 |     )
31 |   }, [currentDate])
32 | 
33 |   const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
34 |     e.stopPropagation()
35 |     console.log("Agenda view event clicked:", event)
36 |     onEventSelect(event)
37 |   }
38 | 
39 |   // Check if there are any days with events
40 |   const hasEvents = days.some(
41 |     (day) => getAgendaEventsForDay(events, day).length > 0
42 |   )
43 | 
44 |   return (
45 |     <div className="border-border/70 border-t px-4">
46 |       {!hasEvents ? (
47 |         <div className="flex min-h-[70svh] flex-col items-center justify-center py-16 text-center">
48 |           <RiCalendarEventLine
49 |             size={32}
50 |             className="text-muted-foreground/50 mb-2"
51 |           />
52 |           <h3 className="text-lg font-medium">No events found</h3>
53 |           <p className="text-muted-foreground">
54 |             There are no events scheduled for this time period.
55 |           </p>
56 |         </div>
57 |       ) : (
58 |         days.map((day) => {
59 |           const dayEvents = getAgendaEventsForDay(events, day)
60 | 
61 |           if (dayEvents.length === 0) return null
62 | 
63 |           return (
64 |             <div
65 |               key={day.toString()}
66 |               className="border-border/70 relative my-12 border-t"
67 |             >
68 |               <span
69 |                 className="bg-background absolute -top-3 left-0 flex h-6 items-center pe-4 text-[10px] uppercase data-today:font-medium sm:pe-4 sm:text-xs"
70 |                 data-today={isToday(day) || undefined}
71 |               >
72 |                 {format(day, "d MMM, EEEE")}
73 |               </span>
74 |               <div className="mt-6 space-y-2">
75 |                 {dayEvents.map((event) => (
76 |                   <EventItem
77 |                     key={event.id}
78 |                     event={event}
79 |                     view="agenda"
80 |                     onClick={(e) => handleEventClick(event, e)}
81 |                   />
82 |                 ))}
83 |               </div>
84 |             </div>
85 |           )
86 |         })
87 |       )}
88 |     </div>
89 |   )
90 | }
91 | 


--------------------------------------------------------------------------------
/public/placeholder-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/placeholder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "event-calendar",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "format": "prettier --write .",
 7 |     "dev": "next dev --turbopack",
 8 |     "build": "next build",
 9 |     "start": "next start",
10 |     "lint": "next lint",
11 |     "lint:fix": "next lint --fix",
12 |     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
13 |     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
14 |   },
15 |   "dependencies": {
16 |     "@dnd-kit/core": "^6.3.1",
17 |     "@dnd-kit/modifiers": "^9.0.0",
18 |     "@dnd-kit/utilities": "^3.2.2",
19 |     "@radix-ui/react-checkbox": "^1.1.4",
20 |     "@radix-ui/react-dialog": "^1.1.6",
21 |     "@radix-ui/react-dropdown-menu": "^2.1.6",
22 |     "@radix-ui/react-label": "^2.1.2",
23 |     "@radix-ui/react-popover": "^1.1.6",
24 |     "@radix-ui/react-radio-group": "^1.2.3",
25 |     "@radix-ui/react-select": "^2.1.6",
26 |     "@radix-ui/react-slot": "^1.1.2",
27 |     "@remixicon/react": "^4.6.0",
28 |     "autoprefixer": "^10.4.21",
29 |     "class-variance-authority": "^0.7.1",
30 |     "clsx": "^2.1.1",
31 |     "date-fns": "^4.1.0",
32 |     "lucide-react": "^0.487.0",
33 |     "next": "^15.2.8",
34 |     "next-themes": "^0.4.6",
35 |     "react": "^19.2.3",
36 |     "react-day-picker": "9.6.4",
37 |     "react-dom": "^19.2.3",
38 |     "sonner": "^2.0.3",
39 |     "tailwind-merge": "^3.1.0"
40 |   },
41 |   "devDependencies": {
42 |     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
43 |     "@tailwindcss/postcss": "^4.1.1",
44 |     "@types/node": "^22.13.17",
45 |     "@types/react": "^19.1.0",
46 |     "@types/react-dom": "^19.1.1",
47 |     "eslint": "^9.23.0",
48 |     "eslint-config-next": "15.2.4",
49 |     "postcss": "^8.5.3",
50 |     "prettier": "^3.5.3",
51 |     "prettier-plugin-tailwindcss": "^0.6.11",
52 |     "tailwindcss": "^4.1.1",
53 |     "tw-animate-css": "^1.2.5",
54 |     "typescript": "^5.8.2"
55 |   },
56 |   "prettier": {
57 |     "endOfLine": "lf",
58 |     "semi": false,
59 |     "singleQuote": false,
60 |     "tabWidth": 2,
61 |     "trailingComma": "es5",
62 |     "importOrder": [
63 |       "^(react/(.*)$)|^(react$)",
64 |       "^(next/(.*)$)|^(next$)",
65 |       "<THIRD_PARTY_MODULES>",
66 |       "",
67 |       "^types$",
68 |       "^@/types/(.*)$",
69 |       "^@/config/(.*)$",
70 |       "^@/lib/(.*)$",
71 |       "^@/hooks/(.*)$",
72 |       "^@/components/ui/(.*)$",
73 |       "^@/components/(.*)$",
74 |       "^@/styles/(.*)$",
75 |       "^@/app/(.*)$",
76 |       "",
77 |       "^[./]"
78 |     ],
79 |     "importOrderSeparation": false,
80 |     "importOrderSortSpecifiers": true,
81 |     "importOrderBuiltinModulesToTop": true,
82 |     "importOrderParserPlugins": [
83 |       "typescript",
84 |       "jsx",
85 |       "decorators-legacy"
86 |     ],
87 |     "importOrderMergeDuplicateImports": true,
88 |     "importOrderCombineTypeAndValueImports": true,
89 |     "plugins": [
90 |       "@ianvs/prettier-plugin-sort-imports",
91 |       "prettier-plugin-tailwindcss"
92 |     ]
93 |   },
94 |   "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"
95 | }
96 | 


--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 5 | import { DayPicker } from "react-day-picker"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | import { buttonVariants } from "@/components/ui/button"
 9 | 
10 | function Calendar({
11 |   className,
12 |   classNames,
13 |   showOutsideDays = true,
14 |   components: userComponents,
15 |   ...props
16 | }: React.ComponentProps<typeof DayPicker>) {
17 |   const defaultClassNames = {
18 |     months: "relative flex flex-col sm:flex-row gap-4",
19 |     month: "w-full",
20 |     month_caption:
21 |       "relative mx-10 mb-1 flex h-9 items-center justify-center z-20",
22 |     caption_label: "text-sm font-medium",
23 |     nav: "absolute top-0 flex w-full justify-between z-10",
24 |     button_previous: cn(
25 |       buttonVariants({ variant: "ghost" }),
26 |       "size-9 text-muted-foreground/80 hover:text-foreground p-0"
27 |     ),
28 |     button_next: cn(
29 |       buttonVariants({ variant: "ghost" }),
30 |       "size-9 text-muted-foreground/80 hover:text-foreground p-0"
31 |     ),
32 |     weekday: "size-9 p-0 text-xs font-medium text-muted-foreground/80",
33 |     day_button:
34 |       "relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:text-foreground/30 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground",
35 |     day: "group size-9 px-0 py-px text-sm",
36 |     range_start: "range-start",
37 |     range_end: "range-end",
38 |     range_middle: "range-middle",
39 |     today:
40 |       "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
41 |     outside:
42 |       "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",
43 |     hidden: "invisible",
44 |     week_number: "size-9 p-0 text-xs font-medium text-muted-foreground/80",
45 |   }
46 | 
47 |   const mergedClassNames: typeof defaultClassNames = Object.keys(
48 |     defaultClassNames
49 |   ).reduce(
50 |     (acc, key) => ({
51 |       ...acc,
52 |       [key]: classNames?.[key as keyof typeof classNames]
53 |         ? cn(
54 |             defaultClassNames[key as keyof typeof defaultClassNames],
55 |             classNames[key as keyof typeof classNames]
56 |           )
57 |         : defaultClassNames[key as keyof typeof defaultClassNames],
58 |     }),
59 |     {} as typeof defaultClassNames
60 |   )
61 | 
62 |   const defaultComponents = {
63 |     Chevron: (props: {
64 |       className?: string
65 |       size?: number
66 |       disabled?: boolean
67 |       orientation?: "left" | "right" | "up" | "down"
68 |     }) => {
69 |       if (props.orientation === "left") {
70 |         return <ChevronLeftIcon size={16} {...props} aria-hidden="true" />
71 |       }
72 |       return <ChevronRightIcon size={16} {...props} aria-hidden="true" />
73 |     },
74 |   }
75 | 
76 |   const mergedComponents = {
77 |     ...defaultComponents,
78 |     ...userComponents,
79 |   }
80 | 
81 |   return (
82 |     <DayPicker
83 |       showOutsideDays={showOutsideDays}
84 |       className={cn("w-fit", className)}
85 |       classNames={mergedClassNames}
86 |       components={mergedComponents}
87 |       {...props}
88 |     />
89 |   )
90 | }
91 | 
92 | export { Calendar }
93 | 


--------------------------------------------------------------------------------
/components/event-calendar/draggable-event.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useRef, useState } from "react"
  4 | import { useDraggable } from "@dnd-kit/core"
  5 | import { CSS } from "@dnd-kit/utilities"
  6 | import { differenceInDays } from "date-fns"
  7 | 
  8 | import {
  9 |   CalendarEvent,
 10 |   EventItem,
 11 |   useCalendarDnd,
 12 | } from "@/components/event-calendar"
 13 | 
 14 | interface DraggableEventProps {
 15 |   event: CalendarEvent
 16 |   view: "month" | "week" | "day"
 17 |   showTime?: boolean
 18 |   onClick?: (e: React.MouseEvent) => void
 19 |   height?: number
 20 |   isMultiDay?: boolean
 21 |   multiDayWidth?: number
 22 |   isFirstDay?: boolean
 23 |   isLastDay?: boolean
 24 |   "aria-hidden"?: boolean | "true" | "false"
 25 | }
 26 | 
 27 | export function DraggableEvent({
 28 |   event,
 29 |   view,
 30 |   showTime,
 31 |   onClick,
 32 |   height,
 33 |   isMultiDay,
 34 |   multiDayWidth,
 35 |   isFirstDay = true,
 36 |   isLastDay = true,
 37 |   "aria-hidden": ariaHidden,
 38 | }: DraggableEventProps) {
 39 |   const { activeId } = useCalendarDnd()
 40 |   const elementRef = useRef<HTMLDivElement>(null)
 41 |   const [dragHandlePosition, setDragHandlePosition] = useState<{
 42 |     x: number
 43 |     y: number
 44 |   } | null>(null)
 45 | 
 46 |   // Check if this is a multi-day event
 47 |   const eventStart = new Date(event.start)
 48 |   const eventEnd = new Date(event.end)
 49 |   const isMultiDayEvent =
 50 |     isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1
 51 | 
 52 |   const { attributes, listeners, setNodeRef, transform, isDragging } =
 53 |     useDraggable({
 54 |       id: `${event.id}-${view}`,
 55 |       data: {
 56 |         event,
 57 |         view,
 58 |         height: height || elementRef.current?.offsetHeight || null,
 59 |         isMultiDay: isMultiDayEvent,
 60 |         multiDayWidth: multiDayWidth,
 61 |         dragHandlePosition,
 62 |         isFirstDay,
 63 |         isLastDay,
 64 |       },
 65 |     })
 66 | 
 67 |   // Handle mouse down to track where on the event the user clicked
 68 |   const handleMouseDown = (e: React.MouseEvent) => {
 69 |     if (elementRef.current) {
 70 |       const rect = elementRef.current.getBoundingClientRect()
 71 |       setDragHandlePosition({
 72 |         x: e.clientX - rect.left,
 73 |         y: e.clientY - rect.top,
 74 |       })
 75 |     }
 76 |   }
 77 | 
 78 |   // Don't render if this event is being dragged
 79 |   if (isDragging || activeId === `${event.id}-${view}`) {
 80 |     return (
 81 |       <div
 82 |         ref={setNodeRef}
 83 |         className="opacity-0"
 84 |         style={{ height: height || "auto" }}
 85 |       />
 86 |     )
 87 |   }
 88 | 
 89 |   const style = transform
 90 |     ? {
 91 |         transform: CSS.Translate.toString(transform),
 92 |         height: height || "auto",
 93 |         width:
 94 |           isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,
 95 |       }
 96 |     : {
 97 |         height: height || "auto",
 98 |         width:
 99 |           isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,
100 |       }
101 | 
102 |   // Handle touch start to track where on the event the user touched
103 |   const handleTouchStart = (e: React.TouchEvent) => {
104 |     if (elementRef.current) {
105 |       const rect = elementRef.current.getBoundingClientRect()
106 |       const touch = e.touches[0]
107 |       if (touch) {
108 |         setDragHandlePosition({
109 |           x: touch.clientX - rect.left,
110 |           y: touch.clientY - rect.top,
111 |         })
112 |       }
113 |     }
114 |   }
115 | 
116 |   return (
117 |     <div
118 |       ref={(node) => {
119 |         setNodeRef(node)
120 |         if (elementRef) elementRef.current = node
121 |       }}
122 |       style={style}
123 |       className="touch-none"
124 |     >
125 |       <EventItem
126 |         event={event}
127 |         view={view}
128 |         showTime={showTime}
129 |         isFirstDay={isFirstDay}
130 |         isLastDay={isLastDay}
131 |         isDragging={isDragging}
132 |         onClick={onClick}
133 |         onMouseDown={handleMouseDown}
134 |         onTouchStart={handleTouchStart}
135 |         dndListeners={listeners}
136 |         dndAttributes={attributes}
137 |         aria-hidden={ariaHidden}
138 |       />
139 |     </div>
140 |   )
141 | }
142 | 


--------------------------------------------------------------------------------
/components/event-calendar/events-popup.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useEffect, useMemo, useRef } from "react"
  4 | import { format, isSameDay } from "date-fns"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { EventItem, type CalendarEvent } from "@/components/event-calendar"
  8 | 
  9 | interface EventsPopupProps {
 10 |   date: Date
 11 |   events: CalendarEvent[]
 12 |   position: { top: number; left: number }
 13 |   onClose: () => void
 14 |   onEventSelect: (event: CalendarEvent) => void
 15 | }
 16 | 
 17 | export function EventsPopup({
 18 |   date,
 19 |   events,
 20 |   position,
 21 |   onClose,
 22 |   onEventSelect,
 23 | }: EventsPopupProps) {
 24 |   const popupRef = useRef<HTMLDivElement>(null)
 25 | 
 26 |   // Handle click outside to close popup
 27 |   useEffect(() => {
 28 |     const handleClickOutside = (event: MouseEvent) => {
 29 |       if (
 30 |         popupRef.current &&
 31 |         !popupRef.current.contains(event.target as Node)
 32 |       ) {
 33 |         onClose()
 34 |       }
 35 |     }
 36 | 
 37 |     document.addEventListener("mousedown", handleClickOutside)
 38 |     return () => {
 39 |       document.removeEventListener("mousedown", handleClickOutside)
 40 |     }
 41 |   }, [onClose])
 42 | 
 43 |   // Handle escape key to close popup
 44 |   useEffect(() => {
 45 |     const handleEscKey = (event: KeyboardEvent) => {
 46 |       if (event.key === "Escape") {
 47 |         onClose()
 48 |       }
 49 |     }
 50 | 
 51 |     document.addEventListener("keydown", handleEscKey)
 52 |     return () => {
 53 |       document.removeEventListener("keydown", handleEscKey)
 54 |     }
 55 |   }, [onClose])
 56 | 
 57 |   const handleEventClick = (event: CalendarEvent) => {
 58 |     onEventSelect(event)
 59 |     onClose()
 60 |   }
 61 | 
 62 |   // Adjust position to ensure popup stays within viewport
 63 |   const adjustedPosition = useMemo(() => {
 64 |     const positionCopy = { ...position }
 65 | 
 66 |     // Check if we need to adjust the position to fit in the viewport
 67 |     if (popupRef.current) {
 68 |       const rect = popupRef.current.getBoundingClientRect()
 69 |       const viewportWidth = window.innerWidth
 70 |       const viewportHeight = window.innerHeight
 71 | 
 72 |       // Adjust horizontally if needed
 73 |       if (positionCopy.left + rect.width > viewportWidth) {
 74 |         positionCopy.left = Math.max(0, viewportWidth - rect.width)
 75 |       }
 76 | 
 77 |       // Adjust vertically if needed
 78 |       if (positionCopy.top + rect.height > viewportHeight) {
 79 |         positionCopy.top = Math.max(0, viewportHeight - rect.height)
 80 |       }
 81 |     }
 82 | 
 83 |     return positionCopy
 84 |   }, [position])
 85 | 
 86 |   return (
 87 |     <div
 88 |       ref={popupRef}
 89 |       className="bg-background absolute z-50 max-h-96 w-80 overflow-auto rounded-md border shadow-lg"
 90 |       style={{
 91 |         top: `${adjustedPosition.top}px`,
 92 |         left: `${adjustedPosition.left}px`,
 93 |       }}
 94 |     >
 95 |       <div className="bg-background sticky top-0 flex items-center justify-between border-b p-3">
 96 |         <h3 className="font-medium">{format(date, "d MMMM yyyy")}</h3>
 97 |         <button
 98 |           onClick={onClose}
 99 |           className="hover:bg-muted rounded-full p-1"
100 |           aria-label="Close"
101 |         >
102 |           <XIcon className="h-4 w-4" />
103 |         </button>
104 |       </div>
105 | 
106 |       <div className="space-y-2 p-3">
107 |         {events.length === 0 ? (
108 |           <div className="text-muted-foreground py-2 text-sm">No events</div>
109 |         ) : (
110 |           events.map((event) => {
111 |             const eventStart = new Date(event.start)
112 |             const eventEnd = new Date(event.end)
113 |             const isFirstDay = isSameDay(date, eventStart)
114 |             const isLastDay = isSameDay(date, eventEnd)
115 | 
116 |             return (
117 |               <div
118 |                 key={event.id}
119 |                 className="cursor-pointer"
120 |                 onClick={() => handleEventClick(event)}
121 |               >
122 |                 <EventItem
123 |                   event={event}
124 |                   view="agenda"
125 |                   isFirstDay={isFirstDay}
126 |                   isLastDay={isLastDay}
127 |                 />
128 |               </div>
129 |             )
130 |           })
131 |         )}
132 |       </div>
133 |     </div>
134 |   )
135 | }
136 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Dialog({
 10 |   ...props
 11 | }: React.ComponentProps<typeof DialogPrimitive.Root>) {
 12 |   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 13 | }
 14 | 
 15 | function DialogTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
 18 |   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 19 | }
 20 | 
 21 | function DialogPortal({
 22 |   ...props
 23 | }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
 24 |   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 25 | }
 26 | 
 27 | function DialogClose({
 28 |   ...props
 29 | }: React.ComponentProps<typeof DialogPrimitive.Close>) {
 30 |   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 31 | }
 32 | 
 33 | function DialogOverlay({
 34 |   className,
 35 |   ...props
 36 | }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
 37 |   return (
 38 |     <DialogPrimitive.Overlay
 39 |       data-slot="dialog-overlay"
 40 |       className={cn(
 41 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     />
 46 |   )
 47 | }
 48 | 
 49 | function DialogContent({
 50 |   className,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<typeof DialogPrimitive.Content>) {
 54 |   return (
 55 |     <DialogPortal>
 56 |       <DialogOverlay />
 57 |       <DialogPrimitive.Content
 58 |         data-slot="dialog-content"
 59 |         className={cn(
 60 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border p-6 shadow-lg duration-200 sm:max-w-100",
 61 |           className
 62 |         )}
 63 |         {...props}
 64 |       >
 65 |         {children}
 66 |         <DialogPrimitive.Close className="group focus-visible:border-ring focus-visible:ring-ring/50 absolute top-3 right-3 flex size-7 items-center justify-center rounded transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none">
 67 |           <XIcon
 68 |             size={16}
 69 |             className="opacity-60 transition-opacity group-hover:opacity-100"
 70 |           />
 71 |           <span className="sr-only">Close</span>
 72 |         </DialogPrimitive.Close>
 73 |       </DialogPrimitive.Content>
 74 |     </DialogPortal>
 75 |   )
 76 | }
 77 | 
 78 | function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 79 |   return (
 80 |     <div
 81 |       data-slot="alert-dialog-header"
 82 |       className={cn("flex flex-col gap-1 text-center sm:text-left", className)}
 83 |       {...props}
 84 |     />
 85 |   )
 86 | }
 87 | 
 88 | function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 89 |   return (
 90 |     <div
 91 |       data-slot="alert-dialog-footer"
 92 |       className={cn(
 93 |         "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
 94 |         className
 95 |       )}
 96 |       {...props}
 97 |     />
 98 |   )
 99 | }
100 | 
101 | function DialogTitle({
102 |   className,
103 |   ...props
104 | }: React.ComponentProps<typeof DialogPrimitive.Title>) {
105 |   return (
106 |     <DialogPrimitive.Title
107 |       data-slot="alert-dialog-title"
108 |       className={cn("text-lg leading-none font-semibold", className)}
109 |       {...props}
110 |     />
111 |   )
112 | }
113 | 
114 | function DialogDescription({
115 |   className,
116 |   ...props
117 | }: React.ComponentProps<typeof DialogPrimitive.Description>) {
118 |   return (
119 |     <DialogPrimitive.Description
120 |       data-slot="alert-dialog-description"
121 |       className={cn("text-muted-foreground text-sm", className)}
122 |       {...props}
123 |     />
124 |   )
125 | }
126 | 
127 | export {
128 |   Dialog,
129 |   DialogClose,
130 |   DialogContent,
131 |   DialogDescription,
132 |   DialogFooter,
133 |   DialogHeader,
134 |   DialogOverlay,
135 |   DialogPortal,
136 |   DialogTitle,
137 |   DialogTrigger,
138 | }
139 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Event Calendar React Component
  2 | 
  3 | A flexible, interactive calendar component built with [v0](https://v0.dev/) UI components. This calendar provides multiple view modes, drag-and-drop event management, and a clean, responsive interface.
  4 | 
  5 | ## Features
  6 | 
  7 | - 📅 Multiple view modes: Month, Week, Day, and Agenda
  8 | - 🔄 Drag-and-drop event management
  9 | - 🎨 Event color customization
 10 | - 📱 Responsive design for all screen sizes
 11 | - 🌓 Dark mode support
 12 | - 🗓️ All-day events support
 13 | - 📍 Location support for events
 14 | - 🔄 Easy navigation between time periods
 15 | 
 16 | ## Usage
 17 | 
 18 | ```jsx
 19 | import { EventCalendar, type CalendarEvent } from "@/components/event-calendar";
 20 | 
 21 | function App() {
 22 |   const [events, setEvents] = useState([]);
 23 | 
 24 |   const handleEventAdd = (event) => {
 25 |     setEvents([...events, event]);
 26 |   };
 27 | 
 28 |   const handleEventUpdate = (updatedEvent) => {
 29 |     setEvents(events.map((event) => (event.id === updatedEvent.id ? updatedEvent : event)));
 30 |   };
 31 | 
 32 |   const handleEventDelete = (eventId) => {
 33 |     setEvents(events.filter((event) => event.id !== eventId));
 34 |   };
 35 | 
 36 |   return (
 37 |     <EventCalendar
 38 |       events={events}
 39 |       onEventAdd={handleEventAdd}
 40 |       onEventUpdate={handleEventUpdate}
 41 |       onEventDelete={handleEventDelete}
 42 |       initialView="month"
 43 |     />
 44 |   );
 45 | }
 46 | ```
 47 | 
 48 | ## Props
 49 | 
 50 | | Prop            | Type                                     | Default   | Description                                |
 51 | | --------------- | ---------------------------------------- | --------- | ------------------------------------------ |
 52 | | `events`        | `CalendarEvent[]`                        | `[]`      | Array of events to display in the calendar |
 53 | | `onEventAdd`    | `(event: CalendarEvent) => void`         | -         | Callback function when an event is added   |
 54 | | `onEventUpdate` | `(event: CalendarEvent) => void`         | -         | Callback function when an event is updated |
 55 | | `onEventDelete` | `(eventId: string) => void`              | -         | Callback function when an event is deleted |
 56 | | `className`     | `string`                                 | -         | Additional CSS class for styling           |
 57 | | `initialView`   | `"month" \| "week" \| "day" \| "agenda"` | `"month"` | Initial view mode of the calendar          |
 58 | 
 59 | ## Event Object Structure
 60 | 
 61 | ```typescript
 62 | interface CalendarEvent {
 63 |   id: string
 64 |   title: string
 65 |   description?: string
 66 |   start: Date
 67 |   end: Date
 68 |   allDay?: boolean
 69 |   color?: "sky" | "amber" | "violet" | "rose" | "emerald" | "orange"
 70 |   location?: string
 71 | }
 72 | ```
 73 | 
 74 | ## View Modes
 75 | 
 76 | ### Month View
 77 | 
 78 | Displays a traditional month calendar with events. Events that span multiple days are properly displayed across the days they span.
 79 | 
 80 | ### Week View
 81 | 
 82 | Shows a detailed week view with hour slots. Events are positioned according to their time and can span multiple days.
 83 | 
 84 | ### Day View
 85 | 
 86 | Provides a detailed view of a single day with hour slots. Perfect for seeing all events scheduled for a specific day.
 87 | 
 88 | ### Agenda View
 89 | 
 90 | Lists all events in a chronological list format, making it easy to see upcoming events at a glance.
 91 | 
 92 | ## Limitations and Known Issues
 93 | 
 94 | This calendar component is in early alpha stage and is not recommended for production use. There are several limitations and issues that need to be addressed:
 95 | 
 96 | ### Drag and Drop Limitations
 97 | 
 98 | - In month view, only the first day of multi-day events is draggable
 99 | - In week and day views, multi-day events are placed in an "All day" section at the top of the view and are not draggable
100 | - Some drag and drop operations may not update the event data correctly in certain edge cases
101 | 
102 | ### Visual and UX Issues
103 | 
104 | - Limited responsiveness on very small screens
105 | - Event overlapping is not handled optimally in some views
106 | - Limited keyboard navigation support
107 | - Accessibility features are incomplete
108 | 
109 | ### Technical Limitations
110 | 
111 | - Limited testing across different browsers and devices
112 | - Performance may degrade with a large number of events
113 | - Time zone support is limited
114 | - No recurring event support
115 | - No integration with external calendars (Google, Outlook, etc.)
116 | 
117 | ### Other Considerations
118 | 
119 | - The component has not undergone extensive testing
120 | - Error handling is minimal
121 | - Documentation is still evolving
122 | 
123 | We are actively working on improving these aspects and welcome contributions to address these limitations.
124 | 
125 | ## Contributing
126 | 
127 | Contributions are welcome! Please feel free to submit a Pull Request.
128 | 
129 | ## License
130 | 
131 | This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.
132 | 


--------------------------------------------------------------------------------
/components/event-calendar/utils.ts:
--------------------------------------------------------------------------------
  1 | import { isSameDay } from "date-fns"
  2 | 
  3 | import type { CalendarEvent, EventColor } from "@/components/event-calendar"
  4 | 
  5 | /**
  6 |  * Get CSS classes for event colors
  7 |  */
  8 | export function getEventColorClasses(color?: EventColor | string): string {
  9 |   const eventColor = color || "sky"
 10 | 
 11 |   switch (eventColor) {
 12 |     case "sky":
 13 |       return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8"
 14 |     case "amber":
 15 |       return "bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8"
 16 |     case "violet":
 17 |       return "bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8"
 18 |     case "rose":
 19 |       return "bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8"
 20 |     case "emerald":
 21 |       return "bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8"
 22 |     case "orange":
 23 |       return "bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8"
 24 |     default:
 25 |       return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8"
 26 |   }
 27 | }
 28 | 
 29 | /**
 30 |  * Get CSS classes for border radius based on event position in multi-day events
 31 |  */
 32 | export function getBorderRadiusClasses(
 33 |   isFirstDay: boolean,
 34 |   isLastDay: boolean
 35 | ): string {
 36 |   if (isFirstDay && isLastDay) {
 37 |     return "rounded" // Both ends rounded
 38 |   } else if (isFirstDay) {
 39 |     return "rounded-l rounded-r-none" // Only left end rounded
 40 |   } else if (isLastDay) {
 41 |     return "rounded-r rounded-l-none" // Only right end rounded
 42 |   } else {
 43 |     return "rounded-none" // No rounded corners
 44 |   }
 45 | }
 46 | 
 47 | /**
 48 |  * Check if an event is a multi-day event
 49 |  */
 50 | export function isMultiDayEvent(event: CalendarEvent): boolean {
 51 |   const eventStart = new Date(event.start)
 52 |   const eventEnd = new Date(event.end)
 53 |   return event.allDay || eventStart.getDate() !== eventEnd.getDate()
 54 | }
 55 | 
 56 | /**
 57 |  * Filter events for a specific day
 58 |  */
 59 | export function getEventsForDay(
 60 |   events: CalendarEvent[],
 61 |   day: Date
 62 | ): CalendarEvent[] {
 63 |   return events
 64 |     .filter((event) => {
 65 |       const eventStart = new Date(event.start)
 66 |       return isSameDay(day, eventStart)
 67 |     })
 68 |     .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
 69 | }
 70 | 
 71 | /**
 72 |  * Sort events with multi-day events first, then by start time
 73 |  */
 74 | export function sortEvents(events: CalendarEvent[]): CalendarEvent[] {
 75 |   return [...events].sort((a, b) => {
 76 |     const aIsMultiDay = isMultiDayEvent(a)
 77 |     const bIsMultiDay = isMultiDayEvent(b)
 78 | 
 79 |     if (aIsMultiDay && !bIsMultiDay) return -1
 80 |     if (!aIsMultiDay && bIsMultiDay) return 1
 81 | 
 82 |     return new Date(a.start).getTime() - new Date(b.start).getTime()
 83 |   })
 84 | }
 85 | 
 86 | /**
 87 |  * Get multi-day events that span across a specific day (but don't start on that day)
 88 |  */
 89 | export function getSpanningEventsForDay(
 90 |   events: CalendarEvent[],
 91 |   day: Date
 92 | ): CalendarEvent[] {
 93 |   return events.filter((event) => {
 94 |     if (!isMultiDayEvent(event)) return false
 95 | 
 96 |     const eventStart = new Date(event.start)
 97 |     const eventEnd = new Date(event.end)
 98 | 
 99 |     // Only include if it's not the start day but is either the end day or a middle day
100 |     return (
101 |       !isSameDay(day, eventStart) &&
102 |       (isSameDay(day, eventEnd) || (day > eventStart && day < eventEnd))
103 |     )
104 |   })
105 | }
106 | 
107 | /**
108 |  * Get all events visible on a specific day (starting, ending, or spanning)
109 |  */
110 | export function getAllEventsForDay(
111 |   events: CalendarEvent[],
112 |   day: Date
113 | ): CalendarEvent[] {
114 |   return events.filter((event) => {
115 |     const eventStart = new Date(event.start)
116 |     const eventEnd = new Date(event.end)
117 |     return (
118 |       isSameDay(day, eventStart) ||
119 |       isSameDay(day, eventEnd) ||
120 |       (day > eventStart && day < eventEnd)
121 |     )
122 |   })
123 | }
124 | 
125 | /**
126 |  * Get all events for a day (for agenda view)
127 |  */
128 | export function getAgendaEventsForDay(
129 |   events: CalendarEvent[],
130 |   day: Date
131 | ): CalendarEvent[] {
132 |   return events
133 |     .filter((event) => {
134 |       const eventStart = new Date(event.start)
135 |       const eventEnd = new Date(event.end)
136 |       return (
137 |         isSameDay(day, eventStart) ||
138 |         isSameDay(day, eventEnd) ||
139 |         (day > eventStart && day < eventEnd)
140 |       )
141 |     })
142 |     .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
143 | }
144 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState } from "react"
  4 | import { addDays, setHours, setMinutes, subDays } from "date-fns"
  5 | 
  6 | import { EventCalendar, type CalendarEvent } from "@/components/event-calendar"
  7 | import ThemeToggle from "@/components/theme-toggle"
  8 | 
  9 | // Sample events data with hardcoded times
 10 | const sampleEvents: CalendarEvent[] = [
 11 |   {
 12 |     id: "1",
 13 |     title: "Annual Planning",
 14 |     description: "Strategic planning for next year",
 15 |     start: subDays(new Date(), 24), // 24 days before today
 16 |     end: subDays(new Date(), 23), // 23 days before today
 17 |     allDay: true,
 18 |     color: "sky",
 19 |     location: "Main Conference Hall",
 20 |   },
 21 |   {
 22 |     id: "2",
 23 |     title: "Project Deadline",
 24 |     description: "Submit final deliverables",
 25 |     start: setMinutes(setHours(subDays(new Date(), 9), 13), 0), // 1:00 PM, 9 days before
 26 |     end: setMinutes(setHours(subDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days before
 27 |     color: "amber",
 28 |     location: "Office",
 29 |   },
 30 |   {
 31 |     id: "3",
 32 |     title: "Quarterly Budget Review",
 33 |     description: "Strategic planning for next year",
 34 |     start: subDays(new Date(), 13), // 13 days before today
 35 |     end: subDays(new Date(), 13), // 13 days before today
 36 |     allDay: true,
 37 |     color: "orange",
 38 |     location: "Main Conference Hall",
 39 |   },
 40 |   {
 41 |     id: "4",
 42 |     title: "Team Meeting",
 43 |     description: "Weekly team sync",
 44 |     start: setMinutes(setHours(new Date(), 10), 0), // 10:00 AM today
 45 |     end: setMinutes(setHours(new Date(), 11), 0), // 11:00 AM today
 46 |     color: "sky",
 47 |     location: "Conference Room A",
 48 |   },
 49 |   {
 50 |     id: "5",
 51 |     title: "Lunch with Client",
 52 |     description: "Discuss new project requirements",
 53 |     start: setMinutes(setHours(addDays(new Date(), 1), 12), 0), // 12:00 PM, 1 day from now
 54 |     end: setMinutes(setHours(addDays(new Date(), 1), 13), 15), // 1:15 PM, 1 day from now
 55 |     color: "emerald",
 56 |     location: "Downtown Cafe",
 57 |   },
 58 |   {
 59 |     id: "6",
 60 |     title: "Product Launch",
 61 |     description: "New product release",
 62 |     start: addDays(new Date(), 3), // 3 days from now
 63 |     end: addDays(new Date(), 6), // 6 days from now
 64 |     allDay: true,
 65 |     color: "violet",
 66 |   },
 67 |   {
 68 |     id: "7",
 69 |     title: "Sales Conference",
 70 |     description: "Discuss about new clients",
 71 |     start: setMinutes(setHours(addDays(new Date(), 4), 14), 30), // 2:30 PM, 4 days from now
 72 |     end: setMinutes(setHours(addDays(new Date(), 5), 14), 45), // 2:45 PM, 5 days from now
 73 |     color: "rose",
 74 |     location: "Downtown Cafe",
 75 |   },
 76 |   {
 77 |     id: "8",
 78 |     title: "Team Meeting",
 79 |     description: "Weekly team sync",
 80 |     start: setMinutes(setHours(addDays(new Date(), 5), 9), 0), // 9:00 AM, 5 days from now
 81 |     end: setMinutes(setHours(addDays(new Date(), 5), 10), 30), // 10:30 AM, 5 days from now
 82 |     color: "orange",
 83 |     location: "Conference Room A",
 84 |   },
 85 |   {
 86 |     id: "9",
 87 |     title: "Review contracts",
 88 |     description: "Weekly team sync",
 89 |     start: setMinutes(setHours(addDays(new Date(), 5), 14), 0), // 2:00 PM, 5 days from now
 90 |     end: setMinutes(setHours(addDays(new Date(), 5), 15), 30), // 3:30 PM, 5 days from now
 91 |     color: "sky",
 92 |     location: "Conference Room A",
 93 |   },
 94 |   {
 95 |     id: "10",
 96 |     title: "Team Meeting",
 97 |     description: "Weekly team sync",
 98 |     start: setMinutes(setHours(addDays(new Date(), 5), 9), 45), // 9:45 AM, 5 days from now
 99 |     end: setMinutes(setHours(addDays(new Date(), 5), 11), 0), // 11:00 AM, 5 days from now
100 |     color: "amber",
101 |     location: "Conference Room A",
102 |   },
103 |   {
104 |     id: "11",
105 |     title: "Marketing Strategy Session",
106 |     description: "Quarterly marketing planning",
107 |     start: setMinutes(setHours(addDays(new Date(), 9), 10), 0), // 10:00 AM, 9 days from now
108 |     end: setMinutes(setHours(addDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days from now
109 |     color: "emerald",
110 |     location: "Marketing Department",
111 |   },
112 |   {
113 |     id: "12",
114 |     title: "Annual Shareholders Meeting",
115 |     description: "Presentation of yearly results",
116 |     start: addDays(new Date(), 17), // 17 days from now
117 |     end: addDays(new Date(), 17), // 17 days from now
118 |     allDay: true,
119 |     color: "sky",
120 |     location: "Grand Conference Center",
121 |   },
122 |   {
123 |     id: "13",
124 |     title: "Product Development Workshop",
125 |     description: "Brainstorming for new features",
126 |     start: setMinutes(setHours(addDays(new Date(), 26), 9), 0), // 9:00 AM, 26 days from now
127 |     end: setMinutes(setHours(addDays(new Date(), 27), 17), 0), // 5:00 PM, 27 days from now
128 |     color: "rose",
129 |     location: "Innovation Lab",
130 |   },
131 | ]
132 | 
133 | export default function Home() {
134 |   const [events, setEvents] = useState<CalendarEvent[]>(sampleEvents)
135 | 
136 |   const handleEventAdd = (event: CalendarEvent) => {
137 |     setEvents([...events, event])
138 |   }
139 | 
140 |   const handleEventUpdate = (updatedEvent: CalendarEvent) => {
141 |     setEvents(
142 |       events.map((event) =>
143 |         event.id === updatedEvent.id ? updatedEvent : event
144 |       )
145 |     )
146 |   }
147 | 
148 |   const handleEventDelete = (eventId: string) => {
149 |     setEvents(events.filter((event) => event.id !== eventId))
150 |   }
151 | 
152 |   return (
153 |     // Add min-h-screen to make it full height
154 |     <div className="flex flex-col p-1 sm:p-4 md:p-8">
155 |       <EventCalendar
156 |         events={events}
157 |         onEventAdd={handleEventAdd}
158 |         onEventUpdate={handleEventUpdate}
159 |         onEventDelete={handleEventDelete}
160 |       />
161 |       <div className="mt-4">
162 |         <ThemeToggle />
163 |       </div>
164 |     </div>
165 |   )
166 | }
167 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Select({
 10 |   ...props
 11 | }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 12 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 13 | }
 14 | 
 15 | function SelectGroup({
 16 |   ...props
 17 | }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 18 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 19 | }
 20 | 
 21 | function SelectValue({
 22 |   ...props
 23 | }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 24 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 25 | }
 26 | 
 27 | function SelectTrigger({
 28 |   className,
 29 |   children,
 30 |   ...props
 31 | }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
 32 |   return (
 33 |     <SelectPrimitive.Trigger
 34 |       data-slot="select-trigger"
 35 |       className={cn(
 36 |         "border-input text-foreground data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:line-clamp-1",
 37 |         className
 38 |       )}
 39 |       {...props}
 40 |     >
 41 |       {children}
 42 |       <SelectPrimitive.Icon asChild>
 43 |         <ChevronDownIcon
 44 |           size={16}
 45 |           className="text-muted-foreground/80 in-aria-invalid:text-destructive/80 shrink-0"
 46 |         />
 47 |       </SelectPrimitive.Icon>
 48 |     </SelectPrimitive.Trigger>
 49 |   )
 50 | }
 51 | 
 52 | function SelectContent({
 53 |   className,
 54 |   children,
 55 |   position = "popper",
 56 |   ...props
 57 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 58 |   return (
 59 |     <SelectPrimitive.Portal>
 60 |       <SelectPrimitive.Content
 61 |         data-slot="select-content"
 62 |         className={cn(
 63 |           "border-input bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-32 overflow-hidden rounded-md border shadow-lg [&_[role=group]]:py-1",
 64 |           position === "popper" &&
 65 |             "w-full min-w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 66 |           className
 67 |         )}
 68 |         position={position}
 69 |         {...props}
 70 |       >
 71 |         <SelectScrollUpButton />
 72 |         <SelectPrimitive.Viewport
 73 |           className={cn(
 74 |             "p-1",
 75 |             position === "popper" && "h-[var(--radix-select-trigger-height)]"
 76 |           )}
 77 |         >
 78 |           {children}
 79 |         </SelectPrimitive.Viewport>
 80 |         <SelectScrollDownButton />
 81 |       </SelectPrimitive.Content>
 82 |     </SelectPrimitive.Portal>
 83 |   )
 84 | }
 85 | 
 86 | function SelectLabel({
 87 |   className,
 88 |   ...props
 89 | }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 90 |   return (
 91 |     <SelectPrimitive.Label
 92 |       data-slot="select-label"
 93 |       className={cn(
 94 |         "text-muted-foreground py-1.5 ps-8 pe-2 text-xs font-medium",
 95 |         className
 96 |       )}
 97 |       {...props}
 98 |     />
 99 |   )
100 | }
101 | 
102 | function SelectItem({
103 |   className,
104 |   children,
105 |   ...props
106 | }: React.ComponentProps<typeof SelectPrimitive.Item>) {
107 |   return (
108 |     <SelectPrimitive.Item
109 |       data-slot="select-item"
110 |       className={cn(
111 |         "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
112 |         className
113 |       )}
114 |       {...props}
115 |     >
116 |       <span className="absolute start-2 flex size-3.5 items-center justify-center">
117 |         <SelectPrimitive.ItemIndicator>
118 |           <CheckIcon size={16} />
119 |         </SelectPrimitive.ItemIndicator>
120 |       </span>
121 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
122 |     </SelectPrimitive.Item>
123 |   )
124 | }
125 | 
126 | function SelectSeparator({
127 |   className,
128 |   ...props
129 | }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
130 |   return (
131 |     <SelectPrimitive.Separator
132 |       data-slot="select-separator"
133 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
134 |       {...props}
135 |     />
136 |   )
137 | }
138 | 
139 | function SelectScrollUpButton({
140 |   className,
141 |   ...props
142 | }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
143 |   return (
144 |     <SelectPrimitive.ScrollUpButton
145 |       data-slot="select-scroll-up-button"
146 |       className={cn(
147 |         "text-muted-foreground/80 flex cursor-default items-center justify-center py-1",
148 |         className
149 |       )}
150 |       {...props}
151 |     >
152 |       <ChevronUpIcon size={16} />
153 |     </SelectPrimitive.ScrollUpButton>
154 |   )
155 | }
156 | 
157 | function SelectScrollDownButton({
158 |   className,
159 |   ...props
160 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
161 |   return (
162 |     <SelectPrimitive.ScrollDownButton
163 |       data-slot="select-scroll-down-button"
164 |       className={cn(
165 |         "text-muted-foreground/80 flex cursor-default items-center justify-center py-1",
166 |         className
167 |       )}
168 |       {...props}
169 |     >
170 |       <ChevronDownIcon size={16} />
171 |     </SelectPrimitive.ScrollDownButton>
172 |   )
173 | }
174 | 
175 | export {
176 |   Select,
177 |   SelectContent,
178 |   SelectGroup,
179 |   SelectItem,
180 |   SelectLabel,
181 |   SelectScrollDownButton,
182 |   SelectScrollUpButton,
183 |   SelectSeparator,
184 |   SelectTrigger,
185 |   SelectValue,
186 | }
187 | 


--------------------------------------------------------------------------------
/components/event-calendar/event-item.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useMemo } from "react"
  4 | import type { DraggableAttributes } from "@dnd-kit/core"
  5 | import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"
  6 | import { differenceInMinutes, format, getMinutes, isPast } from "date-fns"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | import {
 10 |   getBorderRadiusClasses,
 11 |   getEventColorClasses,
 12 |   type CalendarEvent,
 13 | } from "@/components/event-calendar"
 14 | 
 15 | // Using date-fns format with custom formatting:
 16 | // 'h' - hours (1-12)
 17 | // 'a' - am/pm
 18 | // ':mm' - minutes with leading zero (only if the token 'mm' is present)
 19 | const formatTimeWithOptionalMinutes = (date: Date) => {
 20 |   return format(date, getMinutes(date) === 0 ? "ha" : "h:mma").toLowerCase()
 21 | }
 22 | 
 23 | interface EventWrapperProps {
 24 |   event: CalendarEvent
 25 |   isFirstDay?: boolean
 26 |   isLastDay?: boolean
 27 |   isDragging?: boolean
 28 |   onClick?: (e: React.MouseEvent) => void
 29 |   className?: string
 30 |   children: React.ReactNode
 31 |   currentTime?: Date
 32 |   dndListeners?: SyntheticListenerMap
 33 |   dndAttributes?: DraggableAttributes
 34 |   onMouseDown?: (e: React.MouseEvent) => void
 35 |   onTouchStart?: (e: React.TouchEvent) => void
 36 | }
 37 | 
 38 | // Shared wrapper component for event styling
 39 | function EventWrapper({
 40 |   event,
 41 |   isFirstDay = true,
 42 |   isLastDay = true,
 43 |   isDragging,
 44 |   onClick,
 45 |   className,
 46 |   children,
 47 |   currentTime,
 48 |   dndListeners,
 49 |   dndAttributes,
 50 |   onMouseDown,
 51 |   onTouchStart,
 52 | }: EventWrapperProps) {
 53 |   // Always use the currentTime (if provided) to determine if the event is in the past
 54 |   const displayEnd = currentTime
 55 |     ? new Date(
 56 |         new Date(currentTime).getTime() +
 57 |           (new Date(event.end).getTime() - new Date(event.start).getTime())
 58 |       )
 59 |     : new Date(event.end)
 60 | 
 61 |   const isEventInPast = isPast(displayEnd)
 62 | 
 63 |   return (
 64 |     <button
 65 |       className={cn(
 66 |         "focus-visible:border-ring focus-visible:ring-ring/50 flex h-full w-full overflow-hidden px-1 text-left font-medium backdrop-blur-md transition outline-none select-none focus-visible:ring-[3px] data-dragging:cursor-grabbing data-dragging:shadow-lg data-past-event:line-through sm:px-2",
 67 |         getEventColorClasses(event.color),
 68 |         getBorderRadiusClasses(isFirstDay, isLastDay),
 69 |         className
 70 |       )}
 71 |       data-dragging={isDragging || undefined}
 72 |       data-past-event={isEventInPast || undefined}
 73 |       onClick={onClick}
 74 |       onMouseDown={onMouseDown}
 75 |       onTouchStart={onTouchStart}
 76 |       {...dndListeners}
 77 |       {...dndAttributes}
 78 |     >
 79 |       {children}
 80 |     </button>
 81 |   )
 82 | }
 83 | 
 84 | interface EventItemProps {
 85 |   event: CalendarEvent
 86 |   view: "month" | "week" | "day" | "agenda"
 87 |   isDragging?: boolean
 88 |   onClick?: (e: React.MouseEvent) => void
 89 |   showTime?: boolean
 90 |   currentTime?: Date // For updating time during drag
 91 |   isFirstDay?: boolean
 92 |   isLastDay?: boolean
 93 |   children?: React.ReactNode
 94 |   className?: string
 95 |   dndListeners?: SyntheticListenerMap
 96 |   dndAttributes?: DraggableAttributes
 97 |   onMouseDown?: (e: React.MouseEvent) => void
 98 |   onTouchStart?: (e: React.TouchEvent) => void
 99 | }
100 | 
101 | export function EventItem({
102 |   event,
103 |   view,
104 |   isDragging,
105 |   onClick,
106 |   showTime,
107 |   currentTime,
108 |   isFirstDay = true,
109 |   isLastDay = true,
110 |   children,
111 |   className,
112 |   dndListeners,
113 |   dndAttributes,
114 |   onMouseDown,
115 |   onTouchStart,
116 | }: EventItemProps) {
117 |   const eventColor = event.color
118 | 
119 |   // Use the provided currentTime (for dragging) or the event's actual time
120 |   const displayStart = useMemo(() => {
121 |     return currentTime || new Date(event.start)
122 |   }, [currentTime, event.start])
123 | 
124 |   const displayEnd = useMemo(() => {
125 |     return currentTime
126 |       ? new Date(
127 |           new Date(currentTime).getTime() +
128 |             (new Date(event.end).getTime() - new Date(event.start).getTime())
129 |         )
130 |       : new Date(event.end)
131 |   }, [currentTime, event.start, event.end])
132 | 
133 |   // Calculate event duration in minutes
134 |   const durationMinutes = useMemo(() => {
135 |     return differenceInMinutes(displayEnd, displayStart)
136 |   }, [displayStart, displayEnd])
137 | 
138 |   const getEventTime = () => {
139 |     if (event.allDay) return "All day"
140 | 
141 |     // For short events (less than 45 minutes), only show start time
142 |     if (durationMinutes < 45) {
143 |       return formatTimeWithOptionalMinutes(displayStart)
144 |     }
145 | 
146 |     // For longer events, show both start and end time
147 |     return `${formatTimeWithOptionalMinutes(displayStart)} - ${formatTimeWithOptionalMinutes(displayEnd)}`
148 |   }
149 | 
150 |   if (view === "month") {
151 |     return (
152 |       <EventWrapper
153 |         event={event}
154 |         isFirstDay={isFirstDay}
155 |         isLastDay={isLastDay}
156 |         isDragging={isDragging}
157 |         onClick={onClick}
158 |         className={cn(
159 |           "mt-[var(--event-gap)] h-[var(--event-height)] items-center text-[10px] sm:text-xs",
160 |           className
161 |         )}
162 |         currentTime={currentTime}
163 |         dndListeners={dndListeners}
164 |         dndAttributes={dndAttributes}
165 |         onMouseDown={onMouseDown}
166 |         onTouchStart={onTouchStart}
167 |       >
168 |         {children || (
169 |           <span className="truncate">
170 |             {!event.allDay && (
171 |               <span className="truncate font-normal opacity-70 sm:text-[11px]">
172 |                 {formatTimeWithOptionalMinutes(displayStart)}{" "}
173 |               </span>
174 |             )}
175 |             {event.title}
176 |           </span>
177 |         )}
178 |       </EventWrapper>
179 |     )
180 |   }
181 | 
182 |   if (view === "week" || view === "day") {
183 |     return (
184 |       <EventWrapper
185 |         event={event}
186 |         isFirstDay={isFirstDay}
187 |         isLastDay={isLastDay}
188 |         isDragging={isDragging}
189 |         onClick={onClick}
190 |         className={cn(
191 |           "py-1",
192 |           durationMinutes < 45 ? "items-center" : "flex-col",
193 |           view === "week" ? "text-[10px] sm:text-xs" : "text-xs",
194 |           className
195 |         )}
196 |         currentTime={currentTime}
197 |         dndListeners={dndListeners}
198 |         dndAttributes={dndAttributes}
199 |         onMouseDown={onMouseDown}
200 |         onTouchStart={onTouchStart}
201 |       >
202 |         {durationMinutes < 45 ? (
203 |           <div className="truncate">
204 |             {event.title}{" "}
205 |             {showTime && (
206 |               <span className="opacity-70">
207 |                 {formatTimeWithOptionalMinutes(displayStart)}
208 |               </span>
209 |             )}
210 |           </div>
211 |         ) : (
212 |           <>
213 |             <div className="truncate font-medium">{event.title}</div>
214 |             {showTime && (
215 |               <div className="truncate font-normal opacity-70 sm:text-[11px]">
216 |                 {getEventTime()}
217 |               </div>
218 |             )}
219 |           </>
220 |         )}
221 |       </EventWrapper>
222 |     )
223 |   }
224 | 
225 |   // Agenda view - kept separate since it's significantly different
226 |   return (
227 |     <button
228 |       className={cn(
229 |         "focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-col gap-1 rounded p-2 text-left transition outline-none focus-visible:ring-[3px] data-past-event:line-through data-past-event:opacity-90",
230 |         getEventColorClasses(eventColor),
231 |         className
232 |       )}
233 |       data-past-event={isPast(new Date(event.end)) || undefined}
234 |       onClick={onClick}
235 |       onMouseDown={onMouseDown}
236 |       onTouchStart={onTouchStart}
237 |       {...dndListeners}
238 |       {...dndAttributes}
239 |     >
240 |       <div className="text-sm font-medium">{event.title}</div>
241 |       <div className="text-xs opacity-70">
242 |         {event.allDay ? (
243 |           <span>All day</span>
244 |         ) : (
245 |           <span className="uppercase">
246 |             {formatTimeWithOptionalMinutes(displayStart)} -{" "}
247 |             {formatTimeWithOptionalMinutes(displayEnd)}
248 |           </span>
249 |         )}
250 |         {event.location && (
251 |           <>
252 |             <span className="px-1 opacity-35"> · </span>
253 |             <span>{event.location}</span>
254 |           </>
255 |         )}
256 |       </div>
257 |       {event.description && (
258 |         <div className="my-1 text-xs opacity-90">{event.description}</div>
259 |       )}
260 |     </button>
261 |   )
262 | }
263 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @import "tw-animate-css";
  4 | 
  5 | @custom-variant dark (&:is(.dark *));
  6 | 
  7 | :root {
  8 |   --background: oklch(1 0 0); /* --color-white */
  9 |   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 10 |   --card: oklch(1 0 0); /* --color-white */
 11 |   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 12 |   --popover: oklch(1 0 0); /* --color-white */
 13 |   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 14 |   --primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 15 |   --primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 16 |   --secondary: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
 17 |   --secondary-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 18 |   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
 19 |   --muted-foreground: oklch(0.55 0.01 286); /* --color-zinc-500 */
 20 |   --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
 21 |   --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 22 |   --destructive: oklch(0.637 0.237 25.331); /* --color-red-500 */
 23 |   --destructive-foreground: oklch(0.637 0.237 25.331); /* --color-red-500 */
 24 |   --border: oklch(0.92 0 286); /* --color-zinc-200 */
 25 |   --input: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
 26 |   --ring: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
 27 |   --chart-1: oklch(0.646 0.222 41.116);
 28 |   --chart-2: oklch(0.6 0.118 184.704);
 29 |   --chart-3: oklch(0.398 0.07 227.392);
 30 |   --chart-4: oklch(0.828 0.189 84.429);
 31 |   --chart-5: oklch(0.769 0.188 70.08);
 32 |   --radius: 0.625rem;
 33 |   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
 34 |   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 35 |   --sidebar-primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 36 |   --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 37 |   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
 38 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 39 |   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
 40 |   --sidebar-ring: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
 41 | }
 42 | 
 43 | .dark {
 44 |   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 45 |   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 46 |   --card: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 47 |   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 48 |   --popover: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 49 |   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 50 |   --primary: oklch(0.985 0 0); /* --color-zinc-50 */
 51 |   --primary-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 52 |   --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
 53 |   --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 54 |   --muted: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 55 |   --muted-foreground: oklch(0.65 0.01 286); /* Between zinc-400 and zinc-500 */
 56 |   --accent: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
 57 |   --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 58 |   --destructive: oklch(0.396 0.141 25.723); /* --color-red-900 */
 59 |   --destructive-foreground: oklch(0.637 0.237 25.331); /* --color-red-500 */
 60 |   --border: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
 61 |   --input: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
 62 |   --ring: oklch(0.442 0.017 285.786); /* --color-zinc-600 */
 63 |   --chart-1: oklch(0.488 0.243 264.376);
 64 |   --chart-2: oklch(0.696 0.17 162.48);
 65 |   --chart-3: oklch(0.769 0.188 70.08);
 66 |   --chart-4: oklch(0.627 0.265 303.9);
 67 |   --chart-5: oklch(0.645 0.246 16.439);
 68 |   --sidebar: oklch(0.205 0 0); /* --color-zinc-900 */
 69 |   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 70 |   --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
 71 |   --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 72 |   --sidebar-accent: oklch(0.269 0 0); /* --color-zinc-800 */
 73 |   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 74 |   --sidebar-border: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
 75 |   --sidebar-ring: oklch(0.442 0.017 285.786); /* --color-zinc-600 */
 76 | }
 77 | 
 78 | @theme inline {
 79 |   --font-sans: var(--font-sans);
 80 |   --font-mono: var(--font-mono);
 81 | 
 82 |   --radius-lg: var(--radius);
 83 |   --radius-md: calc(var(--radius) - 2px);
 84 |   --radius-sm: calc(var(--radius) - 4px);
 85 | 
 86 |   --color-background: var(--background);
 87 |   --color-foreground: var(--foreground);
 88 | 
 89 |   --color-card: var(--card);
 90 |   --color-card-foreground: var(--card-foreground);
 91 | 
 92 |   --color-popover: var(--popover);
 93 |   --color-popover-foreground: var(--popover-foreground);
 94 | 
 95 |   --color-primary: var(--primary);
 96 |   --color-primary-foreground: var(--primary-foreground);
 97 | 
 98 |   --color-secondary: var(--secondary);
 99 |   --color-secondary-foreground: var(--secondary-foreground);
100 | 
101 |   --color-muted: var(--muted);
102 |   --color-muted-foreground: var(--muted-foreground);
103 | 
104 |   --color-accent: var(--accent);
105 |   --color-accent-foreground: var(--accent-foreground);
106 | 
107 |   --color-destructive: var(--destructive);
108 |   --color-destructive-foreground: var(--destructive-foreground);
109 | 
110 |   --color-border: var(--border);
111 |   --color-input: var(--input);
112 |   --color-ring: var(--ring);
113 | 
114 |   --color-sidebar: var(--sidebar);
115 |   --color-sidebar-foreground: var(--sidebar-foreground);
116 |   --color-sidebar-primary: var(--sidebar-primary);
117 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
118 |   --color-sidebar-accent: var(--sidebar-accent);
119 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
120 |   --color-sidebar-border: var(--sidebar-border);
121 |   --color-sidebar-ring: var(--sidebar-ring);
122 | 
123 |   --animate-accordion-down: accordion-down 0.2s ease-out;
124 |   --animate-accordion-up: accordion-up 0.2s ease-out;
125 |   --animate-collapsible-down: collapsible-down 0.2s ease-out;
126 |   --animate-collapsible-up: collapsible-up 0.2s ease-out;
127 | 
128 |   @keyframes accordion-down {
129 |     from {
130 |       height: 0;
131 |     }
132 |     to {
133 |       height: var(--radix-accordion-content-height);
134 |     }
135 |   }
136 |   @keyframes accordion-up {
137 |     from {
138 |       height: var(--radix-accordion-content-height);
139 |     }
140 |     to {
141 |       height: 0;
142 |     }
143 |   }
144 |   @keyframes collapsible-down {
145 |     from {
146 |       height: 0;
147 |     }
148 |     to {
149 |       height: var(--radix-collapsible-content-height);
150 |     }
151 |   }
152 |   @keyframes collapsible-up {
153 |     from {
154 |       height: var(--radix-collapsible-content-height);
155 |     }
156 |     to {
157 |       height: 0;
158 |     }
159 |   }
160 | }
161 | 
162 | /*
163 |   The default border color has changed to `currentColor` in Tailwind CSS v4,
164 |   so we've added these compatibility styles to make sure everything still
165 |   looks the same as it did with Tailwind CSS v3.
166 | 
167 |   If we ever want to remove these styles, we need to add an explicit border
168 |   color utility to any element that depends on these defaults.
169 | */
170 | @layer base {
171 |   *,
172 |   ::after,
173 |   ::before,
174 |   ::backdrop,
175 |   ::file-selector-button {
176 |     border-color: var(--color-gray-200, currentColor);
177 |   }
178 | }
179 | 
180 | @utility text-balance {
181 |   text-wrap: balance;
182 | }
183 | 
184 | @layer utilities {
185 |   body {
186 |     font-family: Arial, Helvetica, sans-serif;
187 |   }
188 | }
189 | 
190 | @layer base {
191 |   :root {
192 |     --background: 0 0% 100%;
193 |     --foreground: 0 0% 3.9%;
194 |     --card: 0 0% 100%;
195 |     --card-foreground: 0 0% 3.9%;
196 |     --popover: 0 0% 100%;
197 |     --popover-foreground: 0 0% 3.9%;
198 |     --primary: 0 0% 9%;
199 |     --primary-foreground: 0 0% 98%;
200 |     --secondary: 0 0% 96.1%;
201 |     --secondary-foreground: 0 0% 9%;
202 |     --muted: 0 0% 96.1%;
203 |     --muted-foreground: 0 0% 45.1%;
204 |     --accent: 0 0% 96.1%;
205 |     --accent-foreground: 0 0% 9%;
206 |     --destructive: 0 84.2% 60.2%;
207 |     --destructive-foreground: 0 0% 98%;
208 |     --border: 0 0% 89.8%;
209 |     --input: 0 0% 89.8%;
210 |     --ring: 0 0% 3.9%;
211 |     --chart-1: 12 76% 61%;
212 |     --chart-2: 173 58% 39%;
213 |     --chart-3: 197 37% 24%;
214 |     --chart-4: 43 74% 66%;
215 |     --chart-5: 27 87% 67%;
216 |     --radius: 0.625rem;
217 |     --sidebar-background: 0 0% 98%;
218 |     --sidebar-foreground: 240 5.3% 26.1%;
219 |     --sidebar-primary: 240 5.9% 10%;
220 |     --sidebar-primary-foreground: 0 0% 98%;
221 |     --sidebar-accent: 240 4.8% 95.9%;
222 |     --sidebar-accent-foreground: 240 5.9% 10%;
223 |     --sidebar-border: 220 13% 91%;
224 |     --sidebar-ring: 217.2 91.2% 59.8%;
225 |   }
226 |   .dark {
227 |     --background: 0 0% 3.9%;
228 |     --foreground: 0 0% 98%;
229 |     --card: 0 0% 3.9%;
230 |     --card-foreground: 0 0% 98%;
231 |     --popover: 0 0% 3.9%;
232 |     --popover-foreground: 0 0% 98%;
233 |     --primary: 0 0% 98%;
234 |     --primary-foreground: 0 0% 9%;
235 |     --secondary: 0 0% 14.9%;
236 |     --secondary-foreground: 0 0% 98%;
237 |     --muted: 0 0% 14.9%;
238 |     --muted-foreground: 0 0% 63.9%;
239 |     --accent: 0 0% 14.9%;
240 |     --accent-foreground: 0 0% 98%;
241 |     --destructive: 0 62.8% 30.6%;
242 |     --destructive-foreground: 0 0% 98%;
243 |     --border: 0 0% 14.9%;
244 |     --input: 0 0% 14.9%;
245 |     --ring: 0 0% 83.1%;
246 |     --chart-1: 220 70% 50%;
247 |     --chart-2: 160 60% 45%;
248 |     --chart-3: 30 80% 55%;
249 |     --chart-4: 280 65% 60%;
250 |     --chart-5: 340 75% 55%;
251 |     --sidebar-background: 240 5.9% 10%;
252 |     --sidebar-foreground: 240 4.8% 95.9%;
253 |     --sidebar-primary: 224.3 76.3% 48%;
254 |     --sidebar-primary-foreground: 0 0% 100%;
255 |     --sidebar-accent: 240 3.7% 15.9%;
256 |     --sidebar-accent-foreground: 240 4.8% 95.9%;
257 |     --sidebar-border: 240 3.7% 15.9%;
258 |     --sidebar-ring: 217.2 91.2% 59.8%;
259 |   }
260 | }
261 | 
262 | @layer base {
263 |   * {
264 |     @apply border-border;
265 |   }
266 |   body {
267 |     @apply bg-background text-foreground;
268 |   }
269 | }
270 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | type PointerDownEvent = Parameters<
 10 |   NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps["onPointerDown"]>
 11 | >[0]
 12 | type PointerDownOutsideEvent = Parameters<
 13 |   NonNullable<
 14 |     DropdownMenuPrimitive.DropdownMenuContentProps["onPointerDownOutside"]
 15 |   >
 16 | >[0]
 17 | 
 18 | function DropdownMenu({
 19 |   ...props
 20 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
 21 |   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 22 | }
 23 | 
 24 | function DropdownMenuPortal({
 25 |   ...props
 26 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
 27 |   return (
 28 |     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 29 |   )
 30 | }
 31 | 
 32 | function DropdownMenuTrigger({
 33 |   ...props
 34 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
 35 |   return (
 36 |     <DropdownMenuPrimitive.Trigger
 37 |       data-slot="dropdown-menu-trigger"
 38 |       {...props}
 39 |     />
 40 |   )
 41 | }
 42 | 
 43 | function DropdownMenuContent({
 44 |   className,
 45 |   sideOffset = 4,
 46 |   onPointerDown,
 47 |   onPointerDownOutside,
 48 |   onCloseAutoFocus,
 49 |   ...props
 50 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
 51 |   const isCloseFromMouse = React.useRef<boolean>(false)
 52 | 
 53 |   const handlePointerDown = React.useCallback(
 54 |     (e: PointerDownEvent) => {
 55 |       isCloseFromMouse.current = true
 56 |       onPointerDown?.(e)
 57 |     },
 58 |     [onPointerDown]
 59 |   )
 60 | 
 61 |   const handlePointerDownOutside = React.useCallback(
 62 |     (e: PointerDownOutsideEvent) => {
 63 |       isCloseFromMouse.current = true
 64 |       onPointerDownOutside?.(e)
 65 |     },
 66 |     [onPointerDownOutside]
 67 |   )
 68 | 
 69 |   const handleCloseAutoFocus = React.useCallback(
 70 |     (e: Event) => {
 71 |       if (onCloseAutoFocus) {
 72 |         return onCloseAutoFocus(e)
 73 |       }
 74 | 
 75 |       if (!isCloseFromMouse.current) {
 76 |         return
 77 |       }
 78 | 
 79 |       e.preventDefault()
 80 |       isCloseFromMouse.current = false
 81 |     },
 82 |     [onCloseAutoFocus]
 83 |   )
 84 | 
 85 |   return (
 86 |     <DropdownMenuPrimitive.Portal>
 87 |       <DropdownMenuPrimitive.Content
 88 |         data-slot="dropdown-menu-content"
 89 |         sideOffset={sideOffset}
 90 |         className={cn(
 91 |           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-40 overflow-hidden rounded-md border p-1 shadow-lg",
 92 |           className
 93 |         )}
 94 |         onPointerDown={handlePointerDown}
 95 |         onPointerDownOutside={handlePointerDownOutside}
 96 |         onCloseAutoFocus={handleCloseAutoFocus}
 97 |         {...props}
 98 |       />
 99 |     </DropdownMenuPrimitive.Portal>
100 |   )
101 | }
102 | 
103 | function DropdownMenuGroup({
104 |   ...props
105 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
106 |   return (
107 |     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
108 |   )
109 | }
110 | 
111 | function DropdownMenuItem({
112 |   className,
113 |   inset,
114 |   variant = "default",
115 |   ...props
116 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
117 |   inset?: boolean
118 |   variant?: "default" | "destructive"
119 | }) {
120 |   return (
121 |     <DropdownMenuPrimitive.Item
122 |       data-slot="dropdown-menu-item"
123 |       data-inset={inset}
124 |       data-variant={variant}
125 |       className={cn(
126 |         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
127 |         className
128 |       )}
129 |       {...props}
130 |     />
131 |   )
132 | }
133 | 
134 | function DropdownMenuCheckboxItem({
135 |   className,
136 |   children,
137 |   checked,
138 |   ...props
139 | }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
140 |   return (
141 |     <DropdownMenuPrimitive.CheckboxItem
142 |       data-slot="dropdown-menu-checkbox-item"
143 |       className={cn(
144 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
145 |         className
146 |       )}
147 |       checked={checked}
148 |       {...props}
149 |     >
150 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
151 |         <DropdownMenuPrimitive.ItemIndicator>
152 |           <CheckIcon size={16} />
153 |         </DropdownMenuPrimitive.ItemIndicator>
154 |       </span>
155 |       {children}
156 |     </DropdownMenuPrimitive.CheckboxItem>
157 |   )
158 | }
159 | 
160 | function DropdownMenuRadioGroup({
161 |   ...props
162 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
163 |   return (
164 |     <DropdownMenuPrimitive.RadioGroup
165 |       data-slot="dropdown-menu-radio-group"
166 |       {...props}
167 |     />
168 |   )
169 | }
170 | 
171 | function DropdownMenuRadioItem({
172 |   className,
173 |   children,
174 |   ...props
175 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
176 |   return (
177 |     <DropdownMenuPrimitive.RadioItem
178 |       data-slot="dropdown-menu-radio-item"
179 |       className={cn(
180 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
181 |         className
182 |       )}
183 |       {...props}
184 |     >
185 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
186 |         <DropdownMenuPrimitive.ItemIndicator>
187 |           <CircleIcon className="size-2 fill-current" />
188 |         </DropdownMenuPrimitive.ItemIndicator>
189 |       </span>
190 |       {children}
191 |     </DropdownMenuPrimitive.RadioItem>
192 |   )
193 | }
194 | 
195 | function DropdownMenuLabel({
196 |   className,
197 |   inset,
198 |   ...props
199 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
200 |   inset?: boolean
201 | }) {
202 |   return (
203 |     <DropdownMenuPrimitive.Label
204 |       data-slot="dropdown-menu-label"
205 |       data-inset={inset}
206 |       className={cn(
207 |         "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
208 |         className
209 |       )}
210 |       {...props}
211 |     />
212 |   )
213 | }
214 | 
215 | function DropdownMenuSeparator({
216 |   className,
217 |   ...props
218 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
219 |   return (
220 |     <DropdownMenuPrimitive.Separator
221 |       data-slot="dropdown-menu-separator"
222 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
223 |       {...props}
224 |     />
225 |   )
226 | }
227 | 
228 | function DropdownMenuShortcut({
229 |   className,
230 |   ...props
231 | }: React.ComponentProps<"span">) {
232 |   return (
233 |     <kbd
234 |       data-slot="dropdown-menu-shortcut"
235 |       className={cn(
236 |         "bg-background text-muted-foreground/70 ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium",
237 |         className
238 |       )}
239 |       {...props}
240 |     />
241 |   )
242 | }
243 | 
244 | function DropdownMenuSub({
245 |   ...props
246 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
247 |   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
248 | }
249 | 
250 | function DropdownMenuSubTrigger({
251 |   className,
252 |   inset,
253 |   children,
254 |   ...props
255 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
256 |   inset?: boolean
257 | }) {
258 |   return (
259 |     <DropdownMenuPrimitive.SubTrigger
260 |       data-slot="dropdown-menu-sub-trigger"
261 |       data-inset={inset}
262 |       className={cn(
263 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
264 |         className
265 |       )}
266 |       {...props}
267 |     >
268 |       {children}
269 |       <ChevronRightIcon
270 |         size={16}
271 |         className="text-muted-foreground/80 ml-auto"
272 |       />
273 |     </DropdownMenuPrimitive.SubTrigger>
274 |   )
275 | }
276 | 
277 | function DropdownMenuSubContent({
278 |   className,
279 |   ...props
280 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
281 |   return (
282 |     <DropdownMenuPrimitive.SubContent
283 |       data-slot="dropdown-menu-sub-content"
284 |       className={cn(
285 |         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-40 overflow-hidden rounded-md border p-1 shadow-lg",
286 |         className
287 |       )}
288 |       {...props}
289 |     />
290 |   )
291 | }
292 | 
293 | export {
294 |   DropdownMenu,
295 |   DropdownMenuCheckboxItem,
296 |   DropdownMenuContent,
297 |   DropdownMenuGroup,
298 |   DropdownMenuItem,
299 |   DropdownMenuLabel,
300 |   DropdownMenuPortal,
301 |   DropdownMenuRadioGroup,
302 |   DropdownMenuRadioItem,
303 |   DropdownMenuSeparator,
304 |   DropdownMenuShortcut,
305 |   DropdownMenuSub,
306 |   DropdownMenuSubContent,
307 |   DropdownMenuSubTrigger,
308 |   DropdownMenuTrigger,
309 | }
310 | 


--------------------------------------------------------------------------------
/components/event-calendar/month-view.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { useEffect, useMemo, useState } from "react"
  4 | import {
  5 |   addDays,
  6 |   eachDayOfInterval,
  7 |   endOfMonth,
  8 |   endOfWeek,
  9 |   format,
 10 |   isSameDay,
 11 |   isSameMonth,
 12 |   isToday,
 13 |   startOfMonth,
 14 |   startOfWeek,
 15 | } from "date-fns"
 16 | 
 17 | import {
 18 |   Popover,
 19 |   PopoverContent,
 20 |   PopoverTrigger,
 21 | } from "@/components/ui/popover"
 22 | import {
 23 |   DraggableEvent,
 24 |   DroppableCell,
 25 |   EventGap,
 26 |   EventHeight,
 27 |   EventItem,
 28 |   getAllEventsForDay,
 29 |   getEventsForDay,
 30 |   getSpanningEventsForDay,
 31 |   sortEvents,
 32 |   useEventVisibility,
 33 |   type CalendarEvent,
 34 | } from "@/components/event-calendar"
 35 | import { DefaultStartHour } from "@/components/event-calendar/constants"
 36 | 
 37 | interface MonthViewProps {
 38 |   currentDate: Date
 39 |   events: CalendarEvent[]
 40 |   onEventSelect: (event: CalendarEvent) => void
 41 |   onEventCreate: (startTime: Date) => void
 42 | }
 43 | 
 44 | export function MonthView({
 45 |   currentDate,
 46 |   events,
 47 |   onEventSelect,
 48 |   onEventCreate,
 49 | }: MonthViewProps) {
 50 |   const days = useMemo(() => {
 51 |     const monthStart = startOfMonth(currentDate)
 52 |     const monthEnd = endOfMonth(monthStart)
 53 |     const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 })
 54 |     const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 })
 55 | 
 56 |     return eachDayOfInterval({ start: calendarStart, end: calendarEnd })
 57 |   }, [currentDate])
 58 | 
 59 |   const weekdays = useMemo(() => {
 60 |     return Array.from({ length: 7 }).map((_, i) => {
 61 |       const date = addDays(startOfWeek(new Date()), i)
 62 |       return format(date, "EEE")
 63 |     })
 64 |   }, [])
 65 | 
 66 |   const weeks = useMemo(() => {
 67 |     const result = []
 68 |     let week = []
 69 | 
 70 |     for (let i = 0; i < days.length; i++) {
 71 |       week.push(days[i])
 72 |       if (week.length === 7 || i === days.length - 1) {
 73 |         result.push(week)
 74 |         week = []
 75 |       }
 76 |     }
 77 | 
 78 |     return result
 79 |   }, [days])
 80 | 
 81 |   const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
 82 |     e.stopPropagation()
 83 |     onEventSelect(event)
 84 |   }
 85 | 
 86 |   const [isMounted, setIsMounted] = useState(false)
 87 |   const { contentRef, getVisibleEventCount } = useEventVisibility({
 88 |     eventHeight: EventHeight,
 89 |     eventGap: EventGap,
 90 |   })
 91 | 
 92 |   useEffect(() => {
 93 |     setIsMounted(true)
 94 |   }, [])
 95 | 
 96 |   return (
 97 |     <div data-slot="month-view" className="contents">
 98 |       <div className="border-border/70 grid grid-cols-7 border-b">
 99 |         {weekdays.map((day) => (
100 |           <div
101 |             key={day}
102 |             className="text-muted-foreground/70 py-2 text-center text-sm"
103 |           >
104 |             {day}
105 |           </div>
106 |         ))}
107 |       </div>
108 |       <div className="grid flex-1 auto-rows-fr">
109 |         {weeks.map((week, weekIndex) => (
110 |           <div
111 |             key={`week-${weekIndex}`}
112 |             className="grid grid-cols-7 [&:last-child>*]:border-b-0"
113 |           >
114 |             {week.map((day, dayIndex) => {
115 |               if (!day) return null // Skip if day is undefined
116 | 
117 |               const dayEvents = getEventsForDay(events, day)
118 |               const spanningEvents = getSpanningEventsForDay(events, day)
119 |               const isCurrentMonth = isSameMonth(day, currentDate)
120 |               const cellId = `month-cell-${day.toISOString()}`
121 |               const allDayEvents = [...spanningEvents, ...dayEvents]
122 |               const allEvents = getAllEventsForDay(events, day)
123 | 
124 |               const isReferenceCell = weekIndex === 0 && dayIndex === 0
125 |               const visibleCount = isMounted
126 |                 ? getVisibleEventCount(allDayEvents.length)
127 |                 : undefined
128 |               const hasMore =
129 |                 visibleCount !== undefined && allDayEvents.length > visibleCount
130 |               const remainingCount = hasMore
131 |                 ? allDayEvents.length - visibleCount
132 |                 : 0
133 | 
134 |               return (
135 |                 <div
136 |                   key={day.toString()}
137 |                   className="group border-border/70 data-outside-cell:bg-muted/25 data-outside-cell:text-muted-foreground/70 border-r border-b last:border-r-0"
138 |                   data-today={isToday(day) || undefined}
139 |                   data-outside-cell={!isCurrentMonth || undefined}
140 |                 >
141 |                   <DroppableCell
142 |                     id={cellId}
143 |                     date={day}
144 |                     onClick={() => {
145 |                       const startTime = new Date(day)
146 |                       startTime.setHours(DefaultStartHour, 0, 0)
147 |                       onEventCreate(startTime)
148 |                     }}
149 |                   >
150 |                     <div className="group-data-today:bg-primary group-data-today:text-primary-foreground mt-1 inline-flex size-6 items-center justify-center rounded-full text-sm">
151 |                       {format(day, "d")}
152 |                     </div>
153 |                     <div
154 |                       ref={isReferenceCell ? contentRef : null}
155 |                       className="min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)]"
156 |                     >
157 |                       {sortEvents(allDayEvents).map((event, index) => {
158 |                         const eventStart = new Date(event.start)
159 |                         const eventEnd = new Date(event.end)
160 |                         const isFirstDay = isSameDay(day, eventStart)
161 |                         const isLastDay = isSameDay(day, eventEnd)
162 | 
163 |                         const isHidden =
164 |                           isMounted && visibleCount && index >= visibleCount
165 | 
166 |                         if (!visibleCount) return null
167 | 
168 |                         if (!isFirstDay) {
169 |                           return (
170 |                             <div
171 |                               key={`spanning-${event.id}-${day.toISOString().slice(0, 10)}`}
172 |                               className="aria-hidden:hidden"
173 |                               aria-hidden={isHidden ? "true" : undefined}
174 |                             >
175 |                               <EventItem
176 |                                 onClick={(e) => handleEventClick(event, e)}
177 |                                 event={event}
178 |                                 view="month"
179 |                                 isFirstDay={isFirstDay}
180 |                                 isLastDay={isLastDay}
181 |                               >
182 |                                 <div className="invisible" aria-hidden={true}>
183 |                                   {!event.allDay && (
184 |                                     <span>
185 |                                       {format(
186 |                                         new Date(event.start),
187 |                                         "h:mm"
188 |                                       )}{" "}
189 |                                     </span>
190 |                                   )}
191 |                                   {event.title}
192 |                                 </div>
193 |                               </EventItem>
194 |                             </div>
195 |                           )
196 |                         }
197 | 
198 |                         return (
199 |                           <div
200 |                             key={event.id}
201 |                             className="aria-hidden:hidden"
202 |                             aria-hidden={isHidden ? "true" : undefined}
203 |                           >
204 |                             <DraggableEvent
205 |                               event={event}
206 |                               view="month"
207 |                               onClick={(e) => handleEventClick(event, e)}
208 |                               isFirstDay={isFirstDay}
209 |                               isLastDay={isLastDay}
210 |                             />
211 |                           </div>
212 |                         )
213 |                       })}
214 | 
215 |                       {hasMore && (
216 |                         <Popover modal>
217 |                           <PopoverTrigger asChild>
218 |                             <button
219 |                               className="focus-visible:border-ring focus-visible:ring-ring/50 text-muted-foreground hover:text-foreground hover:bg-muted/50 mt-[var(--event-gap)] flex h-[var(--event-height)] w-full items-center overflow-hidden px-1 text-left text-[10px] backdrop-blur-md transition outline-none select-none focus-visible:ring-[3px] sm:px-2 sm:text-xs"
220 |                               onClick={(e) => e.stopPropagation()}
221 |                             >
222 |                               <span>
223 |                                 + {remainingCount}{" "}
224 |                                 <span className="max-sm:sr-only">more</span>
225 |                               </span>
226 |                             </button>
227 |                           </PopoverTrigger>
228 |                           <PopoverContent
229 |                             align="center"
230 |                             className="max-w-52 p-3"
231 |                             style={
232 |                               {
233 |                                 "--event-height": `${EventHeight}px`,
234 |                               } as React.CSSProperties
235 |                             }
236 |                           >
237 |                             <div className="space-y-2">
238 |                               <div className="text-sm font-medium">
239 |                                 {format(day, "EEE d")}
240 |                               </div>
241 |                               <div className="space-y-1">
242 |                                 {sortEvents(allEvents).map((event) => {
243 |                                   const eventStart = new Date(event.start)
244 |                                   const eventEnd = new Date(event.end)
245 |                                   const isFirstDay = isSameDay(day, eventStart)
246 |                                   const isLastDay = isSameDay(day, eventEnd)
247 | 
248 |                                   return (
249 |                                     <EventItem
250 |                                       key={event.id}
251 |                                       onClick={(e) =>
252 |                                         handleEventClick(event, e)
253 |                                       }
254 |                                       event={event}
255 |                                       view="month"
256 |                                       isFirstDay={isFirstDay}
257 |                                       isLastDay={isLastDay}
258 |                                     />
259 |                                   )
260 |                                 })}
261 |                               </div>
262 |                             </div>
263 |                           </PopoverContent>
264 |                         </Popover>
265 |                       )}
266 |                     </div>
267 |                   </DroppableCell>
268 |                 </div>
269 |               )
270 |             })}
271 |           </div>
272 |         ))}
273 |       </div>
274 |     </div>
275 |   )
276 | }
277 | 


--------------------------------------------------------------------------------
/components/event-calendar/day-view.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { useMemo } from "react"
  4 | import {
  5 |   addHours,
  6 |   areIntervalsOverlapping,
  7 |   differenceInMinutes,
  8 |   eachHourOfInterval,
  9 |   format,
 10 |   getHours,
 11 |   getMinutes,
 12 |   isSameDay,
 13 |   startOfDay,
 14 | } from "date-fns"
 15 | 
 16 | import { cn } from "@/lib/utils"
 17 | import {
 18 |   DraggableEvent,
 19 |   DroppableCell,
 20 |   EventItem,
 21 |   isMultiDayEvent,
 22 |   useCurrentTimeIndicator,
 23 |   WeekCellsHeight,
 24 |   type CalendarEvent,
 25 | } from "@/components/event-calendar"
 26 | import { EndHour, StartHour } from "@/components/event-calendar/constants"
 27 | 
 28 | interface DayViewProps {
 29 |   currentDate: Date
 30 |   events: CalendarEvent[]
 31 |   onEventSelect: (event: CalendarEvent) => void
 32 |   onEventCreate: (startTime: Date) => void
 33 | }
 34 | 
 35 | interface PositionedEvent {
 36 |   event: CalendarEvent
 37 |   top: number
 38 |   height: number
 39 |   left: number
 40 |   width: number
 41 |   zIndex: number
 42 | }
 43 | 
 44 | export function DayView({
 45 |   currentDate,
 46 |   events,
 47 |   onEventSelect,
 48 |   onEventCreate,
 49 | }: DayViewProps) {
 50 |   const hours = useMemo(() => {
 51 |     const dayStart = startOfDay(currentDate)
 52 |     return eachHourOfInterval({
 53 |       start: addHours(dayStart, StartHour),
 54 |       end: addHours(dayStart, EndHour - 1),
 55 |     })
 56 |   }, [currentDate])
 57 | 
 58 |   const dayEvents = useMemo(() => {
 59 |     return events
 60 |       .filter((event) => {
 61 |         const eventStart = new Date(event.start)
 62 |         const eventEnd = new Date(event.end)
 63 |         return (
 64 |           isSameDay(currentDate, eventStart) ||
 65 |           isSameDay(currentDate, eventEnd) ||
 66 |           (currentDate > eventStart && currentDate < eventEnd)
 67 |         )
 68 |       })
 69 |       .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
 70 |   }, [currentDate, events])
 71 | 
 72 |   // Filter all-day events
 73 |   const allDayEvents = useMemo(() => {
 74 |     return dayEvents.filter((event) => {
 75 |       // Include explicitly marked all-day events or multi-day events
 76 |       return event.allDay || isMultiDayEvent(event)
 77 |     })
 78 |   }, [dayEvents])
 79 | 
 80 |   // Get only single-day time-based events
 81 |   const timeEvents = useMemo(() => {
 82 |     return dayEvents.filter((event) => {
 83 |       // Exclude all-day events and multi-day events
 84 |       return !event.allDay && !isMultiDayEvent(event)
 85 |     })
 86 |   }, [dayEvents])
 87 | 
 88 |   // Process events to calculate positions
 89 |   const positionedEvents = useMemo(() => {
 90 |     const result: PositionedEvent[] = []
 91 |     const dayStart = startOfDay(currentDate)
 92 | 
 93 |     // Sort events by start time and duration
 94 |     const sortedEvents = [...timeEvents].sort((a, b) => {
 95 |       const aStart = new Date(a.start)
 96 |       const bStart = new Date(b.start)
 97 |       const aEnd = new Date(a.end)
 98 |       const bEnd = new Date(b.end)
 99 | 
100 |       // First sort by start time
101 |       if (aStart < bStart) return -1
102 |       if (aStart > bStart) return 1
103 | 
104 |       // If start times are equal, sort by duration (longer events first)
105 |       const aDuration = differenceInMinutes(aEnd, aStart)
106 |       const bDuration = differenceInMinutes(bEnd, bStart)
107 |       return bDuration - aDuration
108 |     })
109 | 
110 |     // Track columns for overlapping events
111 |     const columns: { event: CalendarEvent; end: Date }[][] = []
112 | 
113 |     sortedEvents.forEach((event) => {
114 |       const eventStart = new Date(event.start)
115 |       const eventEnd = new Date(event.end)
116 | 
117 |       // Adjust start and end times if they're outside this day
118 |       const adjustedStart = isSameDay(currentDate, eventStart)
119 |         ? eventStart
120 |         : dayStart
121 |       const adjustedEnd = isSameDay(currentDate, eventEnd)
122 |         ? eventEnd
123 |         : addHours(dayStart, 24)
124 | 
125 |       // Calculate top position and height
126 |       const startHour = getHours(adjustedStart) + getMinutes(adjustedStart) / 60
127 |       const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60
128 |       const top = (startHour - StartHour) * WeekCellsHeight
129 |       const height = (endHour - startHour) * WeekCellsHeight
130 | 
131 |       // Find a column for this event
132 |       let columnIndex = 0
133 |       let placed = false
134 | 
135 |       while (!placed) {
136 |         const col = columns[columnIndex] || []
137 |         if (col.length === 0) {
138 |           columns[columnIndex] = col
139 |           placed = true
140 |         } else {
141 |           const overlaps = col.some((c) =>
142 |             areIntervalsOverlapping(
143 |               { start: adjustedStart, end: adjustedEnd },
144 |               { start: new Date(c.event.start), end: new Date(c.event.end) }
145 |             )
146 |           )
147 |           if (!overlaps) {
148 |             placed = true
149 |           } else {
150 |             columnIndex++
151 |           }
152 |         }
153 |       }
154 | 
155 |       // Ensure column is initialized before pushing
156 |       const currentColumn = columns[columnIndex] || []
157 |       columns[columnIndex] = currentColumn
158 |       currentColumn.push({ event, end: adjustedEnd })
159 | 
160 |       // First column takes full width, others are indented by 10% and take 90% width
161 |       const width = columnIndex === 0 ? 1 : 1 - (columnIndex * 0.1)
162 |       const left = columnIndex === 0 ? 0 : columnIndex * 0.1
163 | 
164 |       result.push({
165 |         event,
166 |         top,
167 |         height,
168 |         left,
169 |         width,
170 |         zIndex: 10 + columnIndex, // Higher columns get higher z-index
171 |       })
172 |     })
173 | 
174 |     return result
175 |   }, [currentDate, timeEvents])
176 | 
177 |   const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
178 |     e.stopPropagation()
179 |     onEventSelect(event)
180 |   }
181 | 
182 |   const showAllDaySection = allDayEvents.length > 0
183 |   const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(
184 |     currentDate,
185 |     "day"
186 |   )
187 | 
188 |   return (
189 |     <div data-slot="day-view" className="contents">
190 |       {showAllDaySection && (
191 |         <div className="border-border/70 bg-muted/50 border-t">
192 |           <div className="grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]">
193 |             <div className="relative">
194 |               <span className="text-muted-foreground/70 absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] sm:pe-4 sm:text-xs">
195 |                 All day
196 |               </span>
197 |             </div>
198 |             <div className="border-border/70 relative border-r p-1 last:border-r-0">
199 |               {allDayEvents.map((event) => {
200 |                 const eventStart = new Date(event.start)
201 |                 const eventEnd = new Date(event.end)
202 |                 const isFirstDay = isSameDay(currentDate, eventStart)
203 |                 const isLastDay = isSameDay(currentDate, eventEnd)
204 | 
205 |                 return (
206 |                   <EventItem
207 |                     key={`spanning-${event.id}`}
208 |                     onClick={(e) => handleEventClick(event, e)}
209 |                     event={event}
210 |                     view="month"
211 |                     isFirstDay={isFirstDay}
212 |                     isLastDay={isLastDay}
213 |                   >
214 |                     {/* Always show the title in day view for better usability */}
215 |                     <div>{event.title}</div>
216 |                   </EventItem>
217 |                 )
218 |               })}
219 |             </div>
220 |           </div>
221 |         </div>
222 |       )}
223 | 
224 |       <div className="border-border/70 grid flex-1 grid-cols-[3rem_1fr] overflow-hidden border-t sm:grid-cols-[4rem_1fr]">
225 |         <div>
226 |           {hours.map((hour, index) => (
227 |             <div
228 |               key={hour.toString()}
229 |               className="border-border/70 relative h-[var(--week-cells-height)] border-b last:border-b-0"
230 |             >
231 |               {index > 0 && (
232 |                 <span className="bg-background text-muted-foreground/70 absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end pe-2 text-[10px] sm:pe-4 sm:text-xs">
233 |                   {format(hour, "h a")}
234 |                 </span>
235 |               )}
236 |             </div>
237 |           ))}
238 |         </div>
239 | 
240 |         <div className="relative">
241 |           {/* Positioned events */}
242 |           {positionedEvents.map((positionedEvent) => (
243 |             <div
244 |               key={positionedEvent.event.id}
245 |               className="absolute z-10 px-0.5"
246 |               style={{
247 |                 top: `${positionedEvent.top}px`,
248 |                 height: `${positionedEvent.height}px`,
249 |                 left: `${positionedEvent.left * 100}%`,
250 |                 width: `${positionedEvent.width * 100}%`,
251 |                 zIndex: positionedEvent.zIndex,
252 |               }}
253 |             >
254 |               <div className="h-full w-full">
255 |                 <DraggableEvent
256 |                   event={positionedEvent.event}
257 |                   view="day"
258 |                   onClick={(e) => handleEventClick(positionedEvent.event, e)}
259 |                   showTime
260 |                   height={positionedEvent.height}
261 |                 />
262 |               </div>
263 |             </div>
264 |           ))}
265 | 
266 |           {/* Current time indicator */}
267 |           {currentTimeVisible && (
268 |             <div
269 |               className="pointer-events-none absolute right-0 left-0 z-20"
270 |               style={{ top: `${currentTimePosition}%` }}
271 |             >
272 |               <div className="relative flex items-center">
273 |                 <div className="bg-primary absolute -left-1 h-2 w-2 rounded-full"></div>
274 |                 <div className="bg-primary h-[2px] w-full"></div>
275 |               </div>
276 |             </div>
277 |           )}
278 | 
279 |           {/* Time grid */}
280 |           {hours.map((hour) => {
281 |             const hourValue = getHours(hour)
282 |             return (
283 |               <div
284 |                 key={hour.toString()}
285 |                 className="border-border/70 relative h-[var(--week-cells-height)] border-b last:border-b-0"
286 |               >
287 |                 {/* Quarter-hour intervals */}
288 |                 {[0, 1, 2, 3].map((quarter) => {
289 |                   const quarterHourTime = hourValue + quarter * 0.25
290 |                   return (
291 |                     <DroppableCell
292 |                       key={`${hour.toString()}-${quarter}`}
293 |                       id={`day-cell-${currentDate.toISOString()}-${quarterHourTime}`}
294 |                       date={currentDate}
295 |                       time={quarterHourTime}
296 |                       className={cn(
297 |                         "absolute h-[calc(var(--week-cells-height)/4)] w-full",
298 |                         quarter === 0 && "top-0",
299 |                         quarter === 1 &&
300 |                           "top-[calc(var(--week-cells-height)/4)]",
301 |                         quarter === 2 &&
302 |                           "top-[calc(var(--week-cells-height)/4*2)]",
303 |                         quarter === 3 &&
304 |                           "top-[calc(var(--week-cells-height)/4*3)]"
305 |                       )}
306 |                       onClick={() => {
307 |                         const startTime = new Date(currentDate)
308 |                         startTime.setHours(hourValue)
309 |                         startTime.setMinutes(quarter * 15)
310 |                         onEventCreate(startTime)
311 |                       }}
312 |                     />
313 |                   )
314 |                 })}
315 |               </div>
316 |             )
317 |           })}
318 |         </div>
319 |       </div>
320 |     </div>
321 |   )
322 | }
323 | 


--------------------------------------------------------------------------------
/components/event-calendar/calendar-dnd-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import {
  4 |   createContext,
  5 |   useContext,
  6 |   useId,
  7 |   useRef,
  8 |   useState,
  9 |   type ReactNode,
 10 | } from "react"
 11 | import {
 12 |   DndContext,
 13 |   DragOverlay,
 14 |   MouseSensor,
 15 |   PointerSensor,
 16 |   TouchSensor,
 17 |   useSensor,
 18 |   useSensors,
 19 |   type DragEndEvent,
 20 |   type DragOverEvent,
 21 |   type DragStartEvent,
 22 |   type UniqueIdentifier,
 23 | } from "@dnd-kit/core"
 24 | import { addMinutes, differenceInMinutes } from "date-fns"
 25 | 
 26 | import { EventItem, type CalendarEvent } from "@/components/event-calendar"
 27 | 
 28 | // Define the context type
 29 | type CalendarDndContextType = {
 30 |   activeEvent: CalendarEvent | null
 31 |   activeId: UniqueIdentifier | null
 32 |   activeView: "month" | "week" | "day" | null
 33 |   currentTime: Date | null
 34 |   eventHeight: number | null
 35 |   isMultiDay: boolean
 36 |   multiDayWidth: number | null
 37 |   dragHandlePosition: {
 38 |     x?: number
 39 |     y?: number
 40 |     data?: {
 41 |       isFirstDay?: boolean
 42 |       isLastDay?: boolean
 43 |     }
 44 |   } | null
 45 | }
 46 | 
 47 | // Create the context
 48 | const CalendarDndContext = createContext<CalendarDndContextType>({
 49 |   activeEvent: null,
 50 |   activeId: null,
 51 |   activeView: null,
 52 |   currentTime: null,
 53 |   eventHeight: null,
 54 |   isMultiDay: false,
 55 |   multiDayWidth: null,
 56 |   dragHandlePosition: null,
 57 | })
 58 | 
 59 | // Hook to use the context
 60 | export const useCalendarDnd = () => useContext(CalendarDndContext)
 61 | 
 62 | // Props for the provider
 63 | interface CalendarDndProviderProps {
 64 |   children: ReactNode
 65 |   onEventUpdate: (event: CalendarEvent) => void
 66 | }
 67 | 
 68 | export function CalendarDndProvider({
 69 |   children,
 70 |   onEventUpdate,
 71 | }: CalendarDndProviderProps) {
 72 |   const [activeEvent, setActiveEvent] = useState<CalendarEvent | null>(null)
 73 |   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null)
 74 |   const [activeView, setActiveView] = useState<"month" | "week" | "day" | null>(
 75 |     null
 76 |   )
 77 |   const [currentTime, setCurrentTime] = useState<Date | null>(null)
 78 |   const [eventHeight, setEventHeight] = useState<number | null>(null)
 79 |   const [isMultiDay, setIsMultiDay] = useState(false)
 80 |   const [multiDayWidth, setMultiDayWidth] = useState<number | null>(null)
 81 |   const [dragHandlePosition, setDragHandlePosition] = useState<{
 82 |     x?: number
 83 |     y?: number
 84 |     data?: {
 85 |       isFirstDay?: boolean
 86 |       isLastDay?: boolean
 87 |     }
 88 |   } | null>(null)
 89 | 
 90 |   // Store original event dimensions
 91 |   const eventDimensions = useRef<{ height: number }>({ height: 0 })
 92 | 
 93 |   // Configure sensors for better drag detection
 94 |   const sensors = useSensors(
 95 |     useSensor(MouseSensor, {
 96 |       // Require the mouse to move by 5px before activating
 97 |       activationConstraint: {
 98 |         distance: 5,
 99 |       },
100 |     }),
101 |     useSensor(TouchSensor, {
102 |       // Press delay of 250ms, with tolerance of 5px of movement
103 |       activationConstraint: {
104 |         delay: 250,
105 |         tolerance: 5,
106 |       },
107 |     }),
108 |     useSensor(PointerSensor, {
109 |       // Require the pointer to move by 5px before activating
110 |       activationConstraint: {
111 |         distance: 5,
112 |       },
113 |     })
114 |   )
115 | 
116 |   // Generate a stable ID for the DndContext
117 |   const dndContextId = useId()
118 | 
119 |   const handleDragStart = (event: DragStartEvent) => {
120 |     const { active } = event
121 | 
122 |     // Add safety check for data.current
123 |     if (!active.data.current) {
124 |       console.error("Missing data in drag start event", event)
125 |       return
126 |     }
127 | 
128 |     const {
129 |       event: calendarEvent,
130 |       view,
131 |       height,
132 |       isMultiDay: eventIsMultiDay,
133 |       multiDayWidth: eventMultiDayWidth,
134 |       dragHandlePosition: eventDragHandlePosition,
135 |     } = active.data.current as {
136 |       event: CalendarEvent
137 |       view: "month" | "week" | "day"
138 |       height?: number
139 |       isMultiDay?: boolean
140 |       multiDayWidth?: number
141 |       dragHandlePosition?: {
142 |         x?: number
143 |         y?: number
144 |         data?: {
145 |           isFirstDay?: boolean
146 |           isLastDay?: boolean
147 |         }
148 |       }
149 |     }
150 | 
151 |     setActiveEvent(calendarEvent)
152 |     setActiveId(active.id)
153 |     setActiveView(view)
154 |     setCurrentTime(new Date(calendarEvent.start))
155 |     setIsMultiDay(eventIsMultiDay || false)
156 |     setMultiDayWidth(eventMultiDayWidth || null)
157 |     setDragHandlePosition(eventDragHandlePosition || null)
158 | 
159 |     // Store event height if provided
160 |     if (height) {
161 |       eventDimensions.current.height = height
162 |       setEventHeight(height)
163 |     }
164 |   }
165 | 
166 |   const handleDragOver = (event: DragOverEvent) => {
167 |     const { over } = event
168 | 
169 |     if (over && activeEvent && over.data.current) {
170 |       const { date, time } = over.data.current as { date: Date; time?: number }
171 | 
172 |       // Update time for week/day views
173 |       if (time !== undefined && activeView !== "month") {
174 |         const newTime = new Date(date)
175 | 
176 |         // Calculate hours and minutes with 15-minute precision
177 |         const hours = Math.floor(time)
178 |         const fractionalHour = time - hours
179 | 
180 |         // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)
181 |         let minutes = 0
182 |         if (fractionalHour < 0.125) minutes = 0
183 |         else if (fractionalHour < 0.375) minutes = 15
184 |         else if (fractionalHour < 0.625) minutes = 30
185 |         else minutes = 45
186 | 
187 |         newTime.setHours(hours, minutes, 0, 0)
188 | 
189 |         // Only update if time has changed
190 |         if (
191 |           !currentTime ||
192 |           newTime.getHours() !== currentTime.getHours() ||
193 |           newTime.getMinutes() !== currentTime.getMinutes() ||
194 |           newTime.getDate() !== currentTime.getDate() ||
195 |           newTime.getMonth() !== currentTime.getMonth() ||
196 |           newTime.getFullYear() !== currentTime.getFullYear()
197 |         ) {
198 |           setCurrentTime(newTime)
199 |         }
200 |       } else if (activeView === "month") {
201 |         // For month view, just update the date but preserve time
202 |         const newTime = new Date(date)
203 |         if (currentTime) {
204 |           newTime.setHours(
205 |             currentTime.getHours(),
206 |             currentTime.getMinutes(),
207 |             currentTime.getSeconds(),
208 |             currentTime.getMilliseconds()
209 |           )
210 |         }
211 | 
212 |         // Only update if date has changed
213 |         if (
214 |           !currentTime ||
215 |           newTime.getDate() !== currentTime.getDate() ||
216 |           newTime.getMonth() !== currentTime.getMonth() ||
217 |           newTime.getFullYear() !== currentTime.getFullYear()
218 |         ) {
219 |           setCurrentTime(newTime)
220 |         }
221 |       }
222 |     }
223 |   }
224 | 
225 |   const handleDragEnd = (event: DragEndEvent) => {
226 |     const { active, over } = event
227 | 
228 |     // Add robust error checking
229 |     if (!over || !activeEvent || !currentTime) {
230 |       // Reset state and exit early
231 |       setActiveEvent(null)
232 |       setActiveId(null)
233 |       setActiveView(null)
234 |       setCurrentTime(null)
235 |       setEventHeight(null)
236 |       setIsMultiDay(false)
237 |       setMultiDayWidth(null)
238 |       setDragHandlePosition(null)
239 |       return
240 |     }
241 | 
242 |     try {
243 |       // Safely access data with checks
244 |       if (!active.data.current || !over.data.current) {
245 |         throw new Error("Missing data in drag event")
246 |       }
247 | 
248 |       const activeData = active.data.current as {
249 |         event?: CalendarEvent
250 |         view?: string
251 |       }
252 |       const overData = over.data.current as { date?: Date; time?: number }
253 | 
254 |       // Verify we have all required data
255 |       if (!activeData.event || !overData.date) {
256 |         throw new Error("Missing required event data")
257 |       }
258 | 
259 |       const calendarEvent = activeData.event
260 |       const date = overData.date
261 |       const time = overData.time
262 | 
263 |       // Calculate new start time
264 |       const newStart = new Date(date)
265 | 
266 |       // If time is provided (for week/day views), set the hours and minutes
267 |       if (time !== undefined) {
268 |         const hours = Math.floor(time)
269 |         const fractionalHour = time - hours
270 | 
271 |         // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)
272 |         let minutes = 0
273 |         if (fractionalHour < 0.125) minutes = 0
274 |         else if (fractionalHour < 0.375) minutes = 15
275 |         else if (fractionalHour < 0.625) minutes = 30
276 |         else minutes = 45
277 | 
278 |         newStart.setHours(hours, minutes, 0, 0)
279 |       } else {
280 |         // For month view, preserve the original time from currentTime
281 |         newStart.setHours(
282 |           currentTime.getHours(),
283 |           currentTime.getMinutes(),
284 |           currentTime.getSeconds(),
285 |           currentTime.getMilliseconds()
286 |         )
287 |       }
288 | 
289 |       // Calculate new end time based on the original duration
290 |       const originalStart = new Date(calendarEvent.start)
291 |       const originalEnd = new Date(calendarEvent.end)
292 |       const durationMinutes = differenceInMinutes(originalEnd, originalStart)
293 |       const newEnd = addMinutes(newStart, durationMinutes)
294 | 
295 |       // Only update if the start time has actually changed
296 |       const hasStartTimeChanged =
297 |         originalStart.getFullYear() !== newStart.getFullYear() ||
298 |         originalStart.getMonth() !== newStart.getMonth() ||
299 |         originalStart.getDate() !== newStart.getDate() ||
300 |         originalStart.getHours() !== newStart.getHours() ||
301 |         originalStart.getMinutes() !== newStart.getMinutes()
302 | 
303 |       if (hasStartTimeChanged) {
304 |         // Update the event only if the time has changed
305 |         onEventUpdate({
306 |           ...calendarEvent,
307 |           start: newStart,
308 |           end: newEnd,
309 |         })
310 |       }
311 |     } catch (error) {
312 |       console.error("Error in drag end handler:", error)
313 |     } finally {
314 |       // Always reset state
315 |       setActiveEvent(null)
316 |       setActiveId(null)
317 |       setActiveView(null)
318 |       setCurrentTime(null)
319 |       setEventHeight(null)
320 |       setIsMultiDay(false)
321 |       setMultiDayWidth(null)
322 |       setDragHandlePosition(null)
323 |     }
324 |   }
325 | 
326 |   return (
327 |     <DndContext
328 |       id={dndContextId}
329 |       sensors={sensors}
330 |       onDragStart={handleDragStart}
331 |       onDragOver={handleDragOver}
332 |       onDragEnd={handleDragEnd}
333 |     >
334 |       <CalendarDndContext.Provider
335 |         value={{
336 |           activeEvent,
337 |           activeId,
338 |           activeView,
339 |           currentTime,
340 |           eventHeight,
341 |           isMultiDay,
342 |           multiDayWidth,
343 |           dragHandlePosition,
344 |         }}
345 |       >
346 |         {children}
347 | 
348 |         <DragOverlay adjustScale={false} dropAnimation={null}>
349 |           {activeEvent && activeView && (
350 |             <div
351 |               style={{
352 |                 height: eventHeight ? `${eventHeight}px` : "auto",
353 |                 width:
354 |                   isMultiDay && multiDayWidth ? `${multiDayWidth}%` : "100%",
355 |                 // Remove the transform that was causing the shift
356 |               }}
357 |             >
358 |               <EventItem
359 |                 event={activeEvent}
360 |                 view={activeView}
361 |                 isDragging={true}
362 |                 showTime={activeView !== "month"}
363 |                 currentTime={currentTime || undefined}
364 |                 isFirstDay={dragHandlePosition?.data?.isFirstDay !== false}
365 |                 isLastDay={dragHandlePosition?.data?.isLastDay !== false}
366 |               />
367 |             </div>
368 |           )}
369 |         </DragOverlay>
370 |       </CalendarDndContext.Provider>
371 |     </DndContext>
372 |   )
373 | }
374 | 


--------------------------------------------------------------------------------
/components/event-calendar/event-calendar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useEffect, useMemo, useState } from "react"
  4 | import { RiCalendarCheckLine } from "@remixicon/react"
  5 | import {
  6 |   addDays,
  7 |   addHours,
  8 |   addMonths,
  9 |   addWeeks,
 10 |   endOfWeek,
 11 |   format,
 12 |   isSameMonth,
 13 |   startOfWeek,
 14 |   subMonths,
 15 |   subWeeks,
 16 | } from "date-fns"
 17 | import {
 18 |   ChevronDownIcon,
 19 |   ChevronLeftIcon,
 20 |   ChevronRightIcon,
 21 |   PlusIcon,
 22 | } from "lucide-react"
 23 | import { toast } from "sonner"
 24 | 
 25 | import { cn } from "@/lib/utils"
 26 | import { Button } from "@/components/ui/button"
 27 | import {
 28 |   DropdownMenu,
 29 |   DropdownMenuContent,
 30 |   DropdownMenuItem,
 31 |   DropdownMenuShortcut,
 32 |   DropdownMenuTrigger,
 33 | } from "@/components/ui/dropdown-menu"
 34 | import {
 35 |   AgendaDaysToShow,
 36 |   AgendaView,
 37 |   CalendarDndProvider,
 38 |   CalendarEvent,
 39 |   CalendarView,
 40 |   DayView,
 41 |   EventDialog,
 42 |   EventGap,
 43 |   EventHeight,
 44 |   MonthView,
 45 |   WeekCellsHeight,
 46 |   WeekView,
 47 | } from "@/components/event-calendar"
 48 | 
 49 | export interface EventCalendarProps {
 50 |   events?: CalendarEvent[]
 51 |   onEventAdd?: (event: CalendarEvent) => void
 52 |   onEventUpdate?: (event: CalendarEvent) => void
 53 |   onEventDelete?: (eventId: string) => void
 54 |   className?: string
 55 |   initialView?: CalendarView
 56 | }
 57 | 
 58 | export function EventCalendar({
 59 |   events = [],
 60 |   onEventAdd,
 61 |   onEventUpdate,
 62 |   onEventDelete,
 63 |   className,
 64 |   initialView = "month",
 65 | }: EventCalendarProps) {
 66 |   const [currentDate, setCurrentDate] = useState(new Date())
 67 |   const [view, setView] = useState<CalendarView>(initialView)
 68 |   const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)
 69 |   const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
 70 | 
 71 |   // Add keyboard shortcuts for view switching
 72 |   useEffect(() => {
 73 |     const handleKeyDown = (e: KeyboardEvent) => {
 74 |       // Skip if user is typing in an input, textarea or contentEditable element
 75 |       // or if the event dialog is open
 76 |       if (
 77 |         isEventDialogOpen ||
 78 |         e.target instanceof HTMLInputElement ||
 79 |         e.target instanceof HTMLTextAreaElement ||
 80 |         (e.target instanceof HTMLElement && e.target.isContentEditable)
 81 |       ) {
 82 |         return
 83 |       }
 84 | 
 85 |       switch (e.key.toLowerCase()) {
 86 |         case "m":
 87 |           setView("month")
 88 |           break
 89 |         case "w":
 90 |           setView("week")
 91 |           break
 92 |         case "d":
 93 |           setView("day")
 94 |           break
 95 |         case "a":
 96 |           setView("agenda")
 97 |           break
 98 |       }
 99 |     }
100 | 
101 |     window.addEventListener("keydown", handleKeyDown)
102 | 
103 |     return () => {
104 |       window.removeEventListener("keydown", handleKeyDown)
105 |     }
106 |   }, [isEventDialogOpen])
107 | 
108 |   const handlePrevious = () => {
109 |     if (view === "month") {
110 |       setCurrentDate(subMonths(currentDate, 1))
111 |     } else if (view === "week") {
112 |       setCurrentDate(subWeeks(currentDate, 1))
113 |     } else if (view === "day") {
114 |       setCurrentDate(addDays(currentDate, -1))
115 |     } else if (view === "agenda") {
116 |       // For agenda view, go back 30 days (a full month)
117 |       setCurrentDate(addDays(currentDate, -AgendaDaysToShow))
118 |     }
119 |   }
120 | 
121 |   const handleNext = () => {
122 |     if (view === "month") {
123 |       setCurrentDate(addMonths(currentDate, 1))
124 |     } else if (view === "week") {
125 |       setCurrentDate(addWeeks(currentDate, 1))
126 |     } else if (view === "day") {
127 |       setCurrentDate(addDays(currentDate, 1))
128 |     } else if (view === "agenda") {
129 |       // For agenda view, go forward 30 days (a full month)
130 |       setCurrentDate(addDays(currentDate, AgendaDaysToShow))
131 |     }
132 |   }
133 | 
134 |   const handleToday = () => {
135 |     setCurrentDate(new Date())
136 |   }
137 | 
138 |   const handleEventSelect = (event: CalendarEvent) => {
139 |     console.log("Event selected:", event) // Debug log
140 |     setSelectedEvent(event)
141 |     setIsEventDialogOpen(true)
142 |   }
143 | 
144 |   const handleEventCreate = (startTime: Date) => {
145 |     console.log("Creating new event at:", startTime) // Debug log
146 | 
147 |     // Snap to 15-minute intervals
148 |     const minutes = startTime.getMinutes()
149 |     const remainder = minutes % 15
150 |     if (remainder !== 0) {
151 |       if (remainder < 7.5) {
152 |         // Round down to nearest 15 min
153 |         startTime.setMinutes(minutes - remainder)
154 |       } else {
155 |         // Round up to nearest 15 min
156 |         startTime.setMinutes(minutes + (15 - remainder))
157 |       }
158 |       startTime.setSeconds(0)
159 |       startTime.setMilliseconds(0)
160 |     }
161 | 
162 |     const newEvent: CalendarEvent = {
163 |       id: "",
164 |       title: "",
165 |       start: startTime,
166 |       end: addHours(startTime, 1),
167 |       allDay: false,
168 |     }
169 |     setSelectedEvent(newEvent)
170 |     setIsEventDialogOpen(true)
171 |   }
172 | 
173 |   const handleEventSave = (event: CalendarEvent) => {
174 |     if (event.id) {
175 |       onEventUpdate?.(event)
176 |       // Show toast notification when an event is updated
177 |       toast(`Event "${event.title}" updated`, {
178 |         description: format(new Date(event.start), "MMM d, yyyy"),
179 |         position: "bottom-left",
180 |       })
181 |     } else {
182 |       onEventAdd?.({
183 |         ...event,
184 |         id: Math.random().toString(36).substring(2, 11),
185 |       })
186 |       // Show toast notification when an event is added
187 |       toast(`Event "${event.title}" added`, {
188 |         description: format(new Date(event.start), "MMM d, yyyy"),
189 |         position: "bottom-left",
190 |       })
191 |     }
192 |     setIsEventDialogOpen(false)
193 |     setSelectedEvent(null)
194 |   }
195 | 
196 |   const handleEventDelete = (eventId: string) => {
197 |     const deletedEvent = events.find((e) => e.id === eventId)
198 |     onEventDelete?.(eventId)
199 |     setIsEventDialogOpen(false)
200 |     setSelectedEvent(null)
201 | 
202 |     // Show toast notification when an event is deleted
203 |     if (deletedEvent) {
204 |       toast(`Event "${deletedEvent.title}" deleted`, {
205 |         description: format(new Date(deletedEvent.start), "MMM d, yyyy"),
206 |         position: "bottom-left",
207 |       })
208 |     }
209 |   }
210 | 
211 |   const handleEventUpdate = (updatedEvent: CalendarEvent) => {
212 |     onEventUpdate?.(updatedEvent)
213 | 
214 |     // Show toast notification when an event is updated via drag and drop
215 |     toast(`Event "${updatedEvent.title}" moved`, {
216 |       description: format(new Date(updatedEvent.start), "MMM d, yyyy"),
217 |       position: "bottom-left",
218 |     })
219 |   }
220 | 
221 |   const viewTitle = useMemo(() => {
222 |     if (view === "month") {
223 |       return format(currentDate, "MMMM yyyy")
224 |     } else if (view === "week") {
225 |       const start = startOfWeek(currentDate, { weekStartsOn: 0 })
226 |       const end = endOfWeek(currentDate, { weekStartsOn: 0 })
227 |       if (isSameMonth(start, end)) {
228 |         return format(start, "MMMM yyyy")
229 |       } else {
230 |         return `${format(start, "MMM")} - ${format(end, "MMM yyyy")}`
231 |       }
232 |     } else if (view === "day") {
233 |       return (
234 |         <>
235 |           <span className="min-[480px]:hidden" aria-hidden="true">
236 |             {format(currentDate, "MMM d, yyyy")}
237 |           </span>
238 |           <span className="max-[479px]:hidden min-md:hidden" aria-hidden="true">
239 |             {format(currentDate, "MMMM d, yyyy")}
240 |           </span>
241 |           <span className="max-md:hidden">
242 |             {format(currentDate, "EEE MMMM d, yyyy")}
243 |           </span>
244 |         </>
245 |       )
246 |     } else if (view === "agenda") {
247 |       // Show the month range for agenda view
248 |       const start = currentDate
249 |       const end = addDays(currentDate, AgendaDaysToShow - 1)
250 | 
251 |       if (isSameMonth(start, end)) {
252 |         return format(start, "MMMM yyyy")
253 |       } else {
254 |         return `${format(start, "MMM")} - ${format(end, "MMM yyyy")}`
255 |       }
256 |     } else {
257 |       return format(currentDate, "MMMM yyyy")
258 |     }
259 |   }, [currentDate, view])
260 | 
261 |   return (
262 |     <div
263 |       className="flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1"
264 |       style={
265 |         {
266 |           "--event-height": `${EventHeight}px`,
267 |           "--event-gap": `${EventGap}px`,
268 |           "--week-cells-height": `${WeekCellsHeight}px`,
269 |         } as React.CSSProperties
270 |       }
271 |     >
272 |       <CalendarDndProvider onEventUpdate={handleEventUpdate}>
273 |         <div
274 |           className={cn(
275 |             "flex items-center justify-between p-2 sm:p-4",
276 |             className
277 |           )}
278 |         >
279 |           <div className="flex items-center gap-1 sm:gap-4">
280 |             <Button
281 |               variant="outline"
282 |               className="max-[479px]:aspect-square max-[479px]:p-0!"
283 |               onClick={handleToday}
284 |             >
285 |               <RiCalendarCheckLine
286 |                 className="min-[480px]:hidden"
287 |                 size={16}
288 |                 aria-hidden="true"
289 |               />
290 |               <span className="max-[479px]:sr-only">Today</span>
291 |             </Button>
292 |             <div className="flex items-center sm:gap-2">
293 |               <Button
294 |                 variant="ghost"
295 |                 size="icon"
296 |                 onClick={handlePrevious}
297 |                 aria-label="Previous"
298 |               >
299 |                 <ChevronLeftIcon size={16} aria-hidden="true" />
300 |               </Button>
301 |               <Button
302 |                 variant="ghost"
303 |                 size="icon"
304 |                 onClick={handleNext}
305 |                 aria-label="Next"
306 |               >
307 |                 <ChevronRightIcon size={16} aria-hidden="true" />
308 |               </Button>
309 |             </div>
310 |             <h2 className="text-sm font-semibold sm:text-lg md:text-xl">
311 |               {viewTitle}
312 |             </h2>
313 |           </div>
314 |           <div className="flex items-center gap-2">
315 |             <DropdownMenu>
316 |               <DropdownMenuTrigger asChild>
317 |                 <Button variant="outline" className="gap-1.5 max-[479px]:h-8">
318 |                   <span>
319 |                     <span className="min-[480px]:hidden" aria-hidden="true">
320 |                       {view.charAt(0).toUpperCase()}
321 |                     </span>
322 |                     <span className="max-[479px]:sr-only">
323 |                       {view.charAt(0).toUpperCase() + view.slice(1)}
324 |                     </span>
325 |                   </span>
326 |                   <ChevronDownIcon
327 |                     className="-me-1 opacity-60"
328 |                     size={16}
329 |                     aria-hidden="true"
330 |                   />
331 |                 </Button>
332 |               </DropdownMenuTrigger>
333 |               <DropdownMenuContent align="end" className="min-w-32">
334 |                 <DropdownMenuItem onClick={() => setView("month")}>
335 |                   Month <DropdownMenuShortcut>M</DropdownMenuShortcut>
336 |                 </DropdownMenuItem>
337 |                 <DropdownMenuItem onClick={() => setView("week")}>
338 |                   Week <DropdownMenuShortcut>W</DropdownMenuShortcut>
339 |                 </DropdownMenuItem>
340 |                 <DropdownMenuItem onClick={() => setView("day")}>
341 |                   Day <DropdownMenuShortcut>D</DropdownMenuShortcut>
342 |                 </DropdownMenuItem>
343 |                 <DropdownMenuItem onClick={() => setView("agenda")}>
344 |                   Agenda <DropdownMenuShortcut>A</DropdownMenuShortcut>
345 |                 </DropdownMenuItem>
346 |               </DropdownMenuContent>
347 |             </DropdownMenu>
348 |             <Button
349 |               className="max-[479px]:aspect-square max-[479px]:p-0!"
350 |               onClick={() => {
351 |                 setSelectedEvent(null) // Ensure we're creating a new event
352 |                 setIsEventDialogOpen(true)
353 |               }}
354 |             >
355 |               <PlusIcon
356 |                 className="opacity-60 sm:-ms-1"
357 |                 size={16}
358 |                 aria-hidden="true"
359 |               />
360 |               <span className="max-sm:sr-only">New event</span>
361 |             </Button>
362 |           </div>
363 |         </div>
364 | 
365 |         <div className="flex flex-1 flex-col">
366 |           {view === "month" && (
367 |             <MonthView
368 |               currentDate={currentDate}
369 |               events={events}
370 |               onEventSelect={handleEventSelect}
371 |               onEventCreate={handleEventCreate}
372 |             />
373 |           )}
374 |           {view === "week" && (
375 |             <WeekView
376 |               currentDate={currentDate}
377 |               events={events}
378 |               onEventSelect={handleEventSelect}
379 |               onEventCreate={handleEventCreate}
380 |             />
381 |           )}
382 |           {view === "day" && (
383 |             <DayView
384 |               currentDate={currentDate}
385 |               events={events}
386 |               onEventSelect={handleEventSelect}
387 |               onEventCreate={handleEventCreate}
388 |             />
389 |           )}
390 |           {view === "agenda" && (
391 |             <AgendaView
392 |               currentDate={currentDate}
393 |               events={events}
394 |               onEventSelect={handleEventSelect}
395 |             />
396 |           )}
397 |         </div>
398 | 
399 |         <EventDialog
400 |           event={selectedEvent}
401 |           isOpen={isEventDialogOpen}
402 |           onClose={() => {
403 |             setIsEventDialogOpen(false)
404 |             setSelectedEvent(null)
405 |           }}
406 |           onSave={handleEventSave}
407 |           onDelete={handleEventDelete}
408 |         />
409 |       </CalendarDndProvider>
410 |     </div>
411 |   )
412 | }
413 | 


--------------------------------------------------------------------------------
/components/event-calendar/week-view.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { useMemo } from "react"
  4 | import {
  5 |   addHours,
  6 |   areIntervalsOverlapping,
  7 |   differenceInMinutes,
  8 |   eachDayOfInterval,
  9 |   eachHourOfInterval,
 10 |   endOfWeek,
 11 |   format,
 12 |   getHours,
 13 |   getMinutes,
 14 |   isBefore,
 15 |   isSameDay,
 16 |   isToday,
 17 |   startOfDay,
 18 |   startOfWeek,
 19 | } from "date-fns"
 20 | 
 21 | import { cn } from "@/lib/utils"
 22 | import {
 23 |   DraggableEvent,
 24 |   DroppableCell,
 25 |   EventItem,
 26 |   isMultiDayEvent,
 27 |   useCurrentTimeIndicator,
 28 |   WeekCellsHeight,
 29 |   type CalendarEvent,
 30 | } from "@/components/event-calendar"
 31 | import { EndHour, StartHour } from "@/components/event-calendar/constants"
 32 | 
 33 | interface WeekViewProps {
 34 |   currentDate: Date
 35 |   events: CalendarEvent[]
 36 |   onEventSelect: (event: CalendarEvent) => void
 37 |   onEventCreate: (startTime: Date) => void
 38 | }
 39 | 
 40 | interface PositionedEvent {
 41 |   event: CalendarEvent
 42 |   top: number
 43 |   height: number
 44 |   left: number
 45 |   width: number
 46 |   zIndex: number
 47 | }
 48 | 
 49 | export function WeekView({
 50 |   currentDate,
 51 |   events,
 52 |   onEventSelect,
 53 |   onEventCreate,
 54 | }: WeekViewProps) {
 55 |   const days = useMemo(() => {
 56 |     const weekStart = startOfWeek(currentDate, { weekStartsOn: 0 })
 57 |     const weekEnd = endOfWeek(currentDate, { weekStartsOn: 0 })
 58 |     return eachDayOfInterval({ start: weekStart, end: weekEnd })
 59 |   }, [currentDate])
 60 | 
 61 |   const weekStart = useMemo(
 62 |     () => startOfWeek(currentDate, { weekStartsOn: 0 }),
 63 |     [currentDate]
 64 |   )
 65 | 
 66 |   const hours = useMemo(() => {
 67 |     const dayStart = startOfDay(currentDate)
 68 |     return eachHourOfInterval({
 69 |       start: addHours(dayStart, StartHour),
 70 |       end: addHours(dayStart, EndHour - 1),
 71 |     })
 72 |   }, [currentDate])
 73 | 
 74 |   // Get all-day events and multi-day events for the week
 75 |   const allDayEvents = useMemo(() => {
 76 |     return events
 77 |       .filter((event) => {
 78 |         // Include explicitly marked all-day events or multi-day events
 79 |         return event.allDay || isMultiDayEvent(event)
 80 |       })
 81 |       .filter((event) => {
 82 |         const eventStart = new Date(event.start)
 83 |         const eventEnd = new Date(event.end)
 84 |         return days.some(
 85 |           (day) =>
 86 |             isSameDay(day, eventStart) ||
 87 |             isSameDay(day, eventEnd) ||
 88 |             (day > eventStart && day < eventEnd)
 89 |         )
 90 |       })
 91 |   }, [events, days])
 92 | 
 93 |   // Process events for each day to calculate positions
 94 |   const processedDayEvents = useMemo(() => {
 95 |     const result = days.map((day) => {
 96 |       // Get events for this day that are not all-day events or multi-day events
 97 |       const dayEvents = events.filter((event) => {
 98 |         // Skip all-day events and multi-day events
 99 |         if (event.allDay || isMultiDayEvent(event)) return false
100 | 
101 |         const eventStart = new Date(event.start)
102 |         const eventEnd = new Date(event.end)
103 | 
104 |         // Check if event is on this day
105 |         return (
106 |           isSameDay(day, eventStart) ||
107 |           isSameDay(day, eventEnd) ||
108 |           (eventStart < day && eventEnd > day)
109 |         )
110 |       })
111 | 
112 |       // Sort events by start time and duration
113 |       const sortedEvents = [...dayEvents].sort((a, b) => {
114 |         const aStart = new Date(a.start)
115 |         const bStart = new Date(b.start)
116 |         const aEnd = new Date(a.end)
117 |         const bEnd = new Date(b.end)
118 | 
119 |         // First sort by start time
120 |         if (aStart < bStart) return -1
121 |         if (aStart > bStart) return 1
122 | 
123 |         // If start times are equal, sort by duration (longer events first)
124 |         const aDuration = differenceInMinutes(aEnd, aStart)
125 |         const bDuration = differenceInMinutes(bEnd, bStart)
126 |         return bDuration - aDuration
127 |       })
128 | 
129 |       // Calculate positions for each event
130 |       const positionedEvents: PositionedEvent[] = []
131 |       const dayStart = startOfDay(day)
132 | 
133 |       // Track columns for overlapping events
134 |       const columns: { event: CalendarEvent; end: Date }[][] = []
135 | 
136 |       sortedEvents.forEach((event) => {
137 |         const eventStart = new Date(event.start)
138 |         const eventEnd = new Date(event.end)
139 | 
140 |         // Adjust start and end times if they're outside this day
141 |         const adjustedStart = isSameDay(day, eventStart) ? eventStart : dayStart
142 |         const adjustedEnd = isSameDay(day, eventEnd)
143 |           ? eventEnd
144 |           : addHours(dayStart, 24)
145 | 
146 |         // Calculate top position and height
147 |         const startHour =
148 |           getHours(adjustedStart) + getMinutes(adjustedStart) / 60
149 |         const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60
150 | 
151 |         // Adjust the top calculation to account for the new start time
152 |         const top = (startHour - StartHour) * WeekCellsHeight
153 |         const height = (endHour - startHour) * WeekCellsHeight
154 | 
155 |         // Find a column for this event
156 |         let columnIndex = 0
157 |         let placed = false
158 | 
159 |         while (!placed) {
160 |           const col = columns[columnIndex] || []
161 |           if (col.length === 0) {
162 |             columns[columnIndex] = col
163 |             placed = true
164 |           } else {
165 |             const overlaps = col.some((c) =>
166 |               areIntervalsOverlapping(
167 |                 { start: adjustedStart, end: adjustedEnd },
168 |                 {
169 |                   start: new Date(c.event.start),
170 |                   end: new Date(c.event.end),
171 |                 }
172 |               )
173 |             )
174 |             if (!overlaps) {
175 |               placed = true
176 |             } else {
177 |               columnIndex++
178 |             }
179 |           }
180 |         }
181 | 
182 |         // Ensure column is initialized before pushing
183 |         const currentColumn = columns[columnIndex] || []
184 |         columns[columnIndex] = currentColumn
185 |         currentColumn.push({ event, end: adjustedEnd })
186 | 
187 |         // Calculate width and left position based on number of columns
188 |         const width = columnIndex === 0 ? 1 : 1 - (columnIndex * 0.1)
189 |         const left = columnIndex === 0 ? 0 : columnIndex * 0.1
190 | 
191 |         positionedEvents.push({
192 |           event,
193 |           top,
194 |           height,
195 |           left,
196 |           width,
197 |           zIndex: 10 + columnIndex, // Higher columns get higher z-index
198 |         })
199 |       })
200 | 
201 |       return positionedEvents
202 |     })
203 | 
204 |     return result
205 |   }, [days, events])
206 | 
207 |   const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
208 |     e.stopPropagation()
209 |     onEventSelect(event)
210 |   }
211 | 
212 |   const showAllDaySection = allDayEvents.length > 0
213 |   const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(
214 |     currentDate,
215 |     "week"
216 |   )
217 | 
218 |   return (
219 |     <div data-slot="week-view" className="flex h-full flex-col">
220 |       <div className="bg-background/80 border-border/70 sticky top-0 z-30 grid grid-cols-8 border-b backdrop-blur-md">
221 |         <div className="text-muted-foreground/70 py-2 text-center text-sm">
222 |           <span className="max-[479px]:sr-only">{format(new Date(), "O")}</span>
223 |         </div>
224 |         {days.map((day) => (
225 |           <div
226 |             key={day.toString()}
227 |             className="data-today:text-foreground text-muted-foreground/70 py-2 text-center text-sm data-today:font-medium"
228 |             data-today={isToday(day) || undefined}
229 |           >
230 |             <span className="sm:hidden" aria-hidden="true">
231 |               {format(day, "E")[0]} {format(day, "d")}
232 |             </span>
233 |             <span className="max-sm:hidden">{format(day, "EEE dd")}</span>
234 |           </div>
235 |         ))}
236 |       </div>
237 | 
238 |       {showAllDaySection && (
239 |         <div className="border-border/70 bg-muted/50 border-b">
240 |           <div className="grid grid-cols-8">
241 |             <div className="border-border/70 relative border-r">
242 |               <span className="text-muted-foreground/70 absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] sm:pe-4 sm:text-xs">
243 |                 All day
244 |               </span>
245 |             </div>
246 |             {days.map((day, dayIndex) => {
247 |               const dayAllDayEvents = allDayEvents.filter((event) => {
248 |                 const eventStart = new Date(event.start)
249 |                 const eventEnd = new Date(event.end)
250 |                 return (
251 |                   isSameDay(day, eventStart) ||
252 |                   (day > eventStart && day < eventEnd) ||
253 |                   isSameDay(day, eventEnd)
254 |                 )
255 |               })
256 | 
257 |               return (
258 |                 <div
259 |                   key={day.toString()}
260 |                   className="border-border/70 relative border-r p-1 last:border-r-0"
261 |                   data-today={isToday(day) || undefined}
262 |                 >
263 |                   {dayAllDayEvents.map((event) => {
264 |                     const eventStart = new Date(event.start)
265 |                     const eventEnd = new Date(event.end)
266 |                     const isFirstDay = isSameDay(day, eventStart)
267 |                     const isLastDay = isSameDay(day, eventEnd)
268 | 
269 |                     // Check if this is the first day in the current week view
270 |                     const isFirstVisibleDay =
271 |                       dayIndex === 0 && isBefore(eventStart, weekStart)
272 |                     const shouldShowTitle = isFirstDay || isFirstVisibleDay
273 | 
274 |                     return (
275 |                       <EventItem
276 |                         key={`spanning-${event.id}`}
277 |                         onClick={(e) => handleEventClick(event, e)}
278 |                         event={event}
279 |                         view="month"
280 |                         isFirstDay={isFirstDay}
281 |                         isLastDay={isLastDay}
282 |                       >
283 |                         {/* Show title if it's the first day of the event or the first visible day in the week */}
284 |                         <div
285 |                           className={cn(
286 |                             "truncate",
287 |                             !shouldShowTitle && "invisible"
288 |                           )}
289 |                           aria-hidden={!shouldShowTitle}
290 |                         >
291 |                           {event.title}
292 |                         </div>
293 |                       </EventItem>
294 |                     )
295 |                   })}
296 |                 </div>
297 |               )
298 |             })}
299 |           </div>
300 |         </div>
301 |       )}
302 | 
303 |       <div className="grid flex-1 grid-cols-8 overflow-hidden">
304 |         <div className="border-border/70 grid auto-cols-fr border-r">
305 |           {hours.map((hour, index) => (
306 |             <div
307 |               key={hour.toString()}
308 |               className="border-border/70 relative min-h-[var(--week-cells-height)] border-b last:border-b-0"
309 |             >
310 |               {index > 0 && (
311 |                 <span className="bg-background text-muted-foreground/70 absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end pe-2 text-[10px] sm:pe-4 sm:text-xs">
312 |                   {format(hour, "h a")}
313 |                 </span>
314 |               )}
315 |             </div>
316 |           ))}
317 |         </div>
318 | 
319 |         {days.map((day, dayIndex) => (
320 |           <div
321 |             key={day.toString()}
322 |             className="border-border/70 relative grid auto-cols-fr border-r last:border-r-0"
323 |             data-today={isToday(day) || undefined}
324 |           >
325 |             {/* Positioned events */}
326 |             {(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => (
327 |               <div
328 |                 key={positionedEvent.event.id}
329 |                 className="absolute z-10 px-0.5"
330 |                 style={{
331 |                   top: `${positionedEvent.top}px`,
332 |                   height: `${positionedEvent.height}px`,
333 |                   left: `${positionedEvent.left * 100}%`,
334 |                   width: `${positionedEvent.width * 100}%`,
335 |                   zIndex: positionedEvent.zIndex,
336 |                 }}
337 |                 onClick={(e) => e.stopPropagation()}
338 |               >
339 |                 <div className="h-full w-full">
340 |                   <DraggableEvent
341 |                     event={positionedEvent.event}
342 |                     view="week"
343 |                     onClick={(e) => handleEventClick(positionedEvent.event, e)}
344 |                     showTime
345 |                     height={positionedEvent.height}
346 |                   />
347 |                 </div>
348 |               </div>
349 |             ))}
350 | 
351 |             {/* Current time indicator - only show for today's column */}
352 |             {currentTimeVisible && isToday(day) && (
353 |               <div
354 |                 className="pointer-events-none absolute right-0 left-0 z-20"
355 |                 style={{ top: `${currentTimePosition}%` }}
356 |               >
357 |                 <div className="relative flex items-center">
358 |                   <div className="bg-primary absolute -left-1 h-2 w-2 rounded-full"></div>
359 |                   <div className="bg-primary h-[2px] w-full"></div>
360 |                 </div>
361 |               </div>
362 |             )}
363 |             {hours.map((hour) => {
364 |               const hourValue = getHours(hour)
365 |               return (
366 |                 <div
367 |                   key={hour.toString()}
368 |                   className="border-border/70 relative min-h-[var(--week-cells-height)] border-b last:border-b-0"
369 |                 >
370 |                   {/* Quarter-hour intervals */}
371 |                   {[0, 1, 2, 3].map((quarter) => {
372 |                     const quarterHourTime = hourValue + quarter * 0.25
373 |                     return (
374 |                       <DroppableCell
375 |                         key={`${hour.toString()}-${quarter}`}
376 |                         id={`week-cell-${day.toISOString()}-${quarterHourTime}`}
377 |                         date={day}
378 |                         time={quarterHourTime}
379 |                         className={cn(
380 |                           "absolute h-[calc(var(--week-cells-height)/4)] w-full",
381 |                           quarter === 0 && "top-0",
382 |                           quarter === 1 &&
383 |                             "top-[calc(var(--week-cells-height)/4)]",
384 |                           quarter === 2 &&
385 |                             "top-[calc(var(--week-cells-height)/4*2)]",
386 |                           quarter === 3 &&
387 |                             "top-[calc(var(--week-cells-height)/4*3)]"
388 |                         )}
389 |                         onClick={() => {
390 |                           const startTime = new Date(day)
391 |                           startTime.setHours(hourValue)
392 |                           startTime.setMinutes(quarter * 15)
393 |                           onEventCreate(startTime)
394 |                         }}
395 |                       />
396 |                     )
397 |                   })}
398 |                 </div>
399 |               )
400 |             })}
401 |           </div>
402 |         ))}
403 |       </div>
404 |     </div>
405 |   )
406 | }
407 | 


--------------------------------------------------------------------------------
/components/event-calendar/event-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useEffect, useMemo, useState } from "react"
  4 | import { RiCalendarLine, RiDeleteBinLine } from "@remixicon/react"
  5 | import { format, isBefore } from "date-fns"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | import { Button } from "@/components/ui/button"
  9 | import { Calendar } from "@/components/ui/calendar"
 10 | import { Checkbox } from "@/components/ui/checkbox"
 11 | import {
 12 |   Dialog,
 13 |   DialogContent,
 14 |   DialogDescription,
 15 |   DialogFooter,
 16 |   DialogHeader,
 17 |   DialogTitle,
 18 | } from "@/components/ui/dialog"
 19 | import { Input } from "@/components/ui/input"
 20 | import { Label } from "@/components/ui/label"
 21 | import {
 22 |   Popover,
 23 |   PopoverContent,
 24 |   PopoverTrigger,
 25 | } from "@/components/ui/popover"
 26 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 27 | import {
 28 |   Select,
 29 |   SelectContent,
 30 |   SelectItem,
 31 |   SelectTrigger,
 32 |   SelectValue,
 33 | } from "@/components/ui/select"
 34 | import { Textarea } from "@/components/ui/textarea"
 35 | import type { CalendarEvent, EventColor } from "@/components/event-calendar"
 36 | import {
 37 |   DefaultEndHour,
 38 |   DefaultStartHour,
 39 |   EndHour,
 40 |   StartHour,
 41 | } from "@/components/event-calendar/constants"
 42 | 
 43 | interface EventDialogProps {
 44 |   event: CalendarEvent | null
 45 |   isOpen: boolean
 46 |   onClose: () => void
 47 |   onSave: (event: CalendarEvent) => void
 48 |   onDelete: (eventId: string) => void
 49 | }
 50 | 
 51 | export function EventDialog({
 52 |   event,
 53 |   isOpen,
 54 |   onClose,
 55 |   onSave,
 56 |   onDelete,
 57 | }: EventDialogProps) {
 58 |   const [title, setTitle] = useState("")
 59 |   const [description, setDescription] = useState("")
 60 |   const [startDate, setStartDate] = useState<Date>(new Date())
 61 |   const [endDate, setEndDate] = useState<Date>(new Date())
 62 |   const [startTime, setStartTime] = useState(`${DefaultStartHour}:00`)
 63 |   const [endTime, setEndTime] = useState(`${DefaultEndHour}:00`)
 64 |   const [allDay, setAllDay] = useState(false)
 65 |   const [location, setLocation] = useState("")
 66 |   const [color, setColor] = useState<EventColor>("sky")
 67 |   const [error, setError] = useState<string | null>(null)
 68 |   const [startDateOpen, setStartDateOpen] = useState(false)
 69 |   const [endDateOpen, setEndDateOpen] = useState(false)
 70 | 
 71 |   // Debug log to check what event is being passed
 72 |   useEffect(() => {
 73 |     console.log("EventDialog received event:", event)
 74 |   }, [event])
 75 | 
 76 |   useEffect(() => {
 77 |     if (event) {
 78 |       setTitle(event.title || "")
 79 |       setDescription(event.description || "")
 80 | 
 81 |       const start = new Date(event.start)
 82 |       const end = new Date(event.end)
 83 | 
 84 |       setStartDate(start)
 85 |       setEndDate(end)
 86 |       setStartTime(formatTimeForInput(start))
 87 |       setEndTime(formatTimeForInput(end))
 88 |       setAllDay(event.allDay || false)
 89 |       setLocation(event.location || "")
 90 |       setColor((event.color as EventColor) || "sky")
 91 |       setError(null) // Reset error when opening dialog
 92 |     } else {
 93 |       resetForm()
 94 |     }
 95 |   }, [event])
 96 | 
 97 |   const resetForm = () => {
 98 |     setTitle("")
 99 |     setDescription("")
100 |     setStartDate(new Date())
101 |     setEndDate(new Date())
102 |     setStartTime(`${DefaultStartHour}:00`)
103 |     setEndTime(`${DefaultEndHour}:00`)
104 |     setAllDay(false)
105 |     setLocation("")
106 |     setColor("sky")
107 |     setError(null)
108 |   }
109 | 
110 |   const formatTimeForInput = (date: Date) => {
111 |     const hours = date.getHours().toString().padStart(2, "0")
112 |     const minutes = Math.floor(date.getMinutes() / 15) * 15
113 |     return `${hours}:${minutes.toString().padStart(2, "0")}`
114 |   }
115 | 
116 |   // Memoize time options so they're only calculated once
117 |   const timeOptions = useMemo(() => {
118 |     const options = []
119 |     for (let hour = StartHour; hour <= EndHour; hour++) {
120 |       for (let minute = 0; minute < 60; minute += 15) {
121 |         const formattedHour = hour.toString().padStart(2, "0")
122 |         const formattedMinute = minute.toString().padStart(2, "0")
123 |         const value = `${formattedHour}:${formattedMinute}`
124 |         // Use a fixed date to avoid unnecessary date object creations
125 |         const date = new Date(2000, 0, 1, hour, minute)
126 |         const label = format(date, "h:mm a")
127 |         options.push({ value, label })
128 |       }
129 |     }
130 |     return options
131 |   }, []) // Empty dependency array ensures this only runs once
132 | 
133 |   const handleSave = () => {
134 |     const start = new Date(startDate)
135 |     const end = new Date(endDate)
136 | 
137 |     if (!allDay) {
138 |       const [startHours = 0, startMinutes = 0] = startTime
139 |         .split(":")
140 |         .map(Number)
141 |       const [endHours = 0, endMinutes = 0] = endTime.split(":").map(Number)
142 | 
143 |       if (
144 |         startHours < StartHour ||
145 |         startHours > EndHour ||
146 |         endHours < StartHour ||
147 |         endHours > EndHour
148 |       ) {
149 |         setError(
150 |           `Selected time must be between ${StartHour}:00 and ${EndHour}:00`
151 |         )
152 |         return
153 |       }
154 | 
155 |       start.setHours(startHours, startMinutes, 0)
156 |       end.setHours(endHours, endMinutes, 0)
157 |     } else {
158 |       start.setHours(0, 0, 0, 0)
159 |       end.setHours(23, 59, 59, 999)
160 |     }
161 | 
162 |     // Validate that end date is not before start date
163 |     if (isBefore(end, start)) {
164 |       setError("End date cannot be before start date")
165 |       return
166 |     }
167 | 
168 |     // Use generic title if empty
169 |     const eventTitle = title.trim() ? title : "(no title)"
170 | 
171 |     onSave({
172 |       id: event?.id || "",
173 |       title: eventTitle,
174 |       description,
175 |       start,
176 |       end,
177 |       allDay,
178 |       location,
179 |       color,
180 |     })
181 |   }
182 | 
183 |   const handleDelete = () => {
184 |     if (event?.id) {
185 |       onDelete(event.id)
186 |     }
187 |   }
188 | 
189 |   // Updated color options to match types.ts
190 |   const colorOptions: Array<{
191 |     value: EventColor
192 |     label: string
193 |     bgClass: string
194 |     borderClass: string
195 |   }> = [
196 |     {
197 |       value: "sky",
198 |       label: "Sky",
199 |       bgClass: "bg-sky-400 data-[state=checked]:bg-sky-400",
200 |       borderClass: "border-sky-400 data-[state=checked]:border-sky-400",
201 |     },
202 |     {
203 |       value: "amber",
204 |       label: "Amber",
205 |       bgClass: "bg-amber-400 data-[state=checked]:bg-amber-400",
206 |       borderClass: "border-amber-400 data-[state=checked]:border-amber-400",
207 |     },
208 |     {
209 |       value: "violet",
210 |       label: "Violet",
211 |       bgClass: "bg-violet-400 data-[state=checked]:bg-violet-400",
212 |       borderClass: "border-violet-400 data-[state=checked]:border-violet-400",
213 |     },
214 |     {
215 |       value: "rose",
216 |       label: "Rose",
217 |       bgClass: "bg-rose-400 data-[state=checked]:bg-rose-400",
218 |       borderClass: "border-rose-400 data-[state=checked]:border-rose-400",
219 |     },
220 |     {
221 |       value: "emerald",
222 |       label: "Emerald",
223 |       bgClass: "bg-emerald-400 data-[state=checked]:bg-emerald-400",
224 |       borderClass: "border-emerald-400 data-[state=checked]:border-emerald-400",
225 |     },
226 |     {
227 |       value: "orange",
228 |       label: "Orange",
229 |       bgClass: "bg-orange-400 data-[state=checked]:bg-orange-400",
230 |       borderClass: "border-orange-400 data-[state=checked]:border-orange-400",
231 |     },
232 |   ]
233 | 
234 |   return (
235 |     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
236 |       <DialogContent className="sm:max-w-[425px]">
237 |         <DialogHeader>
238 |           <DialogTitle>{event?.id ? "Edit Event" : "Create Event"}</DialogTitle>
239 |           <DialogDescription className="sr-only">
240 |             {event?.id
241 |               ? "Edit the details of this event"
242 |               : "Add a new event to your calendar"}
243 |           </DialogDescription>
244 |         </DialogHeader>
245 |         {error && (
246 |           <div className="bg-destructive/15 text-destructive rounded-md px-3 py-2 text-sm">
247 |             {error}
248 |           </div>
249 |         )}
250 |         <div className="grid gap-4 py-4">
251 |           <div className="*:not-first:mt-1.5">
252 |             <Label htmlFor="title">Title</Label>
253 |             <Input
254 |               id="title"
255 |               value={title}
256 |               onChange={(e) => setTitle(e.target.value)}
257 |             />
258 |           </div>
259 | 
260 |           <div className="*:not-first:mt-1.5">
261 |             <Label htmlFor="description">Description</Label>
262 |             <Textarea
263 |               id="description"
264 |               value={description}
265 |               onChange={(e) => setDescription(e.target.value)}
266 |               rows={3}
267 |             />
268 |           </div>
269 | 
270 |           <div className="flex gap-4">
271 |             <div className="flex-1 *:not-first:mt-1.5">
272 |               <Label htmlFor="start-date">Start Date</Label>
273 |               <Popover open={startDateOpen} onOpenChange={setStartDateOpen}>
274 |                 <PopoverTrigger asChild>
275 |                   <Button
276 |                     id="start-date"
277 |                     variant={"outline"}
278 |                     className={cn(
279 |                       "group bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]",
280 |                       !startDate && "text-muted-foreground"
281 |                     )}
282 |                   >
283 |                     <span
284 |                       className={cn(
285 |                         "truncate",
286 |                         !startDate && "text-muted-foreground"
287 |                       )}
288 |                     >
289 |                       {startDate ? format(startDate, "PPP") : "Pick a date"}
290 |                     </span>
291 |                     <RiCalendarLine
292 |                       size={16}
293 |                       className="text-muted-foreground/80 shrink-0"
294 |                       aria-hidden="true"
295 |                     />
296 |                   </Button>
297 |                 </PopoverTrigger>
298 |                 <PopoverContent className="w-auto p-2" align="start">
299 |                   <Calendar
300 |                     mode="single"
301 |                     selected={startDate}
302 |                     defaultMonth={startDate}
303 |                     onSelect={(date) => {
304 |                       if (date) {
305 |                         setStartDate(date)
306 |                         // If end date is before the new start date, update it to match the start date
307 |                         if (isBefore(endDate, date)) {
308 |                           setEndDate(date)
309 |                         }
310 |                         setError(null)
311 |                         setStartDateOpen(false)
312 |                       }
313 |                     }}
314 |                   />
315 |                 </PopoverContent>
316 |               </Popover>
317 |             </div>
318 | 
319 |             {!allDay && (
320 |               <div className="min-w-28 *:not-first:mt-1.5">
321 |                 <Label htmlFor="start-time">Start Time</Label>
322 |                 <Select value={startTime} onValueChange={setStartTime}>
323 |                   <SelectTrigger id="start-time">
324 |                     <SelectValue placeholder="Select time" />
325 |                   </SelectTrigger>
326 |                   <SelectContent>
327 |                     {timeOptions.map((option) => (
328 |                       <SelectItem key={option.value} value={option.value}>
329 |                         {option.label}
330 |                       </SelectItem>
331 |                     ))}
332 |                   </SelectContent>
333 |                 </Select>
334 |               </div>
335 |             )}
336 |           </div>
337 | 
338 |           <div className="flex gap-4">
339 |             <div className="flex-1 *:not-first:mt-1.5">
340 |               <Label htmlFor="end-date">End Date</Label>
341 |               <Popover open={endDateOpen} onOpenChange={setEndDateOpen}>
342 |                 <PopoverTrigger asChild>
343 |                   <Button
344 |                     id="end-date"
345 |                     variant={"outline"}
346 |                     className={cn(
347 |                       "group bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]",
348 |                       !endDate && "text-muted-foreground"
349 |                     )}
350 |                   >
351 |                     <span
352 |                       className={cn(
353 |                         "truncate",
354 |                         !endDate && "text-muted-foreground"
355 |                       )}
356 |                     >
357 |                       {endDate ? format(endDate, "PPP") : "Pick a date"}
358 |                     </span>
359 |                     <RiCalendarLine
360 |                       size={16}
361 |                       className="text-muted-foreground/80 shrink-0"
362 |                       aria-hidden="true"
363 |                     />
364 |                   </Button>
365 |                 </PopoverTrigger>
366 |                 <PopoverContent className="w-auto p-2" align="start">
367 |                   <Calendar
368 |                     mode="single"
369 |                     selected={endDate}
370 |                     defaultMonth={endDate}
371 |                     disabled={{ before: startDate }}
372 |                     onSelect={(date) => {
373 |                       if (date) {
374 |                         setEndDate(date)
375 |                         setError(null)
376 |                         setEndDateOpen(false)
377 |                       }
378 |                     }}
379 |                   />
380 |                 </PopoverContent>
381 |               </Popover>
382 |             </div>
383 | 
384 |             {!allDay && (
385 |               <div className="min-w-28 *:not-first:mt-1.5">
386 |                 <Label htmlFor="end-time">End Time</Label>
387 |                 <Select value={endTime} onValueChange={setEndTime}>
388 |                   <SelectTrigger id="end-time">
389 |                     <SelectValue placeholder="Select time" />
390 |                   </SelectTrigger>
391 |                   <SelectContent>
392 |                     {timeOptions.map((option) => (
393 |                       <SelectItem key={option.value} value={option.value}>
394 |                         {option.label}
395 |                       </SelectItem>
396 |                     ))}
397 |                   </SelectContent>
398 |                 </Select>
399 |               </div>
400 |             )}
401 |           </div>
402 | 
403 |           <div className="flex items-center gap-2">
404 |             <Checkbox
405 |               id="all-day"
406 |               checked={allDay}
407 |               onCheckedChange={(checked) => setAllDay(checked === true)}
408 |             />
409 |             <Label htmlFor="all-day">All day</Label>
410 |           </div>
411 | 
412 |           <div className="*:not-first:mt-1.5">
413 |             <Label htmlFor="location">Location</Label>
414 |             <Input
415 |               id="location"
416 |               value={location}
417 |               onChange={(e) => setLocation(e.target.value)}
418 |             />
419 |           </div>
420 |           <fieldset className="space-y-4">
421 |             <legend className="text-foreground text-sm leading-none font-medium">
422 |               Etiquette
423 |             </legend>
424 |             <RadioGroup
425 |               className="flex gap-1.5"
426 |               defaultValue={colorOptions[0]?.value}
427 |               value={color}
428 |               onValueChange={(value: EventColor) => setColor(value)}
429 |             >
430 |               {colorOptions.map((colorOption) => (
431 |                 <RadioGroupItem
432 |                   key={colorOption.value}
433 |                   id={`color-${colorOption.value}`}
434 |                   value={colorOption.value}
435 |                   aria-label={colorOption.label}
436 |                   className={cn(
437 |                     "size-6 shadow-none",
438 |                     colorOption.bgClass,
439 |                     colorOption.borderClass
440 |                   )}
441 |                 />
442 |               ))}
443 |             </RadioGroup>
444 |           </fieldset>
445 |         </div>
446 |         <DialogFooter className="flex-row sm:justify-between">
447 |           {event?.id && (
448 |             <Button
449 |               variant="outline"
450 |               size="icon"
451 |               onClick={handleDelete}
452 |               aria-label="Delete event"
453 |             >
454 |               <RiDeleteBinLine size={16} aria-hidden="true" />
455 |             </Button>
456 |           )}
457 |           <div className="flex flex-1 justify-end gap-2">
458 |             <Button variant="outline" onClick={onClose}>
459 |               Cancel
460 |             </Button>
461 |             <Button onClick={handleSave}>Save</Button>
462 |           </div>
463 |         </DialogFooter>
464 |       </DialogContent>
465 |     </Dialog>
466 |   )
467 | }
468 | 


--------------------------------------------------------------------------------