feat(calendar): Kalenderwahl wieder als Ausklappliste, weiterhin mit Farbe

Die Plaketten aus dem vorigen Stand nahmen bei mehreren Kalendern viel
Platz im Formular und liefen ueber mehrere Zeilen um. Also zurueck zur
Ausklappliste -- aber nicht zurueck zum reinen Text.

Ein natives <select> kam dafuer nicht in Frage: Dessen Eintraege lassen
sich in keinem Browser verlaesslich einfaerben, und im zugeklappten
Zustand schon gar nicht. Deshalb eine eigene Liste, die im Ruhezustand
aussieht wie die anderen Felder daneben, aber den Farbpunkt des
Kalenders traegt -- gefuellt fuer den gewaehlten, leerer Ring fuer die
anderen, dieselbe Sprache wie in der Kalenderliste.

Eine Falle dabei: Escape muss beim Schliessen der Liste angehalten
werden. Sonst laeuft es weiter bis zum Fenster, wo der Termindialog
lauscht, und macht gleich das ganze Formular zu -- mitsamt allem, was
schon eingetippt war.

Selbsttest weiter 36 gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-09-05 07:50:19 +02:00
1 parent 7a1f0837f5
commit cc35161e74
2 files changed
+84 -40

No files matched your search

@@ -5,7 +5,7 @@ import {
addDays, allDayISO, dateFromInput, eventDay, nthOfMonth, timedISO,
toDateInput, toTimeInput, weekdayCodeOf, weekdayCodes,
} from './dates'
import { CalendarPicker, ColorSwatches, Toggle } from './controls'
import { CalendarSelect, ColorSwatches, Toggle } from './controls'
interface Props {
/** Fehlt er, entsteht ein neuer Termin. */
@@ -215,7 +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. */}
<CalendarPicker calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
<CalendarSelect 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