feat(calendar): Kalenderwahl im Termin mit Farbe statt nur Text

Die Farbe ist das, woran man einen Kalender im Raster wiedererkennt --
im Termindialog stand aber nur der Name in einem Auswahlfeld. Wer
"Arbeit" waehlt, soll dabei schon das Blau sehen, in dem der Termin
gleich erscheint.

Deshalb Plaketten statt <select>: Farbpunkt plus Name, alle nebeneinander
sichtbar, kein Aufklappen noetig. Der Punkt spricht dieselbe Sprache wie
ueberall sonst im Kalender -- gefuellt heisst gewaehlt, ein leerer Ring
heisst nicht gewaehlt, genau wie in der Kalenderliste und bei der
Terminfarbe.

Die gewaehlte Plakette bekommt nur einen Hauch der Kalenderfarbe als
Grund. Acht kraeftig ausgefuellte Toene nebeneinander erschluegen sonst
das ganze Formular, in dem die Farbe eigentlich der Nebendarsteller ist.

Als CalendarPicker in controls.tsx, wo schon Toggle und ColorSwatches
liegen -- damit die naechste Stelle, die eine Kalenderwahl braucht,
nicht wieder bei null anfaengt.

Selbsttest weiter 36 gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/calendar/EventDialog.tsx

@@ -5,7 +5,7 @@ import {
   addDays, allDayISO, dateFromInput, eventDay, nthOfMonth, timedISO,
   toDateInput, toTimeInput, weekdayCodeOf, weekdayCodes,
 } from './dates'
-import { ColorSwatches, Toggle } from './controls'
+import { CalendarPicker, ColorSwatches, Toggle } from './controls'
 
 interface Props {
   /** Fehlt er, entsteht ein neuer Termin. */
@@ -215,9 +215,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
                 Speichern die Sammlung, behält aber seine Kennung – für
                 CalDAV-Clients derselbe Termin an neuer Adresse, nicht ein
                 neuer. */}
-            <select value={calId} disabled={readOnly} onChange={e => setCalId(e.target.value)} style={inputStyle}>
-              {calendars.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-            </select>
+            <CalendarPicker calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
             {!!event && calId !== calendarId && (
               <p style={{ margin: '6px 2px 0', fontSize: 12, color: 'var(--color-text-muted)', lineHeight: 1.4 }}>
                 Wird beim Speichern nach „{calendars.find(c => c.id === calId)?.name}" verschoben