Phase 9b: Schul-Events CRUD + Schuljahres-Rollover

Backend (school-service):
  - calendar_events.go — Create/List/Delete on cal_school_event with
    UUID[] handling for affected_class_ids. Default lead-days [7,1]
    if caller omits the array.
  - calendar_rollover.go — single-transaction promotion: graduating
    classes (grade >= 13) get deleted first so the +1 update doesn't
    bump them to invalid grade 14. defaultSchoolYearDates() picks the
    next Aug-Jul pair when the caller doesn't specify.
  - Handlers + routes: GET/POST /calendar/events,
    DELETE /calendar/events/:id, POST /calendar/school-year-rollover.

Frontend (studio-v2):
  - EventModal: form with Title / Typ / Datum/Zeit / unterrichtsfrei /
    Beschreibung / Sichtbarkeit + Notification-Checkboxen. Per-Type
    Farb-Mapping in types.ts.
  - DayDetail: Modal das beim Klick auf einen Kalender-Tag aufgeht und
    Feiertage + Schulferien + Schul-Events fuer diesen Tag listet,
    inkl. Loeschen-Button pro Event.
  - RolloverWizard: zwei-Schritt-Dialog mit Datums-Auswahl + Tipp-
    Bestaetigung ("SCHULJAHR WECHSELN") gegen versehentliche Auslo-
    sung, danach Ergebnis-Card mit promoted/graduated-Counts.
  - MonthView gewinnt onDayClick + onAddEvent + onRollover Props,
    rendert farb-codierte Punkte fuer School-Events am Tagesrand.
  - Page laed Events parallel mit Holidays und reicht alle Handler
    nach unten.

Tests:
  - Go: 3 neue Tests fuer defaultSchoolYearDates + parseClassIDs.
    Validator-Test fuer CreateSchoolEventRequest existiert bereits.
    80 Subtests gesamt, alle gruen.
  - Playwright: mockCalendarApi gewinnt Routes fuer events GET/POST/
    DELETE und school-year-rollover. 6 neue Tests (EventModal open,
    submit, DayDetail open, Rollover-Trigger, Confirm-Schutz,
    Ergebnis-Anzeige).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

studio-v2/app/schulkalender/_components/MonthView.tsx

@@ -2,15 +2,20 @@
 
 import { useMemo } from 'react'
 import { useTheme } from '@/lib/ThemeContext'
-import type { PublicEvent } from '@/app/schulkalender/types'
+import type { PublicEvent, SchoolEvent } from '@/app/schulkalender/types'
+import { EVENT_TYPE_COLOR } from '@/app/schulkalender/types'
 
 interface MonthViewProps {
   year: number
   month: number // 1-12
   holidays: PublicEvent[]
+  schoolEvents?: SchoolEvent[]
   onPrev: () => void
   onNext: () => void
   onToday: () => void
+  onDayClick?: (iso: string) => void
+  onAddEvent?: () => void
+  onRollover?: () => void
 }
 
 const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
@@ -59,10 +64,26 @@ function buildMonthGrid(year: number, month: number, holidays: PublicEvent[]): C
   return cells
 }
 
-export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: MonthViewProps) {
+export function MonthView({ year, month, holidays, schoolEvents = [], onPrev, onNext, onToday, onDayClick, onAddEvent, onRollover }: MonthViewProps) {
   const { isDark } = useTheme()
   const cells = useMemo(() => buildMonthGrid(year, month, holidays), [year, month, holidays])
 
+  // School events per ISO date — quick lookup during cell render.
+  const schoolEventsByDate = useMemo(() => {
+    const map = new Map<string, SchoolEvent[]>()
+    for (const ev of schoolEvents) {
+      const start = new Date(ev.start_date)
+      const end = new Date(ev.end_date)
+      for (let d = new Date(start); d <= end; d.setUTCDate(d.getUTCDate() + 1)) {
+        const iso = d.toISOString().slice(0, 10)
+        const arr = map.get(iso) || []
+        arr.push(ev)
+        map.set(iso, arr)
+      }
+    }
+    return map
+  }, [schoolEvents])
+
   const headerClass = isDark ? 'text-white' : 'text-slate-900'
   const subtleText = isDark ? 'text-white/40' : 'text-slate-400'
   const cardClass = isDark ? 'bg-white/10 border-white/20' : 'bg-white/80 border-black/10'
@@ -79,6 +100,12 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
           {MONTHS_DE[month - 1]} {year}
         </h2>
         <div className="flex gap-2">
+          {onAddEvent && (
+            <button onClick={onAddEvent} data-testid="add-event" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-indigo-500 hover:bg-indigo-600 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'}`}>+ Termin</button>
+          )}
+          {onRollover && (
+            <button onClick={onRollover} data-testid="rollover-trigger" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-amber-500/30 hover:bg-amber-500/50 text-amber-100' : 'bg-amber-100 hover:bg-amber-200 text-amber-900'}`}>Schuljahr wechseln</button>
+          )}
           <button onClick={onPrev} data-testid="month-prev" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>←</button>
           <button onClick={onToday} data-testid="month-today" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>Heute</button>
           <button onClick={onNext} data-testid="month-next" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>→</button>
@@ -102,11 +129,16 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
           if (schoolHoliday) bg = isDark ? 'bg-amber-500/20' : 'bg-amber-100'
           if (publicHoliday) bg = isDark ? 'bg-rose-500/25' : 'bg-rose-100'
 
+          const dayEvents = schoolEventsByDate.get(iso) || []
+
           return (
             <div
               key={i}
               data-testid={`day-${iso}`}
+              onClick={() => c.inMonth && onDayClick?.(iso)}
               className={`relative aspect-square rounded-lg p-2 text-sm border ${
+                onDayClick && c.inMonth ? 'cursor-pointer hover:ring-2 hover:ring-indigo-300/50' : ''
+              } ${
                 isDark ? 'border-white/10' : 'border-black/5'
               } ${c.inMonth ? bg : (isDark ? 'bg-transparent' : 'bg-transparent')} ${
                 isToday ? (isDark ? 'ring-2 ring-indigo-400' : 'ring-2 ring-indigo-500') : ''
@@ -137,6 +169,18 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
                   )}
                 </div>
               )}
+              {dayEvents.length > 0 && (
+                <div className="absolute bottom-1 left-1 right-1 flex flex-wrap gap-0.5">
+                  {dayEvents.slice(0, 4).map(ev => (
+                    <span
+                      key={ev.id}
+                      title={ev.title}
+                      className="inline-block w-1.5 h-1.5 rounded-full"
+                      style={{ backgroundColor: EVENT_TYPE_COLOR[ev.event_type] }}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
           )
         })}