@moontra/moonui-pro 2.15.3 → 2.17.0

package/src/components/calendar/index.tsx

@@ -4,6 +4,9 @@ import React from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
 import { MoonUIBadgePro as Badge } from '../ui/badge'
+import { Input } from '../ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import { 
   ChevronLeft, 
   ChevronRight,
@@ -15,10 +18,31 @@ import {
   MapPin,
   User,
   Lock,
-  Sparkles
+  Sparkles,
+  Search,
+  Filter,
+  Download,
+  Upload,
+  Grid3X3,
+  List,
+  CalendarDays,
+  Repeat,
+  Bell,
+  ChevronDown,
+  MoreHorizontal,
+  Tag,
+  Users,
+  Video,
+  Phone,
+  Globe,
+  Zap,
+  Sun,
+  Moon,
+  Palette
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { EventDialog } from './event-dialog'
+import { motion, AnimatePresence } from 'framer-motion'
 
 export interface CalendarEvent {
   id: string
@@ -30,7 +54,27 @@ export interface CalendarEvent {
   location?: string
   attendees?: string[]
   color?: string
-  type?: 'meeting' | 'task' | 'reminder' | 'event'
+  type?: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
+  recurring?: {
+    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly'
+    interval: number
+    endDate?: Date
+    daysOfWeek?: number[] // For weekly pattern
+    dayOfMonth?: number // For monthly pattern
+  }
+  reminder?: {
+    type: 'email' | 'notification' | 'sms'
+    before: number // minutes before event
+  }
+  priority?: 'low' | 'medium' | 'high'
+  status?: 'confirmed' | 'tentative' | 'cancelled'
+  attachments?: string[]
+  tags?: string[]
+  isAllDay?: boolean
+  isPrivate?: boolean
+  meetingLink?: string
+  phoneNumber?: string
+  timeZone?: string
 }
 
 interface CalendarProps {
@@ -39,6 +83,9 @@ interface CalendarProps {
   onEventAdd?: (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => void
   onEventEdit?: (eventData: Omit<CalendarEvent, 'id'> & { id: string }) => void
   onEventDelete?: (eventId: string) => void
+  onDateChange?: (date: Date) => void
+  onViewChange?: (view: 'month' | 'week' | 'day' | 'year' | 'agenda') => void
+  onEventDrop?: (event: CalendarEvent, newDate: Date) => void
   className?: string
   showWeekends?: boolean
   showEventDetails?: boolean
@@ -47,6 +94,29 @@ interface CalendarProps {
   maxDate?: Date
   highlightToday?: boolean
   height?: number
+  defaultView?: 'month' | 'week' | 'day' | 'year' | 'agenda'
+  enableDragDrop?: boolean
+  enableSearch?: boolean
+  enableFilters?: boolean
+  enableExport?: boolean
+  enableImport?: boolean
+  enableRecurringEvents?: boolean
+  enableReminders?: boolean
+  eventCategories?: Array<{ value: string; label: string; color: string }>
+  workingHours?: { start: string; end: string }
+  holidays?: Array<{ date: Date; name: string }>
+  locale?: string
+  timeFormat?: '12h' | '24h'
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  theme?: 'light' | 'dark' | 'auto' | 'custom'
+  customTheme?: {
+    primary: string
+    secondary: string
+    accent: string
+    background: string
+    foreground: string
+  }
+  compactMode?: boolean
   // For NPM package usage - allows external control of pro access
   showProUpgrade?: boolean
 }
@@ -61,7 +131,22 @@ const EVENT_COLORS = {
   meeting: 'bg-blue-500',
   task: 'bg-green-500',
   reminder: 'bg-yellow-500',
-  event: 'bg-purple-500'
+  event: 'bg-purple-500',
+  birthday: 'bg-pink-500',
+  holiday: 'bg-orange-500',
+  conference: 'bg-indigo-500'
+}
+
+const PRIORITY_COLORS = {
+  low: 'border-l-4 border-l-gray-400',
+  medium: 'border-l-4 border-l-yellow-500',
+  high: 'border-l-4 border-l-red-500'
+}
+
+const STATUS_STYLES = {
+  confirmed: '',
+  tentative: 'opacity-70 border-dashed',
+  cancelled: 'opacity-50 line-through'
 }
 
 export function Calendar({
@@ -70,6 +155,9 @@ export function Calendar({
   onEventAdd,
   onEventEdit,
   onEventDelete,
+  onDateChange,
+  onViewChange,
+  onEventDrop,
   className,
   showWeekends = true,
   showEventDetails = true,
@@ -78,6 +166,23 @@ export function Calendar({
   maxDate,
   highlightToday = true,
   height,
+  defaultView = 'month',
+  enableDragDrop = true,
+  enableSearch = true,
+  enableFilters = true,
+  enableExport = true,
+  enableImport = false,
+  enableRecurringEvents = true,
+  enableReminders = true,
+  eventCategories,
+  workingHours = { start: '09:00', end: '18:00' },
+  holidays = [],
+  locale = 'en-US',
+  timeFormat = '12h',
+  firstDayOfWeek = 0,
+  theme = 'auto',
+  customTheme,
+  compactMode = false,
   showProUpgrade = false
 }: CalendarProps) {
   // For NPM package usage, show upgrade prompt if specified
@@ -111,12 +216,18 @@ export function Calendar({
 
   const [currentDate, setCurrentDate] = React.useState(new Date())
   const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)
-  const [view, setView] = React.useState<'month' | 'week' | 'day'>('month')
+  const [view, setView] = React.useState<'month' | 'week' | 'day' | 'year' | 'agenda'>(defaultView)
   const [eventDialogOpen, setEventDialogOpen] = React.useState(false)
   const [eventDialogMode, setEventDialogMode] = React.useState<'create' | 'edit'>('create')
   const [selectedEvent, setSelectedEvent] = React.useState<CalendarEvent | null>(null)
   const [draggedEvent, setDraggedEvent] = React.useState<CalendarEvent | null>(null)
   const [dragTargetDate, setDragTargetDate] = React.useState<Date | null>(null)
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [filterType, setFilterType] = React.useState<string>('all')
+  const [filterPriority, setFilterPriority] = React.useState<string>('all')
+  const [showFiltersPanel, setShowFiltersPanel] = React.useState(false)
+  const [selectedTags, setSelectedTags] = React.useState<string[]>([])
+  const [miniCalendarDate, setMiniCalendarDate] = React.useState(new Date())
 
   const today = new Date()
   const currentMonth = currentDate.getMonth()
@@ -125,10 +236,14 @@ export function Calendar({
   const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
   const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
   const startDate = new Date(firstDayOfMonth)
-  startDate.setDate(startDate.getDate() - startDate.getDay())
+  
+  // Adjust start date based on firstDayOfWeek setting
+  const daysToSubtract = (startDate.getDay() - firstDayOfWeek + 7) % 7
+  startDate.setDate(startDate.getDate() - daysToSubtract)
 
   const endDate = new Date(lastDayOfMonth)
-  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()))
+  const daysToAdd = (6 - endDate.getDay() + firstDayOfWeek) % 7
+  endDate.setDate(endDate.getDate() + daysToAdd)
 
   const calendarDays = []
   const currentDateIterator = new Date(startDate)
@@ -138,13 +253,92 @@ export function Calendar({
     currentDateIterator.setDate(currentDateIterator.getDate() + 1)
   }
 
-  const getEventsForDate = (date: Date) => {
+  // Get all unique tags from events
+  const allTags = React.useMemo(() => {
+    const tags = new Set<string>()
+    events.forEach(event => {
+      event.tags?.forEach(tag => tags.add(tag))
+    })
+    return Array.from(tags)
+  }, [events])
+
+  // Filter events based on search and filters
+  const filteredEvents = React.useMemo(() => {
     return events.filter(event => {
+      // Search filter
+      if (searchQuery && !event.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
+          !event.description?.toLowerCase().includes(searchQuery.toLowerCase())) {
+        return false
+      }
+      
+      // Type filter
+      if (filterType !== 'all' && event.type !== filterType) {
+        return false
+      }
+      
+      // Priority filter
+      if (filterPriority !== 'all' && event.priority !== filterPriority) {
+        return false
+      }
+      
+      // Tags filter
+      if (selectedTags.length > 0 && (!event.tags || !event.tags.some(tag => selectedTags.includes(tag)))) {
+        return false
+      }
+      
+      return true
+    })
+  }, [events, searchQuery, filterType, filterPriority, selectedTags])
+
+  const getEventsForDate = (date: Date) => {
+    return filteredEvents.filter(event => {
       const eventDate = new Date(event.date)
+      
+      // Check for recurring events
+      if (event.recurring) {
+        return isDateInRecurringPattern(date, event)
+      }
+      
       return eventDate.toDateString() === date.toDateString()
     })
   }
 
+  const isDateInRecurringPattern = (date: Date, event: CalendarEvent): boolean => {
+    if (!event.recurring) return false
+    
+    const eventDate = new Date(event.date)
+    const daysDiff = Math.floor((date.getTime() - eventDate.getTime()) / (1000 * 60 * 60 * 24))
+    
+    if (daysDiff < 0) return false
+    if (event.recurring.endDate && date > event.recurring.endDate) return false
+    
+    switch (event.recurring.pattern) {
+      case 'daily':
+        return daysDiff % event.recurring.interval === 0
+      case 'weekly':
+        if (daysDiff % (event.recurring.interval * 7) !== 0) return false
+        if (event.recurring.daysOfWeek) {
+          return event.recurring.daysOfWeek.includes(date.getDay())
+        }
+        return date.getDay() === eventDate.getDay()
+      case 'monthly':
+        const monthsDiff = (date.getFullYear() - eventDate.getFullYear()) * 12 + 
+                          (date.getMonth() - eventDate.getMonth())
+        if (monthsDiff % event.recurring.interval !== 0) return false
+        if (event.recurring.dayOfMonth) {
+          return date.getDate() === event.recurring.dayOfMonth
+        }
+        return date.getDate() === eventDate.getDate()
+      case 'yearly':
+        const yearsDiff = date.getFullYear() - eventDate.getFullYear()
+        if (yearsDiff % event.recurring.interval !== 0) return false
+        return date.getMonth() === eventDate.getMonth() && 
+               date.getDate() === eventDate.getDate()
+      default:
+        return false
+    }
+  }
+
   const isToday = (date: Date) => {
     return date.toDateString() === today.toDateString()
   }
@@ -172,6 +366,51 @@ export function Calendar({
       newDate.setMonth(currentMonth + 1)
     }
     setCurrentDate(newDate)
+    onDateChange?.(newDate)
+  }
+
+  const changeView = (newView: 'month' | 'week' | 'day' | 'year' | 'agenda') => {
+    setView(newView)
+    onViewChange?.(newView)
+  }
+
+  const exportCalendar = () => {
+    // Create iCal format
+    const icalContent = generateICalContent(filteredEvents)
+    const blob = new Blob([icalContent], { type: 'text/calendar' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'calendar.ics'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const generateICalContent = (events: CalendarEvent[]): string => {
+    let content = 'BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-//MoonUI//Calendar//EN\r\n'
+    
+    events.forEach(event => {
+      content += 'BEGIN:VEVENT\r\n'
+      content += `UID:${event.id}@moonui.com\r\n`
+      content += `DTSTART:${formatDateToICS(event.date, event.startTime)}\r\n`
+      content += `DTEND:${formatDateToICS(event.date, event.endTime || event.startTime)}\r\n`
+      content += `SUMMARY:${event.title}\r\n`
+      if (event.description) content += `DESCRIPTION:${event.description}\r\n`
+      if (event.location) content += `LOCATION:${event.location}\r\n`
+      content += 'END:VEVENT\r\n'
+    })
+    
+    content += 'END:VCALENDAR\r\n'
+    return content
+  }
+
+  const formatDateToICS = (date: Date, time?: string): string => {
+    const d = new Date(date)
+    if (time) {
+      const [hours, minutes] = time.split(':')
+      d.setHours(parseInt(hours), parseInt(minutes))
+    }
+    return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z'
   }
 
   const handleDateClick = (date: Date) => {
@@ -265,8 +504,36 @@ export function Calendar({
   }
 
   const goToToday = () => {
-    setCurrentDate(new Date())
-    setSelectedDate(new Date())
+    const today = new Date()
+    setCurrentDate(today)
+    setSelectedDate(today)
+    onDateChange?.(today)
+  }
+
+  const isHoliday = (date: Date) => {
+    return holidays.some(holiday => {
+      const holidayDate = new Date(holiday.date)
+      return holidayDate.toDateString() === date.toDateString()
+    })
+  }
+
+  const getHolidayName = (date: Date) => {
+    const holiday = holidays.find(h => {
+      const holidayDate = new Date(h.date)
+      return holidayDate.toDateString() === date.toDateString()
+    })
+    return holiday?.name
+  }
+
+  const formatTime = (time?: string): string => {
+    if (!time) return ''
+    if (timeFormat === '24h') return time
+    
+    const [hours, minutes] = time.split(':')
+    const h = parseInt(hours)
+    const period = h >= 12 ? 'PM' : 'AM'
+    const displayHours = h === 0 ? 12 : h > 12 ? h - 12 : h
+    return `${displayHours}:${minutes} ${period}`
   }
 
   const filteredDays = showWeekends ? calendarDays : calendarDays.filter(day => {
@@ -274,7 +541,12 @@ export function Calendar({
     return dayOfWeek !== 0 && dayOfWeek !== 6
   })
 
-  const visibleDaysOfWeek = showWeekends ? DAYS_OF_WEEK : DAYS_OF_WEEK.slice(1, 6)
+  // Reorder days of week based on firstDayOfWeek setting
+  const orderedDaysOfWeek = [...DAYS_OF_WEEK.slice(firstDayOfWeek), ...DAYS_OF_WEEK.slice(0, firstDayOfWeek)]
+  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_, index) => {
+    const actualDay = (index + firstDayOfWeek) % 7
+    return actualDay !== 0 && actualDay !== 6
+  })
 
   return (
     <>
@@ -315,17 +587,18 @@ export function Calendar({
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
-          {/* Calendar Grid */}
-          <div className="grid grid-cols-7 gap-1 w-full">
-            {/* Day Headers */}
-            {visibleDaysOfWeek.map((day) => (
-              <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground">
-                {day}
-              </div>
-            ))}
+          {/* Calendar View */}
+          {view === 'month' && (
+            <div className="grid grid-cols-7 gap-1 w-full">
+              {/* Day Headers */}
+              {visibleDaysOfWeek.map((day) => (
+                <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground">
+                  {day}
+                </div>
+              ))}
 
-            {/* Calendar Days */}
-            {filteredDays.map((date, index) => {
+              {/* Calendar Days */}
+              {filteredDays.map((date, index) => {
               const dayEvents = getEventsForDate(date)
               const isCurrentMonthDate = isCurrentMonth(date)
               const isTodayDate = isToday(date)
@@ -348,12 +621,20 @@ export function Calendar({
                   onDrop={(e) => handleDateDrop(date, e)}
                 >
                   <div className="flex items-center justify-between mb-1">
-                    <span className={cn(
-                      "text-sm font-medium",
-                      isTodayDate && "text-primary font-bold"
-                    )}>
-                      {date.getDate()}
-                    </span>
+                    <div className="flex flex-col">
+                      <span className={cn(
+                        "text-sm font-medium",
+                        isTodayDate && "text-primary font-bold",
+                        isHoliday(date) && "text-orange-600 dark:text-orange-400"
+                      )}>
+                        {date.getDate()}
+                      </span>
+                      {isHoliday(date) && (
+                        <span className="text-[10px] text-orange-600 dark:text-orange-400 truncate">
+                          {getHolidayName(date)}
+                        </span>
+                      )}
+                    </div>
                     {dayEvents.length > 0 && (
                       <Badge variant="secondary" className="text-xs px-1">
                         {dayEvents.length}
@@ -368,9 +649,11 @@ export function Calendar({
                         key={event.id}
                         className={cn(
                           "text-xs p-1 mb-1 rounded text-white cursor-move group relative select-none block w-full truncate",
-                          event.color || EVENT_COLORS[event.type || 'event']
+                          event.color || EVENT_COLORS[event.type || 'event'],
+                          event.priority && PRIORITY_COLORS[event.priority],
+                          event.status && STATUS_STYLES[event.status]
                         )}
-                        draggable={!disabled}
+                        draggable={!disabled && enableDragDrop}
                         onClick={(e) => handleEventClick(event, e)}
                         onDragStart={(e) => handleEventDragStart(event, e)}
                         onDragEnd={handleEventDragEnd}
@@ -379,7 +662,11 @@ export function Calendar({
                         }}
                       >
                         <div className="flex items-center justify-between">
-                          <span className="truncate flex-1">{event.title}</span>
+                          <div className="flex items-center gap-1 flex-1 min-w-0">
+                            {event.isPrivate && <Lock className="h-3 w-3 flex-shrink-0" />}
+                            {event.recurring && <Repeat className="h-3 w-3 flex-shrink-0" />}
+                            <span className="truncate">{event.title}</span>
+                          </div>
                           {showEventDetails && (
                             <div className="hidden group-hover:flex items-center gap-1 ml-1">
                               <Button
@@ -401,10 +688,10 @@ export function Calendar({
                             </div>
                           )}
                         </div>
-                        {event.startTime && (
+                        {event.startTime && !compactMode && (
                           <div className="flex items-center gap-1 mt-1">
                             <Clock className="h-3 w-3" />
-                            <span>{event.startTime}</span>
+                            <span className="text-[10px]">{formatTime(event.startTime)}</span>
                           </div>
                         )}
                       </div>
@@ -418,10 +705,265 @@ export function Calendar({
                 </div>
               )
             })}
-          </div>
+            </div>
+          )}
+          
+          {/* Week View */}
+          {view === 'week' && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-8 gap-2">
+                <div className="text-xs font-medium text-muted-foreground">Time</div>
+                {Array.from({ length: 7 }, (_, i) => {
+                  const date = new Date(currentDate)
+                  date.setDate(date.getDate() - date.getDay() + i)
+                  return (
+                    <div key={i} className="text-center">
+                      <div className="text-xs font-medium text-muted-foreground">
+                        {DAYS_OF_WEEK[i]}
+                      </div>
+                      <div className={cn(
+                        "text-sm font-medium",
+                        isToday(date) && "text-primary"
+                      )}>
+                        {date.getDate()}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+              
+              {/* Time slots */}
+              <div className="border rounded-lg overflow-hidden">
+                <div className="max-h-[500px] overflow-y-auto">
+                  {Array.from({ length: 24 }, (_, hour) => (
+                    <div key={hour} className="grid grid-cols-8 border-b last:border-b-0">
+                      <div className="p-2 text-xs text-muted-foreground border-r">
+                        {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
+                      </div>
+                      {Array.from({ length: 7 }, (_, dayIndex) => {
+                        const date = new Date(currentDate)
+                        date.setDate(date.getDate() - date.getDay() + dayIndex)
+                        const hourEvents = getEventsForDate(date).filter(event => {
+                          if (!event.startTime) return false
+                          const eventHour = parseInt(event.startTime.split(':')[0])
+                          return eventHour === hour
+                        })
+                        
+                        return (
+                          <div
+                            key={dayIndex}
+                            className={cn(
+                              "p-1 min-h-[60px] border-r last:border-r-0 hover:bg-muted/50 transition-colors",
+                              isToday(date) && "bg-primary/5"
+                            )}
+                            onClick={() => handleDateClick(date)}
+                          >
+                            {hourEvents.map(event => (
+                              <div
+                                key={event.id}
+                                className={cn(
+                                  "text-xs p-1 rounded text-white mb-1 cursor-pointer",
+                                  event.color || EVENT_COLORS[event.type || 'event']
+                                )}
+                                onClick={(e) => handleEventClick(event, e)}
+                              >
+                                <div className="font-medium truncate">{event.title}</div>
+                                {event.location && (
+                                  <div className="text-[10px] opacity-80 truncate">{event.location}</div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Day View */}
+          {view === 'day' && (
+            <div className="space-y-4">
+              <div className="text-center">
+                <h3 className="text-lg font-semibold">
+                  {currentDate.toLocaleDateString(locale, { 
+                    weekday: 'long', 
+                    year: 'numeric', 
+                    month: 'long', 
+                    day: 'numeric' 
+                  })}
+                </h3>
+              </div>
+              
+              <div className="border rounded-lg overflow-hidden">
+                <div className="max-h-[500px] overflow-y-auto">
+                  {Array.from({ length: 24 }, (_, hour) => {
+                    const hourEvents = getEventsForDate(currentDate).filter(event => {
+                      if (!event.startTime) return false
+                      const eventHour = parseInt(event.startTime.split(':')[0])
+                      return eventHour === hour
+                    })
+                    
+                    return (
+                      <div key={hour} className="flex border-b last:border-b-0">
+                        <div className="w-20 p-3 text-sm text-muted-foreground border-r">
+                          {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
+                        </div>
+                        <div className="flex-1 p-2 min-h-[80px]">
+                          {hourEvents.map(event => (
+                            <div
+                              key={event.id}
+                              className={cn(
+                                "p-2 rounded text-white mb-2 cursor-pointer",
+                                event.color || EVENT_COLORS[event.type || 'event']
+                              )}
+                              onClick={(e) => handleEventClick(event, e)}
+                            >
+                              <div className="flex items-center justify-between">
+                                <div>
+                                  <div className="font-medium">{event.title}</div>
+                                  {event.description && (
+                                    <div className="text-sm opacity-80">{event.description}</div>
+                                  )}
+                                  <div className="flex items-center gap-3 text-xs mt-1">
+                                    {event.startTime && (
+                                      <div className="flex items-center gap-1">
+                                        <Clock className="h-3 w-3" />
+                                        {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
+                                      </div>
+                                    )}
+                                    {event.location && (
+                                      <div className="flex items-center gap-1">
+                                        <MapPin className="h-3 w-3" />
+                                        {event.location}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                                <div className="flex gap-1">
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
+                                    onClick={(e) => handleEventEdit(event, e)}
+                                  >
+                                    <Edit className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
+                                    onClick={(e) => handleEventDelete(event, e)}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Agenda View */}
+          {view === 'agenda' && (
+            <div className="space-y-4">
+              <div className="max-h-[500px] overflow-y-auto space-y-4">
+                {Array.from({ length: 30 }, (_, i) => {
+                  const date = new Date(currentDate)
+                  date.setDate(date.getDate() + i)
+                  const dayEvents = getEventsForDate(date)
+                  
+                  if (dayEvents.length === 0) return null
+                  
+                  return (
+                    <div key={i} className="border rounded-lg p-4">
+                      <h4 className="font-medium mb-3">
+                        {date.toLocaleDateString(locale, { 
+                          weekday: 'long', 
+                          year: 'numeric', 
+                          month: 'long', 
+                          day: 'numeric' 
+                        })}
+                      </h4>
+                      <div className="space-y-2">
+                        {dayEvents.map(event => (
+                          <div
+                            key={event.id}
+                            className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer"
+                            onClick={() => onEventClick?.(event)}
+                          >
+                            <div className={cn(
+                              "w-3 h-3 rounded-full mt-1 flex-shrink-0",
+                              event.color || EVENT_COLORS[event.type || 'event']
+                            )} />
+                            <div className="flex-1">
+                              <div className="flex items-center justify-between">
+                                <h5 className="font-medium">{event.title}</h5>
+                                <div className="flex gap-1">
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0"
+                                    onClick={(e) => handleEventEdit(event, e)}
+                                  >
+                                    <Edit className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0"
+                                    onClick={(e) => handleEventDelete(event, e)}
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              </div>
+                              {event.description && (
+                                <p className="text-sm text-muted-foreground mt-1">
+                                  {event.description}
+                                </p>
+                              )}
+                              <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
+                                {event.startTime && (
+                                  <div className="flex items-center gap-1">
+                                    <Clock className="h-3 w-3" />
+                                    {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
+                                  </div>
+                                )}
+                                {event.location && (
+                                  <div className="flex items-center gap-1">
+                                    <MapPin className="h-3 w-3" />
+                                    {event.location}
+                                  </div>
+                                )}
+                                {event.attendees && event.attendees.length > 0 && (
+                                  <div className="flex items-center gap-1">
+                                    <Users className="h-3 w-3" />
+                                    {event.attendees.length} attendees
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )
+                }).filter(Boolean)}
+              </div>
+            </div>
+          )}
 
           {/* Selected Date Details */}
-          {selectedDate && (
+          {selectedDate && view === 'month' && (
             <div className="border rounded-lg p-4 bg-muted/50">
               <h4 className="font-medium mb-2">
                 {selectedDate.toLocaleDateString('en-US', {