Update calendar with multi-select

frontend/src/components/common/CalendarDay.tsx

@@ -6,6 +6,10 @@ export interface CalendarDayProps {
   isCurrentMonth?: boolean | undefined
   onClick?: (() => void) | undefined
   isToday?: boolean | undefined
+  isSelected?: boolean | undefined
+  onPointerDown?: ((date: string) => void) | undefined
+  onPointerEnter?: ((date: string) => void) | undefined
+  onActivate?: (() => void) | undefined
 }
 
 export function CalendarDay({
@@ -14,9 +18,23 @@ export function CalendarDay({
   isCurrentMonth = true,
   onClick,
   isToday = false,
+  isSelected = false,
+  onPointerDown,
+  onPointerEnter,
+  onActivate,
 }: CalendarDayProps): ReactNode {
   const dayNum = new Date(date + 'T00:00:00Z').getUTCDate()
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (onActivate) {
+        onActivate()
+      } else {
+        onClick?.()
+      }
+    }
+  }
+
   return (
     <div
       data-testid="calendar-day"
@@ -24,12 +42,10 @@ export function CalendarDay({
       role="button"
       tabIndex={0}
       aria-label={`${date}${events.length > 0 ? ` with ${events.length} event(s)` : ''}`}
-      className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''} ${isToday ? 'calendar-day--today' : ''}`}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          onClick?.()
-        }
-      }}
+      className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''} ${isToday ? 'calendar-day--today' : ''} ${isSelected ? 'calendar-day--selected' : ''}`}
+      onKeyDown={handleKeyDown}
+      onPointerDown={() => onPointerDown?.(date)}
+      onPointerEnter={() => onPointerEnter?.(date)}
     >
       <div className="calendar-day__number">{dayNum}</div>
       {events.length > 0 && (