@moontra/moonui-pro 2.16.0 → 2.17.0

package/src/components/calendar-pro/index.tsx

@@ -0,0 +1,1556 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import {
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  Search,
+  Filter,
+  MoreHorizontal,
+  Download,
+  Upload,
+  Settings,
+  X,
+  Clock,
+  MapPin,
+  Users,
+  Link,
+  Tag,
+  AlertCircle,
+  Check,
+  Edit,
+  Trash,
+  Copy,
+  Share2,
+  ExternalLink,
+  Repeat,
+  Bell,
+  Video,
+  Phone,
+  Mail,
+  FileText,
+  FileSpreadsheet,
+  FileCode,
+  User,
+  Briefcase,
+  Home,
+  Activity,
+  Cake,
+  Heart,
+  Star,
+  Flag,
+  Bookmark,
+  Archive,
+  Send,
+  Globe,
+  Zap,
+  Cpu,
+  Cloud,
+  Sun,
+  Moon,
+  Coffee,
+  Gift,
+  Plane,
+  Car,
+  Printer,
+  Music,
+  Camera,
+  Book,
+  Gamepad2,
+  Tv,
+  Bike,
+  Train,
+  Ship,
+  Rocket,
+  Mountain,
+  Trees,
+  CloudRain,
+  CloudSnow,
+  Sunrise,
+  Sunset,
+  Wind,
+  Droplets,
+  Thermometer,
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  CircleCheck,
+  CircleX,
+  CircleAlert,
+  Info,
+  HelpCircle,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FolderOpen,
+  Database,
+  Server,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Watch,
+  Headphones,
+  Speaker,
+  Mic,
+  MicOff,
+  Volume2,
+  VolumeX,
+  Wifi,
+  WifiOff,
+  Bluetooth,
+  Battery,
+  BatteryLow,
+  Power,
+  Plug,
+  Lightbulb,
+  Flashlight,
+  Sparkles,
+  Stars,
+  Crown,
+  Trophy,
+  Medal,
+  Award,
+  Stamp,
+  Ticket,
+  Receipt,
+  CreditCard,
+  Wallet,
+  DollarSign,
+  Euro,
+  IndianRupee,
+  Bitcoin,
+  Coins,
+  PiggyBank,
+  Calculator,
+  BarChart,
+  LineChart,
+  PieChart,
+  TrendingUp,
+  TrendingDown,
+  Target,
+  Crosshair,
+  Compass,
+  Map,
+  Navigation,
+  Milestone,
+  Signpost,
+  Construction,
+  Hammer,
+  Wrench,
+  Paintbrush,
+  Palette as PaletteIcon,
+  Layers,
+  Layout,
+  Grid,
+  Columns,
+  Rows,
+  PanelLeft,
+  PanelRight,
+  PanelTop,
+  PanelBottom,
+  Sidebar,
+  Terminal,
+  Code,
+  CodeSquare,
+  Binary,
+  Braces,
+  Brackets,
+  Hash,
+  Bug,
+  GitBranch,
+  GitCommit,
+  GitMerge,
+  GitPullRequest,
+  Github,
+  Gitlab,
+  Package,
+  Box,
+  Archive as ArchiveIcon,
+  SendHorizontal,
+  Reply,
+  Forward,
+  Undo,
+  Redo,
+  RotateCw,
+  RotateCcw,
+  Shuffle,
+  Play,
+  Pause,
+  Square,
+  Circle,
+  Triangle,
+  Hexagon,
+  Diamond,
+  Gem,
+  Shapes,
+  Brush,
+  Eraser,
+  Pen,
+  PenTool,
+  Pencil,
+  Highlighter,
+  Type,
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  Indent,
+  Outdent,
+  ListOrdered,
+  ListTree,
+  ListChecks,
+  ListX,
+  CheckSquare,
+  Square as SquareIcon,
+  CircleDot,
+  CircleDashed,
+  CircleEllipsis,
+  CirclePlus,
+  CircleMinus,
+  CircleEqual,
+  CircleSlash,
+  CircleSlash2,
+  CircleOff,
+  CircleUser,
+  CircleUserRound,
+  CircleFadingPlus,
+  UserPlus,
+  UserMinus,
+  UserCheck,
+  UserX,
+  UsersRound,
+  Building,
+  Building2,
+  Warehouse,
+  Factory,
+  Store,
+  ShoppingBag,
+  Package2,
+  Truck,
+  Ship as ShipIcon,
+  Anchor,
+  Waves,
+  Fish,
+  Shell,
+  Bug as BugIcon,
+  Bird,
+  GraduationCap,
+  ClipboardList,
+  ShoppingCart
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Textarea } from '../ui/textarea'
+import { Switch } from '../ui/switch'
+import { Checkbox } from '../ui/checkbox'
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
+import { Separator } from '../ui/separator'
+import { ScrollArea } from '../ui/scroll-area'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '../ui/dropdown-menu'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
+import { motion, AnimatePresence, LayoutGroup, useMotionValue, useTransform, animate } from 'framer-motion'
+import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addWeeks, addMonths, addYears, subMonths, subYears, isSameMonth, isSameDay, isToday, isBefore, isAfter, differenceInDays, differenceInWeeks, differenceInMonths, parseISO, startOfDay, endOfDay, isWithinInterval, eachDayOfInterval, getDay, setHours, setMinutes, startOfYear, endOfYear, eachMonthOfInterval, getDaysInMonth, getWeek, startOfISOWeek, endOfISOWeek, addHours, subHours, isSameHour, differenceInHours, differenceInMinutes, addMinutes, subMinutes, isSameMinute, setSeconds, setMilliseconds, subDays, subWeeks } from 'date-fns'
+import { DragDropContext, Droppable, Draggable, DropResult, DraggableProvided, DraggableStateSnapshot, DroppableProvided } from 'react-beautiful-dnd'
+import { Calendar as CalendarBase } from '../ui/calendar'
+import { HexColorPicker } from 'react-colorful'
+
+// Types
+export interface CalendarEvent {
+  id: string
+  title: string
+  description?: string
+  start: Date
+  end: Date
+  allDay?: boolean
+  color?: string
+  category?: string
+  location?: string
+  attendees?: Array<{
+    id: string
+    name: string
+    email: string
+    avatar?: string
+    status?: 'accepted' | 'declined' | 'tentative' | 'pending'
+  }>
+  reminders?: Array<{
+    type: 'email' | 'notification' | 'sms'
+    before: number // minutes before event
+  }>
+  recurring?: {
+    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom'
+    interval: number
+    endDate?: Date
+    endAfter?: number // number of occurrences
+    daysOfWeek?: number[] // 0-6 for weekly pattern
+    dayOfMonth?: number // for monthly pattern
+    monthOfYear?: number // for yearly pattern
+    exceptions?: Date[] // dates to skip
+  }
+  status?: 'confirmed' | 'tentative' | 'cancelled'
+  visibility?: 'public' | 'private' | 'confidential'
+  priority?: 'low' | 'medium' | 'high'
+  tags?: string[]
+  attachments?: Array<{
+    id: string
+    name: string
+    url: string
+    type: string
+    size: number
+  }>
+  meetingUrl?: string
+  phoneNumber?: string
+  reminder?: boolean
+  reminderTime?: number
+  notes?: string
+  createdAt?: Date
+  updatedAt?: Date
+  createdBy?: string
+  updatedBy?: string
+}
+
+export interface CalendarCategory {
+  id: string
+  name: string
+  color: string
+  icon?: React.ReactNode
+}
+
+export interface CalendarView {
+  id: string
+  name: string
+  type: 'day' | 'week' | 'month' | 'year' | 'agenda' | 'custom'
+  default?: boolean
+  config?: any
+}
+
+export interface CalendarProProps {
+  events?: CalendarEvent[]
+  categories?: CalendarCategory[]
+  views?: CalendarView[]
+  defaultView?: string
+  height?: string | number
+  className?: string
+  sidebarCollapsed?: boolean
+  onSidebarToggle?: (collapsed: boolean) => void
+  onEventClick?: (event: CalendarEvent, e: React.MouseEvent) => void
+  onEventCreate?: (event: Partial<CalendarEvent>) => void
+  onEventUpdate?: (event: CalendarEvent) => void
+  onEventDelete?: (eventId: string) => void
+  onEventDrop?: (eventId: string, start: Date, end: Date) => void
+  onDateSelect?: (date: Date) => void
+  onViewChange?: (viewId: string) => void
+  allowEventCreation?: boolean
+  allowEventDeletion?: boolean
+  allowEventDragging?: boolean
+  showWeekNumbers?: boolean
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  timeFormat?: '12h' | '24h'
+  locale?: string
+  workingHours?: { start: number; end: number }
+  nonWorkingDays?: number[]
+  holidays?: Array<{ date: Date; name: string }>
+  customEventRenderer?: (event: CalendarEvent, view: string) => React.ReactNode
+  customHeaderRenderer?: (date: Date, view: string) => React.ReactNode
+  customCellRenderer?: (date: Date, events: CalendarEvent[], view: string) => React.ReactNode
+  eventColors?: Record<string, string>
+  onExport?: (format: 'ics' | 'csv' | 'json', events: CalendarEvent[]) => void
+  onImport?: (file: File) => void
+  integrations?: {
+    google?: boolean
+    outlook?: boolean
+    apple?: boolean
+  }
+  theme?: 'light' | 'dark' | 'system'
+}
+
+// Default categories
+const defaultCategories: CalendarCategory[] = [
+  { id: 'personal', name: 'Personal', color: '#3b82f6', icon: <User className="h-4 w-4" /> },
+  { id: 'work', name: 'Work', color: '#10b981', icon: <Briefcase className="h-4 w-4" /> },
+  { id: 'meeting', name: 'Meeting', color: '#f59e0b', icon: <Users className="h-4 w-4" /> },
+  { id: 'task', name: 'Task', color: '#8b5cf6', icon: <ClipboardList className="h-4 w-4" /> },
+  { id: 'reminder', name: 'Reminder', color: '#ef4444', icon: <Bell className="h-4 w-4" /> },
+  { id: 'holiday', name: 'Holiday', color: '#ec4899', icon: <CalendarIcon className="h-4 w-4" /> },
+  { id: 'birthday', name: 'Birthday', color: '#f472b6', icon: <Cake className="h-4 w-4" /> },
+  { id: 'other', name: 'Other', color: '#6b7280', icon: <Tag className="h-4 w-4" /> }
+]
+
+// Default views
+const defaultViews: CalendarView[] = [
+  { id: 'day', name: 'Day', type: 'day' },
+  { id: 'week', name: 'Week', type: 'week', default: true },
+  { id: 'month', name: 'Month', type: 'month' },
+  { id: 'year', name: 'Year', type: 'year' },
+  { id: 'agenda', name: 'Agenda', type: 'agenda' }
+]
+
+export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
+  events = [],
+  categories = defaultCategories,
+  views = defaultViews,
+  defaultView,
+  height = '100%',
+  className,
+  sidebarCollapsed: controlledSidebarCollapsed,
+  onSidebarToggle,
+  onEventClick,
+  onEventCreate,
+  onEventUpdate,
+  onEventDelete,
+  onEventDrop,
+  onDateSelect,
+  onViewChange,
+  allowEventCreation = true,
+  allowEventDeletion = true,
+  allowEventDragging = true,
+  showWeekNumbers = true,
+  firstDayOfWeek = 1,
+  timeFormat = '24h',
+  locale = 'en-US',
+  workingHours = { start: 9, end: 17 },
+  nonWorkingDays = [0, 6],
+  holidays = [],
+  customEventRenderer,
+  customHeaderRenderer,
+  customCellRenderer,
+  eventColors = {},
+  onExport,
+  onImport,
+  integrations = {},
+  theme = 'system',
+  ...props
+}, ref) => {
+  const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false)
+  const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed
+  
+  const setSidebarCollapsed = useCallback((collapsed: boolean) => {
+    setInternalSidebarCollapsed(collapsed)
+    onSidebarToggle?.(collapsed)
+  }, [onSidebarToggle])
+  
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [currentView, setCurrentView] = useState(() => {
+    if (defaultView) {
+      return defaultView
+    }
+    const defaultViewObj = views.find(v => v.default)
+    return defaultViewObj ? defaultViewObj.id : views[0].id
+  })
+  
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
+  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
+  const [newEventStart, setNewEventStart] = useState<Date | null>(null)
+  const [newEventEnd, setNewEventEnd] = useState<Date | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+  const [editingEvent, setEditingEvent] = useState<Partial<CalendarEvent>>({})
+  const [isDragging, setIsDragging] = useState(false)
+  const [draggedEvent, setDraggedEvent] = useState<CalendarEvent | null>(null)
+  const [dropTarget, setDropTarget] = useState<{ date: Date; time?: string } | null>(null)
+  
+  const calendarRef = useRef<HTMLDivElement>(null)
+  
+  // Get current view config
+  const currentViewConfig = useMemo(() => {
+    return views.find(v => v.id === currentView) || views[0]
+  }, [currentView, views])
+  
+  // Filter events based on search and categories
+  const filteredEvents = useMemo(() => {
+    return events.filter(event => {
+      const matchesSearch = !searchQuery || 
+        event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        event.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        event.location?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        event.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+      
+      const matchesCategory = selectedCategories.length === 0 || 
+        (event.category && selectedCategories.includes(event.category))
+      
+      return matchesSearch && matchesCategory
+    })
+  }, [events, searchQuery, selectedCategories])
+  
+  // Get events for current view
+  const eventsInView = useMemo(() => {
+    const viewType = currentViewConfig.type
+    let start: Date
+    let end: Date
+    
+    switch (viewType) {
+      case 'day':
+        start = startOfDay(currentDate)
+        end = endOfDay(currentDate)
+        break
+      case 'week':
+        start = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
+        end = endOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
+        break
+      case 'month':
+        start = startOfMonth(currentDate)
+        end = endOfMonth(currentDate)
+        break
+      case 'year':
+        start = startOfYear(currentDate)
+        end = endOfYear(currentDate)
+        break
+      case 'agenda':
+        start = startOfDay(currentDate)
+        end = addDays(currentDate, 30)
+        break
+      default:
+        start = startOfDay(currentDate)
+        end = endOfDay(currentDate)
+    }
+    
+    return filteredEvents.filter(event => {
+      const eventStart = new Date(event.start)
+      const eventEnd = new Date(event.end)
+      return isWithinInterval(eventStart, { start, end }) ||
+             isWithinInterval(eventEnd, { start, end }) ||
+             (isBefore(eventStart, start) && isAfter(eventEnd, end))
+    })
+  }, [filteredEvents, currentDate, currentViewConfig, firstDayOfWeek])
+  
+  // Handle view change
+  const handleViewChange = useCallback((viewId: string) => {
+    setCurrentView(viewId)
+    onViewChange?.(viewId)
+  }, [onViewChange])
+  
+  // Handle date navigation
+  const navigateDate = useCallback((direction: 'prev' | 'next') => {
+    const viewType = currentViewConfig.type
+    let newDate: Date
+    
+    switch (viewType) {
+      case 'day':
+        newDate = direction === 'prev' ? subDays(currentDate, 1) : addDays(currentDate, 1)
+        break
+      case 'week':
+        newDate = direction === 'prev' ? subWeeks(currentDate, 1) : addWeeks(currentDate, 1)
+        break
+      case 'month':
+        newDate = direction === 'prev' ? subMonths(currentDate, 1) : addMonths(currentDate, 1)
+        break
+      case 'year':
+        newDate = direction === 'prev' ? subYears(currentDate, 1) : addYears(currentDate, 1)
+        break
+      default:
+        newDate = currentDate
+    }
+    
+    setCurrentDate(newDate)
+  }, [currentDate, currentViewConfig])
+  
+  // Handle date selection
+  const handleDateSelect = useCallback((date: Date) => {
+    setSelectedDate(date)
+    setCurrentDate(date)
+    onDateSelect?.(date)
+    
+    if (allowEventCreation && currentViewConfig.type !== 'year') {
+      setNewEventStart(date)
+      setNewEventEnd(addHours(date, 1))
+      setIsCreating(true)
+      setIsEventDialogOpen(true)
+    }
+  }, [allowEventCreation, currentViewConfig, onDateSelect])
+  
+  // Handle event click
+  const handleEventClick = useCallback((event: CalendarEvent, e: React.MouseEvent) => {
+    e.stopPropagation()
+    setSelectedEvent(event)
+    setEditingEvent(event)
+    setIsEventDialogOpen(true)
+    setIsCreating(false)
+    onEventClick?.(event, e)
+  }, [onEventClick])
+  
+  // Handle event save
+  const handleEventSave = useCallback(() => {
+    if (isCreating && onEventCreate) {
+      onEventCreate(editingEvent)
+    } else if (selectedEvent && onEventUpdate) {
+      onEventUpdate({ ...selectedEvent, ...editingEvent } as CalendarEvent)
+    }
+    
+    setIsEventDialogOpen(false)
+    setSelectedEvent(null)
+    setEditingEvent({})
+    setIsCreating(false)
+    setNewEventStart(null)
+    setNewEventEnd(null)
+  }, [isCreating, selectedEvent, editingEvent, onEventCreate, onEventUpdate])
+  
+  // Handle event delete
+  const handleEventDelete = useCallback(() => {
+    if (selectedEvent && onEventDelete) {
+      onEventDelete(selectedEvent.id)
+      setIsEventDialogOpen(false)
+      setSelectedEvent(null)
+      setEditingEvent({})
+    }
+  }, [selectedEvent, onEventDelete])
+  
+  // Handle drag start
+  const handleDragStart = useCallback((event: CalendarEvent) => {
+    if (!allowEventDragging) return
+    setIsDragging(true)
+    setDraggedEvent(event)
+  }, [allowEventDragging])
+  
+  // Handle drag end
+  const handleDragEnd = useCallback((result: DropResult) => {
+    setIsDragging(false)
+    setDraggedEvent(null)
+    setDropTarget(null)
+    
+    if (!result.destination || !draggedEvent || !onEventDrop) return
+    
+    // Calculate new start and end dates based on drop position
+    // This is a simplified version - you'd need to implement proper date calculation
+    // based on the view and drop position
+    const newStart = new Date(result.destination.droppableId)
+    const duration = differenceInMinutes(draggedEvent.end, draggedEvent.start)
+    const newEnd = addMinutes(newStart, duration)
+    
+    onEventDrop(draggedEvent.id, newStart, newEnd)
+  }, [draggedEvent, onEventDrop])
+  
+  // Export calendar
+  const exportCalendar = useCallback((format: 'ics' | 'csv' | 'json') => {
+    if (onExport) {
+      onExport(format, eventsInView)
+    } else {
+      // Default export implementation
+      const data = eventsInView
+      let content: string
+      let mimeType: string
+      let filename: string
+      
+      switch (format) {
+        case 'json':
+          content = JSON.stringify(data, null, 2)
+          mimeType = 'application/json'
+          filename = 'calendar.json'
+          break
+        case 'csv':
+          // Simple CSV export
+          const headers = ['Title', 'Start', 'End', 'Location', 'Description']
+          const rows = data.map(event => [
+            event.title,
+            event.start.toISOString(),
+            event.end.toISOString(),
+            event.location || '',
+            event.description || ''
+          ])
+          content = [headers, ...rows].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n')
+          mimeType = 'text/csv'
+          filename = 'calendar.csv'
+          break
+        case 'ics':
+          // Simple ICS export
+          const icsEvents = data.map(event => {
+            const start = event.start.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
+            const end = event.end.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
+            return `BEGIN:VEVENT
+UID:${event.id}@calendar.app
+DTSTART:${start}Z
+DTEND:${end}Z
+SUMMARY:${event.title}
+${event.description ? `DESCRIPTION:${event.description}` : ''}
+${event.location ? `LOCATION:${event.location}` : ''}
+END:VEVENT`
+          }).join('\n')
+          
+          content = `BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//Calendar App//EN
+${icsEvents}
+END:VCALENDAR`
+          mimeType = 'text/calendar'
+          filename = 'calendar.ics'
+          break
+        default:
+          return
+      }
+      
+      const blob = new Blob([content], { type: mimeType })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = filename
+      link.click()
+      URL.revokeObjectURL(url)
+    }
+  }, [eventsInView, onExport])
+  
+  // Render day view
+  const renderDayView = () => {
+    const hours = Array.from({ length: 24 }, (_, i) => i)
+    const dayEvents = eventsInView.filter(event => 
+      isSameDay(new Date(event.start), currentDate)
+    )
+    
+    return (
+      <div className="flex flex-1 overflow-hidden">
+        <div className="flex-1 overflow-auto">
+          <div className="min-h-full">
+            {/* All day events */}
+            <div className="border-b p-2">
+              <div className="text-xs text-muted-foreground mb-1">All Day</div>
+              <div className="space-y-1">
+                {dayEvents
+                  .filter(event => event.allDay)
+                  .map(event => (
+                    <div
+                      key={event.id}
+                      className="p-2 rounded text-xs cursor-pointer hover:opacity-80"
+                      style={{ 
+                        backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
+                        color: '#ffffff'
+                      }}
+                      onClick={(e) => handleEventClick(event, e)}
+                    >
+                      {event.title}
+                    </div>
+                  ))}
+              </div>
+            </div>
+            
+            {/* Time slots */}
+            <div className="relative">
+              {hours.map(hour => (
+                <div key={hour} className="flex border-b" style={{ height: '60px' }}>
+                  <div className="w-16 p-2 text-xs text-muted-foreground text-right">
+                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
+                  </div>
+                  <div className="flex-1 relative border-l">
+                    {/* Events in this hour */}
+                    {dayEvents
+                      .filter(event => {
+                        if (event.allDay) return false
+                        const eventHour = new Date(event.start).getHours()
+                        return eventHour === hour
+                      })
+                      .map(event => {
+                        const startMinutes = new Date(event.start).getMinutes()
+                        const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
+                        const height = (duration / 60) * 60
+                        const top = (startMinutes / 60) * 60
+                        
+                        return (
+                          <div
+                            key={event.id}
+                            className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
+                            style={{
+                              top: `${top}px`,
+                              height: `${height}px`,
+                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
+                              color: '#ffffff',
+                              zIndex: 10
+                            }}
+                            onClick={(e) => handleEventClick(event, e)}
+                          >
+                            <div className="font-medium">{event.title}</div>
+                            <div className="text-xs opacity-80">
+                              {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
+                            </div>
+                          </div>
+                        )
+                      })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
+  // Render week view
+  const renderWeekView = () => {
+    const weekStart = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
+    const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
+    const hours = Array.from({ length: 24 }, (_, i) => i)
+    
+    return (
+      <div className="flex flex-1 overflow-hidden">
+        <div className="flex-1 overflow-auto">
+          <div className="min-h-full">
+            {/* Header */}
+            <div className="sticky top-0 z-20 bg-background border-b">
+              <div className="flex">
+                <div className="w-16" />
+                {weekDays.map(day => (
+                  <div 
+                    key={day.toISOString()} 
+                    className={cn(
+                      "flex-1 p-2 text-center border-l",
+                      isToday(day) && "bg-primary/10"
+                    )}
+                  >
+                    <div className="text-xs text-muted-foreground">
+                      {format(day, 'EEE')}
+                    </div>
+                    <div className={cn(
+                      "text-lg font-medium",
+                      isToday(day) && "text-primary"
+                    )}>
+                      {format(day, 'd')}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            {/* Time grid */}
+            <div className="relative">
+              {hours.map(hour => (
+                <div key={hour} className="flex" style={{ height: '60px' }}>
+                  <div className="w-16 p-2 text-xs text-muted-foreground text-right border-b">
+                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
+                  </div>
+                  {weekDays.map(day => {
+                    const dayEvents = eventsInView.filter(event => 
+                      isSameDay(new Date(event.start), day) && !event.allDay
+                    )
+                    
+                    return (
+                      <div 
+                        key={day.toISOString()} 
+                        className={cn(
+                          "flex-1 relative border-l border-b",
+                          isToday(day) && "bg-primary/5"
+                        )}
+                      >
+                        {dayEvents
+                          .filter(event => {
+                            const eventHour = new Date(event.start).getHours()
+                            return eventHour === hour
+                          })
+                          .map(event => {
+                            const startMinutes = new Date(event.start).getMinutes()
+                            const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
+                            const height = (duration / 60) * 60
+                            const top = (startMinutes / 60) * 60
+                            
+                            return (
+                              <div
+                                key={event.id}
+                                className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
+                                style={{
+                                  top: `${top}px`,
+                                  height: `${height}px`,
+                                  backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
+                                  color: '#ffffff',
+                                  zIndex: 10
+                                }}
+                                onClick={(e) => handleEventClick(event, e)}
+                              >
+                                {event.title}
+                              </div>
+                            )
+                          })}
+                      </div>
+                    )
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
+  // Render month view
+  const renderMonthView = () => {
+    const monthStart = startOfMonth(currentDate)
+    const monthEnd = endOfMonth(currentDate)
+    const startDate = startOfWeek(monthStart, { weekStartsOn: firstDayOfWeek })
+    const endDate = endOfWeek(monthEnd, { weekStartsOn: firstDayOfWeek })
+    const days = eachDayOfInterval({ start: startDate, end: endDate })
+    const weeks = []
+    
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7))
+    }
+    
+    return (
+      <div className="flex-1 p-4 overflow-auto">
+        <div className="min-h-full">
+          {/* Weekday headers */}
+          <div className="grid grid-cols-7 gap-px mb-2">
+            {weeks[0].map(day => (
+              <div 
+                key={day.toISOString()} 
+                className="p-2 text-center text-sm font-medium text-muted-foreground"
+              >
+                {format(day, 'EEE')}
+              </div>
+            ))}
+          </div>
+          
+          {/* Calendar grid */}
+          {weeks.map((week, weekIndex) => (
+            <div key={weekIndex} className="grid grid-cols-7 gap-px">
+              {week.map(day => {
+                const dayEvents = eventsInView.filter(event => 
+                  isSameDay(new Date(event.start), day)
+                )
+                const isCurrentMonth = isSameMonth(day, currentDate)
+                
+                return (
+                  <div
+                    key={day.toISOString()}
+                    className={cn(
+                      "min-h-[100px] p-2 border rounded-lg cursor-pointer transition-colors",
+                      !isCurrentMonth && "opacity-50",
+                      isToday(day) && "bg-primary/10 border-primary",
+                      "hover:bg-muted/50"
+                    )}
+                    onClick={() => handleDateSelect(day)}
+                  >
+                    <div className={cn(
+                      "text-sm font-medium mb-1",
+                      isToday(day) && "text-primary"
+                    )}>
+                      {format(day, 'd')}
+                    </div>
+                    <div className="space-y-1">
+                      {dayEvents.slice(0, 3).map(event => {
+                        return (
+                          <motion.div
+                            key={event.id}
+                            className="text-xs p-1 rounded cursor-pointer truncate"
+                            style={{
+                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
+                              color: '#ffffff'
+                            }}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleEventClick(event, e)
+                            }}
+                          >
+                            {event.allDay ? (
+                              event.title
+                            ) : (
+                              <>
+                                {format(new Date(event.start), 'HH:mm')} {event.title}
+                              </>
+                            )}
+                          </motion.div>
+                        )
+                      })}
+                      {dayEvents.length > 3 && (
+                        <div className="text-xs text-muted-foreground text-center">
+                          +{dayEvents.length - 3} more
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  
+  const renderYearView = () => {
+    const yearStart = startOfYear(currentDate)
+    const yearEnd = endOfYear(currentDate)
+    const months = eachMonthOfInterval({ start: yearStart, end: yearEnd })
+    
+    return (
+      <div className="flex-1 overflow-auto p-4">
+        <div className="grid grid-cols-3 gap-4">
+          {months.map(month => {
+            const monthEvents = eventsInView.filter(event => {
+              const eventStart = new Date(event.start)
+              return isSameMonth(eventStart, month)
+            })
+            
+            return (
+              <Card
+                key={month.toISOString()}
+                className="cursor-pointer hover:shadow-lg transition-shadow"
+                onClick={() => {
+                  setCurrentDate(month)
+                  handleViewChange('month')
+                }}
+              >
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-lg">
+                    {format(month, 'MMMM')}
+                  </CardTitle>
+                  <CardDescription>
+                    {monthEvents.length} events
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-7 gap-1 text-xs">
+                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(day => (
+                      <div key={day} className="text-center text-muted-foreground p-1">
+                        {day}
+                      </div>
+                    ))}
+                    {Array.from({ length: getDay(startOfMonth(month)) }, (_, i) => (
+                      <div key={`empty-${i}`} />
+                    ))}
+                    {Array.from({ length: getDaysInMonth(month) }, (_, i) => {
+                      const day = new Date(month.getFullYear(), month.getMonth(), i + 1)
+                      const hasEvents = monthEvents.some(event => 
+                        isSameDay(new Date(event.start), day)
+                      )
+                      
+                      return (
+                        <div
+                          key={i}
+                          className={cn(
+                            "text-center p-1 rounded",
+                            isToday(day) && "bg-primary text-primary-foreground",
+                            hasEvents && !isToday(day) && "bg-primary/20 font-medium"
+                          )}
+                        >
+                          {i + 1}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+  
+  const renderAgendaView = () => {
+    const agendaDays = Array.from({ length: 30 }, (_, i) => addDays(currentDate, i))
+    
+    return (
+      <div className="flex-1 overflow-auto p-4">
+        <div className="space-y-4">
+          {agendaDays.map(day => {
+            const dayEvents = eventsInView.filter(event => 
+              isSameDay(new Date(event.start), day)
+            ).sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
+            
+            if (dayEvents.length === 0) return null
+            
+            return (
+              <Card key={day.toISOString()}>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-lg">
+                    {format(day, 'EEEE, MMMM d, yyyy')}
+                  </CardTitle>
+                  <CardDescription>
+                    {dayEvents.length} events
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {dayEvents.map(event => (
+                      <div
+                        key={event.id}
+                        className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 cursor-pointer"
+                        onClick={(e) => handleEventClick(event, e)}
+                      >
+                        <div
+                          className="w-1 h-full rounded"
+                          style={{
+                            backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6'
+                          }}
+                        />
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="font-medium">{event.title}</span>
+                            {event.priority && (
+                              <Badge variant={
+                                event.priority === 'high' ? 'destructive' :
+                                event.priority === 'medium' ? 'secondary' :
+                                'secondary'
+                              }>
+                                {event.priority}
+                              </Badge>
+                            )}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {event.allDay ? (
+                              'All day'
+                            ) : (
+                              <>
+                                {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
+                              </>
+                            )}
+                            {event.location && (
+                              <span className="ml-2">
+                                <MapPin className="inline h-3 w-3 mr-1" />
+                                {event.location}
+                              </span>
+                            )}
+                          </div>
+                          {event.description && (
+                            <p className="text-sm text-muted-foreground mt-1">
+                              {event.description}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+  
+  return (
+    <TooltipProvider>
+      <div className={cn("flex h-full bg-background", className)} style={{ height }}>
+        {/* Sidebar */}
+        <motion.div
+          className={cn(
+            "border-r bg-muted/30 flex flex-col",
+            sidebarCollapsed ? "w-16" : "w-80"
+          )}
+          animate={{ width: sidebarCollapsed ? 64 : 320 }}
+          transition={{ type: "spring", stiffness: 300, damping: 30 }}
+        >
+          {/* Mini Calendar */}
+          {!sidebarCollapsed && (
+            <div className="p-4">
+              <CalendarBase
+                mode="single"
+                selected={currentDate}
+                onSelect={(date) => {
+                  if (date instanceof Date) {
+                    handleDateSelect(date);
+                  }
+                }}
+                className="rounded-md border"
+              />
+            </div>
+          )}
+          
+          {/* Categories */}
+          <div className="flex-1 overflow-auto p-4">
+            {sidebarCollapsed ? (
+              <div className="space-y-2">
+                {categories.map(category => (
+                  <Tooltip key={category.id}>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="w-full"
+                        onClick={() => {
+                          setSelectedCategories(prev =>
+                            prev.includes(category.id)
+                              ? prev.filter(c => c !== category.id)
+                              : [...prev, category.id]
+                          )
+                        }}
+                      >
+                        <div
+                          className="w-4 h-4 rounded"
+                          style={{ backgroundColor: category.color }}
+                        />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      {category.name}
+                    </TooltipContent>
+                  </Tooltip>
+                ))}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="font-medium">Categories</h3>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setSelectedCategories([])}
+                  >
+                    Clear
+                  </Button>
+                </div>
+                {categories.map(category => (
+                  <div
+                    key={category.id}
+                    className={cn(
+                      "flex items-center gap-2 p-2 rounded-lg cursor-pointer hover:bg-muted",
+                      selectedCategories.includes(category.id) && "bg-muted"
+                    )}
+                    onClick={() => {
+                      setSelectedCategories(prev =>
+                        prev.includes(category.id)
+                          ? prev.filter(c => c !== category.id)
+                          : [...prev, category.id]
+                      )
+                    }}
+                  >
+                    <Checkbox
+                      checked={selectedCategories.includes(category.id)}
+                      onCheckedChange={() => {}}
+                    />
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: category.color }}
+                    />
+                    {category.icon}
+                    <span className="text-sm">{category.name}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          
+          {/* Sidebar Toggle */}
+          <div className="p-2 border-t">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="w-full"
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+            >
+              {sidebarCollapsed ? <PanelLeft /> : <PanelRight />}
+            </Button>
+          </div>
+        </motion.div>
+        
+        {/* Main Content */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Header */}
+          <div className="border-b p-4 flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => navigateDate('prev')}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => navigateDate('next')}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setCurrentDate(new Date())}
+                >
+                  Today
+                </Button>
+              </div>
+              
+              <h2 className="text-xl font-semibold">
+                {format(currentDate, 
+                  currentViewConfig.type === 'day' ? 'EEEE, MMMM d, yyyy' :
+                  currentViewConfig.type === 'week' ? "'Week of' MMMM d, yyyy" :
+                  currentViewConfig.type === 'month' ? 'MMMM yyyy' :
+                  currentViewConfig.type === 'year' ? 'yyyy' :
+                  'MMMM yyyy'
+                )}
+              </h2>
+            </div>
+            
+            <div className="flex items-center gap-2">
+              {/* Search */}
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  placeholder="Search events..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 w-64"
+                />
+              </div>
+              
+              {/* View Selector */}
+              <Tabs value={currentView} onValueChange={handleViewChange}>
+                <TabsList>
+                  {views.map(view => (
+                    <TabsTrigger key={view.id} value={view.id}>
+                      {view.name}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+              
+              {/* Actions */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="icon">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  {allowEventCreation && (
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setNewEventStart(new Date())
+                        setNewEventEnd(addHours(new Date(), 1))
+                        setIsCreating(true)
+                        setIsEventDialogOpen(true)
+                      }}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Create Event
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <Download className="h-4 w-4 mr-2" />
+                      Export
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem onClick={() => exportCalendar('ics')}>
+                        <FileText className="h-4 w-4 mr-2" />
+                        Export as ICS
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => exportCalendar('csv')}>
+                        <FileSpreadsheet className="h-4 w-4 mr-2" />
+                        Export as CSV
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => exportCalendar('json')}>
+                        <FileCode className="h-4 w-4 mr-2" />
+                        Export as JSON
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuItem>
+                    <Printer className="h-4 w-4 mr-2" />
+                    Print
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Share2 className="h-4 w-4 mr-2" />
+                    Share
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Settings className="h-4 w-4 mr-2" />
+                    Settings
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+          
+          {/* Calendar View */}
+          <LayoutGroup>
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={currentView}
+                className="flex-1 overflow-hidden"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.2 }}
+              >
+                {currentViewConfig.type === 'day' && renderDayView()}
+                {currentViewConfig.type === 'week' && renderWeekView()}
+                {currentViewConfig.type === 'month' && renderMonthView()}
+                {currentViewConfig.type === 'year' && renderYearView()}
+                {currentViewConfig.type === 'agenda' && renderAgendaView()}
+              </motion.div>
+            </AnimatePresence>
+          </LayoutGroup>
+        </div>
+        
+        {/* Event Dialog */}
+        <Dialog open={isEventDialogOpen} onOpenChange={setIsEventDialogOpen}>
+          <DialogContent className="sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle>
+                {isCreating ? 'Create Event' : 'Edit Event'}
+              </DialogTitle>
+              <DialogDescription>
+                {isCreating ? 'Add a new event to your calendar' : 'Update event details'}
+              </DialogDescription>
+            </DialogHeader>
+            
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="title">Title</Label>
+                <Input
+                  id="title"
+                  value={editingEvent.title || ''}
+                  onChange={(e) => setEditingEvent({ ...editingEvent, title: e.target.value })}
+                  placeholder="Event title"
+                />
+              </div>
+              
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="start">Start</Label>
+                  <Input
+                    id="start"
+                    type="datetime-local"
+                    value={editingEvent.start ? format(editingEvent.start, "yyyy-MM-dd'T'HH:mm") : ''}
+                    onChange={(e) => setEditingEvent({ ...editingEvent, start: new Date(e.target.value) })}
+                  />
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="end">End</Label>
+                  <Input
+                    id="end"
+                    type="datetime-local"
+                    value={editingEvent.end ? format(editingEvent.end, "yyyy-MM-dd'T'HH:mm") : ''}
+                    onChange={(e) => setEditingEvent({ ...editingEvent, end: new Date(e.target.value) })}
+                  />
+                </div>
+              </div>
+              
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="allDay"
+                  checked={editingEvent.allDay || false}
+                  onCheckedChange={(checked) => setEditingEvent({ ...editingEvent, allDay: checked })}
+                />
+                <Label htmlFor="allDay">All day</Label>
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Select
+                  value={editingEvent.category || ''}
+                  onValueChange={(value) => setEditingEvent({ ...editingEvent, category: value })}
+                >
+                  <SelectTrigger id="category">
+                    <SelectValue placeholder="Select a category" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {categories.map(category => (
+                      <SelectItem key={category.id} value={category.id}>
+                        <div className="flex items-center gap-2">
+                          <div
+                            className="w-3 h-3 rounded"
+                            style={{ backgroundColor: category.color }}
+                          />
+                          {category.name}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="location">Location</Label>
+                <Input
+                  id="location"
+                  value={editingEvent.location || ''}
+                  onChange={(e) => setEditingEvent({ ...editingEvent, location: e.target.value })}
+                  placeholder="Event location"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  value={editingEvent.description || ''}
+                  onChange={(e) => setEditingEvent({ ...editingEvent, description: e.target.value })}
+                  placeholder="Event description"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label>Priority</Label>
+                <RadioGroup
+                  value={editingEvent.priority || 'medium'}
+                  onValueChange={(value) => setEditingEvent({ ...editingEvent, priority: value as any })}
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="low" id="low" />
+                    <Label htmlFor="low">Low</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="medium" id="medium" />
+                    <Label htmlFor="medium">Medium</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="high" id="high" />
+                    <Label htmlFor="high">High</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+            </div>
+            
+            <DialogFooter>
+              {!isCreating && allowEventDeletion && (
+                <Button
+                  variant="destructive"
+                  onClick={handleEventDelete}
+                >
+                  Delete
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsEventDialogOpen(false)
+                  setEditingEvent({})
+                  setSelectedEvent(null)
+                  setIsCreating(false)
+                }}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleEventSave}>
+                {isCreating ? 'Create' : 'Save'}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </TooltipProvider>
+  )
+})
+
+CalendarPro.displayName = 'CalendarPro'
+
+export default CalendarPro