feat(calendar): Wiederholungen, Tagesansicht, Terminfarben, Farbpunkt als Schalter
Fünf Wünsche aus dem Durchtesten: 1. Wiederholungen einstellbar (täglich/wöchentlich/monatlich/jährlich, alle N, Ende nie/nach Anzahl/an einem Datum). Der eigentliche Aufwand lag nicht im Formular, sondern im Aufklappen: eine wöchentliche Reihe erschien sonst als *ein* Eintrag. Der Server klappt sie jetzt im angefragten Zeitfenster auf (?from=&to=, rrule-go über go-icals RecurrenceSet), die Ansichten fragen ihren sichtbaren Ausschnitt an. Geprüft: 5 Termine wöchentlich, nach Umstellung auf 14-tägig korrekt neu gerechnet, Fenster einer Woche liefert genau einen. Regeln, die das Formular nicht abbildet (etwa jeder zweite Dienstag im Monat), werden weiterhin korrekt *angezeigt* -- geprüft, die vier Termine stimmen -- aber nicht zum Bearbeiten angeboten (409). Ein halb verstandenes Speichern würde die Regel sonst still beschneiden. 2. Tag wird erst geöffnet, statt sofort einen Termin anzulegen: Klick auf einen Tag zeigt dessen Termine als Liste, dort wählt man einen aus oder legt bewusst einen neuen an. 3. Eigene Farbe je Termin (COLOR nach RFC 7986), leer = Kalenderfarbe. 4. Kalenderliste ohne Kästchen: der Farbpunkt selbst ist der Schalter -- gefüllt heißt sichtbar, leerer Ring ausgeblendet. 5. Ganztägig als Schiebeschalter statt Kästchen -- es stellt das Formular um, das ist keine Nebenangabe. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed
1 parent
105ce8de4a
commit
79a7cc6a3d
8 files changed
+795
-218
No files matched your search
@@ -902,20 +902,40 @@ export interface CalendarItem {
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** Die Wiederholung, die das Formular anbietet: alle N Tage/Wochen/Monate/
|
||||
* Jahre, wahlweise mit Ende. Verwickeltere Regeln aus fremden Clients
|
||||
* bleiben erhalten, kommen hier aber als `recurrence: undefined` an und
|
||||
* sind dann nur lesbar (siehe events_api.go). */
|
||||
export interface Recurrence {
|
||||
freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY'
|
||||
interval: number
|
||||
count?: number
|
||||
/** ISO 8601. Der Tag, an dem die Reihe endet (einschließlich). */
|
||||
until?: string
|
||||
}
|
||||
|
||||
export interface CalendarEvent {
|
||||
uid: string
|
||||
summary: string
|
||||
description: string
|
||||
location: string
|
||||
/** ISO 8601, immer UTC ("...Z") – der Server rechnet nicht um, das
|
||||
* übernimmt der Browser beim Anzeigen (new Date(...) kennt die lokale
|
||||
* Zeitzone bereits). */
|
||||
/** ISO 8601, immer UTC ("...Z"). Bei ganztägigen Terminen Mitternacht UTC
|
||||
* als reine Datumsangabe – nie über new Date(...) in Ortszeit umrechnen,
|
||||
* sondern über eventDay() aus components/calendar/dates.ts. */
|
||||
start: string
|
||||
end?: string
|
||||
all_day: boolean
|
||||
/** Über einen echten CalDAV-Client mit Wiederholung angelegt – hier nur
|
||||
* sichtbar, nicht bearbeitbar (siehe events_api.go, UpdateEvent). */
|
||||
/** Leer = Farbe des Kalenders. */
|
||||
color?: string
|
||||
/** Es hängt überhaupt eine Wiederholung dran. */
|
||||
recurring: boolean
|
||||
/** Die Regel – nur gesetzt, wenn sie sich im Formular abbilden lässt. */
|
||||
recurrence?: Recurrence
|
||||
/** Bei aufgeklappten Wiederholungen: Anfang/Ende der **Reihe**, während
|
||||
* start/end den einzelnen Termin tragen. Das Formular bearbeitet immer
|
||||
* die Reihe. */
|
||||
series_start?: string
|
||||
series_end?: string
|
||||
etag: string
|
||||
}
|
||||
|
||||
@@ -926,6 +946,8 @@ export interface EventInput {
|
||||
start: string
|
||||
end?: string
|
||||
all_day: boolean
|
||||
color?: string
|
||||
recurrence?: Recurrence | null
|
||||
}
|
||||
|
||||
export const calendarApi = {
|
||||
@@ -949,7 +971,13 @@ export const calendarApi = {
|
||||
return json.data
|
||||
},
|
||||
|
||||
listEvents: (id: string) => request<CalendarEvent[]>('GET', `/calendars/${id}/events`),
|
||||
/** Termine im Zeitfenster. Wiederholungen kommen vom Server bereits in
|
||||
* einzelne Termine aufgeklappt zurück – deshalb braucht es die Grenzen:
|
||||
* eine tägliche Reihe ohne Ende hat sonst kein natürliches Ende. */
|
||||
listEvents: (id: string, from?: Date, to?: Date) => {
|
||||
const qs = from && to ? `?from=${from.toISOString()}&to=${to.toISOString()}` : ''
|
||||
return request<CalendarEvent[]>('GET', `/calendars/${id}/events${qs}`)
|
||||
},
|
||||
createEvent: (id: string, input: EventInput) =>
|
||||
request<CalendarEvent>('POST', `/calendars/${id}/events`, input),
|
||||
updateEvent: (id: string, uid: string, input: EventInput) =>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useEffect, useRef, useState, type FormEvent } from 'react'
|
||||
import { useOverlayDismiss } from '../../hooks/useOverlayDismiss'
|
||||
import type { CalendarItem } from '../../api/client'
|
||||
|
||||
const palette = ['#4285f4', '#ea4335', '#fbbc04', '#34a853', '#a142f4', '#ff6d00', '#00acc1', '#607d8b']
|
||||
import { ColorSwatches, palette } from './controls'
|
||||
|
||||
interface Props {
|
||||
calendar?: CalendarItem
|
||||
@@ -50,18 +49,8 @@ export default function CalendarDialog({ calendar, onSave, onCancel }: Props) {
|
||||
/>
|
||||
|
||||
<label style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 8, display: 'block' }}>Farbe</label>
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
|
||||
{palette.map(c => (
|
||||
<button
|
||||
key={c} type="button" onClick={() => setColor(c)}
|
||||
aria-label={c}
|
||||
style={{
|
||||
width: 28, height: 28, borderRadius: '50%', background: c, cursor: 'pointer',
|
||||
border: color === c ? '2px solid var(--color-text)' : '2px solid transparent',
|
||||
boxShadow: color === c ? '0 0 0 2px var(--color-surface)' : 'none',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<ColorSwatches value={color} onChange={setColor} />
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useOverlayDismiss } from '../../hooks/useOverlayDismiss'
|
||||
import type { CalendarEvent } from '../../api/client'
|
||||
|
||||
const weekdayLong = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
|
||||
const monthLabels = [
|
||||
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
|
||||
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
|
||||
]
|
||||
|
||||
export interface DayEvent extends CalendarEvent {
|
||||
calendarId: string
|
||||
/** Endgültige Farbe: eigene Farbe des Termins, sonst die des Kalenders. */
|
||||
color: string
|
||||
calendarName: string
|
||||
startsAt: Date
|
||||
endsAt: Date | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Ein angeklickter Tag wird erst **geöffnet**, statt sofort einen neuen
|
||||
* Termin anzulegen.
|
||||
*
|
||||
* Vorher legte jeder Klick auf eine Tageszelle direkt einen neuen Termin an –
|
||||
* auch der Klick, mit dem man eigentlich nachsehen wollte, was an dem Tag
|
||||
* ansteht. Hier steht zuerst, was da ist; einen neuen Termin gibt es auf
|
||||
* Ansage.
|
||||
*/
|
||||
export default function DayDialog({ day, events, onPick, onCreate, onClose }: {
|
||||
day: Date
|
||||
events: DayEvent[]
|
||||
onPick: (ev: DayEvent) => void
|
||||
onCreate: () => void
|
||||
onClose: () => void
|
||||
}) {
|
||||
const overlay = useOverlayDismiss(onClose)
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose() }
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [onClose])
|
||||
|
||||
const timeLabel = (ev: DayEvent) => {
|
||||
if (ev.all_day) return 'ganztägig'
|
||||
const from = ev.startsAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
if (!ev.endsAt) return from
|
||||
const to = ev.endsAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
return `${from} – ${to}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed', inset: 0, zIndex: 190, display: 'flex',
|
||||
alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.6)', padding: 16,
|
||||
}} {...overlay}>
|
||||
<div style={{
|
||||
background: 'var(--color-surface)', border: '1px solid var(--color-border)',
|
||||
borderRadius: 14, width: 420, maxWidth: '100%', maxHeight: '80vh',
|
||||
display: 'flex', flexDirection: 'column', overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ padding: '18px 22px 12px', borderBottom: '1px solid var(--color-border)' }}>
|
||||
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>{weekdayLong[day.getDay()]}</div>
|
||||
<div style={{ fontSize: 17, fontWeight: 600, color: 'var(--color-text)' }}>
|
||||
{day.getDate()}. {monthLabels[day.getMonth()]} {day.getFullYear()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: 12, overflowY: 'auto', flex: 1 }}>
|
||||
{events.length === 0 && (
|
||||
<p style={{ margin: '12px 10px', fontSize: 13, color: 'var(--color-text-muted)' }}>
|
||||
Nichts an diesem Tag.
|
||||
</p>
|
||||
)}
|
||||
{events.map(ev => (
|
||||
<button
|
||||
key={ev.calendarId + ev.uid + ev.start}
|
||||
onClick={() => onPick(ev)}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10, width: '100%',
|
||||
padding: '9px 10px', marginBottom: 4, borderRadius: 8, textAlign: 'left',
|
||||
background: 'transparent', border: '1px solid var(--color-border)', cursor: 'pointer',
|
||||
}}
|
||||
className="aether-cal-cell"
|
||||
>
|
||||
<span style={{ width: 4, alignSelf: 'stretch', borderRadius: 2, background: ev.color, flexShrink: 0 }} />
|
||||
<span style={{ flex: 1, minWidth: 0 }}>
|
||||
<span style={{ display: 'block', fontSize: 13.5, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{ev.summary || '(ohne Titel)'}
|
||||
{ev.recurring && <span style={{ marginLeft: 6, fontSize: 11, color: 'var(--color-text-muted)' }}>↻</span>}
|
||||
</span>
|
||||
<span style={{ display: 'block', fontSize: 11.5, color: 'var(--color-text-muted)' }}>
|
||||
{timeLabel(ev)}
|
||||
{ev.location ? ` · ${ev.location}` : ''}
|
||||
{` · ${ev.calendarName}`}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, padding: '12px 16px', borderTop: '1px solid var(--color-border)' }}>
|
||||
<button onClick={onCreate} style={{
|
||||
padding: '8px 14px', borderRadius: 8, border: 'none',
|
||||
background: 'var(--color-primary)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer',
|
||||
}}>
|
||||
+ Termin an diesem Tag
|
||||
</button>
|
||||
<button onClick={onClose} style={{
|
||||
padding: '8px 16px', borderRadius: 8, border: '1px solid var(--color-border)',
|
||||
background: 'transparent', color: 'var(--color-text-muted)', fontSize: 13, cursor: 'pointer',
|
||||
}}>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useRef, useState, type CSSProperties, type FormEvent } from 'react'
|
||||
import { useOverlayDismiss } from '../../hooks/useOverlayDismiss'
|
||||
import type { CalendarEvent, CalendarItem, EventInput } from '../../api/client'
|
||||
import type { CalendarEvent, CalendarItem, EventInput, Recurrence } from '../../api/client'
|
||||
import { addDays, allDayISO, eventDay, timedISO, toDateInput, toTimeInput } from './dates'
|
||||
import { ColorSwatches, Toggle } from './controls'
|
||||
|
||||
interface Props {
|
||||
/** Fehlt er, entsteht ein neuer Termin. */
|
||||
@@ -15,43 +16,66 @@ interface Props {
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
type FreqChoice = 'NONE' | Recurrence['freq']
|
||||
type EndChoice = 'NEVER' | 'COUNT' | 'UNTIL'
|
||||
|
||||
const freqLabels: Record<FreqChoice, string> = {
|
||||
NONE: 'Einmalig',
|
||||
DAILY: 'Täglich',
|
||||
WEEKLY: 'Wöchentlich',
|
||||
MONTHLY: 'Monatlich',
|
||||
YEARLY: 'Jährlich',
|
||||
}
|
||||
|
||||
export default function EventDialog({ event, defaultStart, calendars, calendarId, onSave, onDelete, onCancel }: Props) {
|
||||
const overlay = useOverlayDismiss(onCancel)
|
||||
const titleRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const allDayInit = event?.all_day ?? false
|
||||
const start = event ? eventDay(event.start, allDayInit) : defaultStart
|
||||
const startTimed = event && !allDayInit ? new Date(event.start) : defaultStart
|
||||
// Bei ganztägigen Terminen liefert die Schnittstelle den letzten *belegten*
|
||||
// Tag – genau das, was im Formular stehen soll (siehe events_api.go).
|
||||
const end = event?.end
|
||||
? eventDay(event.end, allDayInit)
|
||||
// Bei einer Reihe bearbeitet das Formular die **Reihe**, nicht den
|
||||
// angeklickten Einzeltermin – deshalb series_start, wo vorhanden.
|
||||
const baseStartISO = event?.series_start ?? event?.start
|
||||
const baseEndISO = event?.series_end ?? event?.end
|
||||
const start = baseStartISO ? eventDay(baseStartISO, allDayInit) : defaultStart
|
||||
const startTimed = baseStartISO && !allDayInit ? new Date(baseStartISO) : defaultStart
|
||||
const end = baseEndISO
|
||||
? eventDay(baseEndISO, allDayInit)
|
||||
: new Date(startTimed.getTime() + 60 * 60 * 1000)
|
||||
|
||||
const [calId, setCalId] = useState(calendarId)
|
||||
const [summary, setSummary] = useState(event?.summary ?? '')
|
||||
const [description, setDescription] = useState(event?.description ?? '')
|
||||
const [location, setLocation] = useState(event?.location ?? '')
|
||||
const [color, setColor] = useState(event?.color ?? '')
|
||||
const [allDay, setAllDay] = useState(allDayInit)
|
||||
const [startDate, setStartDate] = useState(toDateInput(start))
|
||||
const [startTime, setStartTime] = useState(toTimeInput(startTimed))
|
||||
const [endDate, setEndDate] = useState(toDateInput(end))
|
||||
const [endTime, setEndTime] = useState(toTimeInput(end))
|
||||
|
||||
const rec = event?.recurrence
|
||||
const [freq, setFreq] = useState<FreqChoice>(rec?.freq ?? 'NONE')
|
||||
const [interval, setInterval] = useState(String(rec?.interval ?? 1))
|
||||
const [endChoice, setEndChoice] = useState<EndChoice>(
|
||||
rec?.count ? 'COUNT' : rec?.until ? 'UNTIL' : 'NEVER')
|
||||
const [count, setCount] = useState(String(rec?.count ?? 10))
|
||||
const [until, setUntil] = useState(
|
||||
rec?.until ? toDateInput(eventDay(rec.until, true)) : toDateInput(addDays(start, 90)))
|
||||
|
||||
useEffect(() => { titleRef.current?.focus() }, [])
|
||||
|
||||
// Escape schließt – erwartet man bei jedem Dialog, und ohne fühlt sich die
|
||||
// Oberfläche zäh an.
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onCancel() }
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [onCancel])
|
||||
|
||||
const readOnly = !!event?.recurring
|
||||
// Nur Regeln, die dieses Formular vollständig abbildet, sind bearbeitbar.
|
||||
// Alles andere ("jeden zweiten Dienstag im Monat") bliebe beim Speichern
|
||||
// auf der Strecke – der Server lehnt es deshalb auch ab.
|
||||
const readOnly = !!event?.recurring && !event?.recurrence
|
||||
const isSeries = !!event?.recurring
|
||||
|
||||
/** Ende darf nicht vor dem Start liegen – statt einer Fehlermeldung zieht
|
||||
* das Ende einfach mit, so wie man es von anderen Kalendern kennt. */
|
||||
function changeStartDate(v: string) {
|
||||
const shift = (+new Date(v) - +new Date(startDate)) / 86400000
|
||||
setStartDate(v)
|
||||
@@ -60,6 +84,14 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
}
|
||||
}
|
||||
|
||||
function buildRecurrence(): Recurrence | null {
|
||||
if (freq === 'NONE') return null
|
||||
const r: Recurrence = { freq, interval: Math.max(1, parseInt(interval, 10) || 1) }
|
||||
if (endChoice === 'COUNT') r.count = Math.max(1, parseInt(count, 10) || 1)
|
||||
if (endChoice === 'UNTIL') r.until = allDayISO(until)
|
||||
return r
|
||||
}
|
||||
|
||||
function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
if (readOnly || !summary.trim()) return
|
||||
@@ -80,6 +112,8 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
description: description.trim() || undefined,
|
||||
location: location.trim() || undefined,
|
||||
all_day: allDay,
|
||||
color: color || undefined,
|
||||
recurrence: buildRecurrence(),
|
||||
start: startISO,
|
||||
end: endISO,
|
||||
}, calId)
|
||||
@@ -94,6 +128,12 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
const labelStyle: CSSProperties = {
|
||||
fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 4, display: 'block',
|
||||
}
|
||||
const noteStyle: CSSProperties = {
|
||||
background: 'var(--color-surface-2)', border: '1px solid var(--color-border)',
|
||||
borderRadius: 8, padding: '8px 10px', fontSize: 12.5,
|
||||
color: 'var(--color-text-muted)', marginBottom: 14, lineHeight: 1.45,
|
||||
}
|
||||
const calColor = calendars.find(c => c.id === calId)?.color ?? '#4285f4'
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
@@ -102,18 +142,23 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
}} {...overlay}>
|
||||
<form onSubmit={handleSubmit} style={{
|
||||
background: 'var(--color-surface)', border: '1px solid var(--color-border)',
|
||||
borderRadius: 14, padding: 24, width: 420, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto',
|
||||
borderRadius: 14, padding: 24, width: 440, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto',
|
||||
}}>
|
||||
<h2 style={{ margin: '0 0 16px', fontSize: 16, fontWeight: 600, color: 'var(--color-text)' }}>
|
||||
{event ? 'Termin bearbeiten' : 'Neuer Termin'}
|
||||
{event ? (isSeries ? 'Terminreihe bearbeiten' : 'Termin bearbeiten') : 'Neuer Termin'}
|
||||
</h2>
|
||||
|
||||
{readOnly && (
|
||||
<div style={{
|
||||
background: 'var(--color-surface-2)', border: '1px solid var(--color-border)',
|
||||
borderRadius: 8, padding: '8px 10px', fontSize: 12.5, color: 'var(--color-text-muted)', marginBottom: 14,
|
||||
}}>
|
||||
Wiederholender Termin – nur mit einem CalDAV-Client (z. B. DAVx5) bearbeitbar, nicht hier.
|
||||
<div style={noteStyle}>
|
||||
Diese Wiederholungsregel kann dieses Formular nicht vollständig
|
||||
abbilden – zum Ändern einen CalDAV-Client verwenden (z. B. DAVx5).
|
||||
Der Termin bleibt unverändert erhalten.
|
||||
</div>
|
||||
)}
|
||||
{isSeries && !readOnly && (
|
||||
<div style={noteStyle}>
|
||||
Terminreihe: Änderungen gelten für <strong>alle</strong> Termine der
|
||||
Reihe. Angezeigt wird deshalb ihr Beginn, nicht der angeklickte Tag.
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -135,10 +180,9 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 13, color: 'var(--color-text)', cursor: readOnly ? 'default' : 'pointer' }}>
|
||||
<input type="checkbox" checked={allDay} disabled={readOnly} onChange={e => setAllDay(e.target.checked)} />
|
||||
Ganztägig
|
||||
</label>
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<Toggle checked={allDay} onChange={setAllDay} disabled={readOnly} label="Ganztägig" />
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
@@ -154,7 +198,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label style={labelStyle}>Ende</label>
|
||||
<input type="date" value={endDate} min={startDate} disabled={readOnly}
|
||||
@@ -168,6 +212,60 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Wiederholung ───────────────────────────────────────────── */}
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<label style={labelStyle}>Wiederholung</label>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<select value={freq} disabled={readOnly}
|
||||
onChange={e => setFreq(e.target.value as FreqChoice)}
|
||||
style={{ ...inputStyle, flex: 1 }}>
|
||||
{(Object.keys(freqLabels) as FreqChoice[]).map(f => (
|
||||
<option key={f} value={f}>{freqLabels[f]}</option>
|
||||
))}
|
||||
</select>
|
||||
{freq !== 'NONE' && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||
<span style={{ fontSize: 12.5, color: 'var(--color-text-muted)' }}>alle</span>
|
||||
<input type="number" min={1} max={99} value={interval} disabled={readOnly}
|
||||
onChange={e => setInterval(e.target.value)}
|
||||
style={{ ...inputStyle, width: 60 }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{freq !== 'NONE' && (
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<label style={labelStyle}>Endet</label>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<select value={endChoice} disabled={readOnly}
|
||||
onChange={e => setEndChoice(e.target.value as EndChoice)}
|
||||
style={{ ...inputStyle, flex: 1 }}>
|
||||
<option value="NEVER">Nie</option>
|
||||
<option value="COUNT">Nach Anzahl</option>
|
||||
<option value="UNTIL">An einem Datum</option>
|
||||
</select>
|
||||
{endChoice === 'COUNT' && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
||||
<input type="number" min={1} max={999} value={count} disabled={readOnly}
|
||||
onChange={e => setCount(e.target.value)} style={{ ...inputStyle, width: 70 }} />
|
||||
<span style={{ fontSize: 12.5, color: 'var(--color-text-muted)' }}>Mal</span>
|
||||
</div>
|
||||
)}
|
||||
{endChoice === 'UNTIL' && (
|
||||
<input type="date" value={until} min={startDate} disabled={readOnly}
|
||||
onChange={e => setUntil(e.target.value)} style={{ ...inputStyle, width: 160 }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Farbe ──────────────────────────────────────────────────── */}
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<label style={labelStyle}>Farbe</label>
|
||||
<ColorSwatches value={color} onChange={setColor} inherit={calColor} disabled={readOnly} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={labelStyle}>Ort</label>
|
||||
<input type="text" value={location} disabled={readOnly} onChange={e => setLocation(e.target.value)} style={inputStyle} />
|
||||
@@ -185,7 +283,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
|
||||
padding: '8px 14px', borderRadius: 8, border: 'none',
|
||||
background: 'var(--color-danger)', color: '#fff', fontSize: 13, cursor: 'pointer',
|
||||
}}>
|
||||
Löschen
|
||||
{isSeries ? 'Reihe löschen' : 'Löschen'}
|
||||
</button>
|
||||
) : <span />}
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import type { CSSProperties } from 'react'
|
||||
|
||||
/** Eine Palette für Kalender **und** Termine – zwei getrennte Listen liefen
|
||||
* sonst mit der Zeit auseinander, und ein Termin in einer Farbe, die es als
|
||||
* Kalenderfarbe nicht gibt, sieht aus wie ein Fehler. */
|
||||
export const palette = [
|
||||
'#4285f4', '#ea4335', '#fbbc04', '#34a853',
|
||||
'#a142f4', '#ff6d00', '#00acc1', '#607d8b',
|
||||
]
|
||||
|
||||
/**
|
||||
* Schiebeschalter statt Kästchen.
|
||||
*
|
||||
* Nicht nur Zierde: „Ganztägig" schaltet das Formular um (die Uhrzeitfelder
|
||||
* verschwinden). Ein Kästchen liest sich wie eine Angabe, die man nebenbei
|
||||
* ankreuzt – ein Schalter zeigt, dass hier etwas umgestellt wird.
|
||||
*/
|
||||
export function Toggle({ checked, onChange, disabled, label }: {
|
||||
checked: boolean
|
||||
onChange: (v: boolean) => void
|
||||
disabled?: boolean
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<label style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1,
|
||||
fontSize: 13, color: 'var(--color-text)',
|
||||
}}>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
aria-label={label}
|
||||
disabled={disabled}
|
||||
onClick={() => !disabled && onChange(!checked)}
|
||||
style={{
|
||||
width: 38, height: 22, borderRadius: 11, flexShrink: 0, padding: 0,
|
||||
border: '1px solid var(--color-border)',
|
||||
background: checked ? 'var(--color-primary)' : 'var(--color-surface-2)',
|
||||
cursor: disabled ? 'default' : 'pointer',
|
||||
transition: 'background 0.15s',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
position: 'absolute', top: 2, left: checked ? 18 : 2,
|
||||
width: 16, height: 16, borderRadius: '50%',
|
||||
background: checked ? '#fff' : 'var(--color-text-muted)',
|
||||
transition: 'left 0.15s',
|
||||
}} />
|
||||
</button>
|
||||
{label}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Farbwahl als Kreise. Der gewählte Kreis ist gefüllt, die anderen sind
|
||||
* Umrisse – dieselbe Sprache wie in der Kalenderliste, wo ein gefüllter
|
||||
* Punkt „wird angezeigt" heißt.
|
||||
*/
|
||||
export function ColorSwatches({ value, onChange, inherit, disabled }: {
|
||||
value: string
|
||||
onChange: (c: string) => void
|
||||
/** Ist sie gesetzt, gibt es zusätzlich die Wahl „Farbe des Kalenders"
|
||||
* (leerer Wert) und dieser Kreis zeigt sie an. */
|
||||
inherit?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const dot = (color: string, selected: boolean, onClick: () => void, key: string, title: string) => (
|
||||
<button
|
||||
key={key} type="button" title={title} aria-label={title} disabled={disabled}
|
||||
onClick={onClick}
|
||||
style={{
|
||||
width: 26, height: 26, borderRadius: '50%', padding: 0, flexShrink: 0,
|
||||
background: selected ? color : 'transparent',
|
||||
border: `2px solid ${color}`,
|
||||
cursor: disabled ? 'default' : 'pointer',
|
||||
boxShadow: selected ? `0 0 0 2px var(--color-surface), 0 0 0 3.5px ${color}` : 'none',
|
||||
transition: 'background 0.12s, box-shadow 0.12s',
|
||||
} as CSSProperties}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 9, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
{inherit !== undefined && dot(inherit, value === '', () => onChange(''), 'inherit', 'Farbe des Kalenders')}
|
||||
{inherit !== undefined && (
|
||||
<span style={{ width: 1, height: 20, background: 'var(--color-border)', margin: '0 2px' }} />
|
||||
)}
|
||||
{palette.map(c => dot(c, value.toLowerCase() === c.toLowerCase(), () => onChange(c), c, c))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import PageHeader from '../components/PageHeader'
|
||||
import ConfirmDialog from '../components/ConfirmDialog'
|
||||
import EventDialog from '../components/calendar/EventDialog'
|
||||
import CalendarDialog from '../components/calendar/CalendarDialog'
|
||||
import DayDialog, { type DayEvent } from '../components/calendar/DayDialog'
|
||||
import {
|
||||
addDays, dayKey, eventDay, isSameDay, spannedDays, startOfDay, startOfMonth, startOfWeek,
|
||||
} from '../components/calendar/dates'
|
||||
@@ -25,24 +26,27 @@ const HOUR_H = 44
|
||||
/** Breite der Stundenspalte links im Wochenraster. */
|
||||
const GUTTER = 52
|
||||
|
||||
interface EventWithCalendar extends CalendarEvent {
|
||||
calendarId: string
|
||||
color: string
|
||||
/** Anfang als örtlicher Zeitpunkt – ganztägige Termine als Tagesbeginn. */
|
||||
startsAt: Date
|
||||
endsAt: Date | null
|
||||
}
|
||||
type EventWithCalendar = DayEvent
|
||||
|
||||
function decorate(ev: CalendarEvent, cal: CalendarItem): EventWithCalendar {
|
||||
return {
|
||||
...ev,
|
||||
calendarId: cal.id,
|
||||
color: cal.color,
|
||||
calendarName: cal.name,
|
||||
// Eigene Terminfarbe schlägt die Kalenderfarbe – aber nur, wenn eine
|
||||
// gesetzt ist. Sonst erbt der Termin sie weiterhin.
|
||||
color: ev.color || cal.color,
|
||||
startsAt: eventDay(ev.start, ev.all_day),
|
||||
endsAt: ev.end ? eventDay(ev.end, ev.all_day) : null,
|
||||
}
|
||||
}
|
||||
|
||||
/** Eindeutig auch für aufgeklappte Wiederholungen: die teilen sich die UID
|
||||
* und unterscheiden sich nur im Anfangszeitpunkt. */
|
||||
function eventKey(ev: EventWithCalendar): string {
|
||||
return `${ev.calendarId}|${ev.uid}|${ev.start}`
|
||||
}
|
||||
|
||||
/** Termine je Tag. Ein mehrtägiger Termin steht in **jeder** Zelle, die er
|
||||
* belegt – vorher nur am Starttag, was ihn ab dem zweiten Tag verschwinden
|
||||
* ließ. */
|
||||
@@ -66,7 +70,7 @@ function groupByDay(events: EventWithCalendar[]): Map<string, EventWithCalendar[
|
||||
}
|
||||
|
||||
/** Vorschlag für einen neuen Termin: heute die nächste volle Stunde, an
|
||||
* anderen Tagen 9 Uhr. Mitternacht als Vorgabe (vorher) trifft fast nie zu. */
|
||||
* anderen Tagen 9 Uhr. Mitternacht als Vorgabe trifft fast nie zu. */
|
||||
function suggestStart(day: Date): Date {
|
||||
const now = new Date()
|
||||
if (isSameDay(day, now)) {
|
||||
@@ -83,8 +87,7 @@ function suggestStart(day: Date): Date {
|
||||
export default function CalendarPage() {
|
||||
const [calendars, setCalendars] = useState<CalendarItem[]>([])
|
||||
/** Ausgeblendete Kalender. Bewusst andersherum als „sichtbare": So ist ein
|
||||
* **neu angelegter** Kalender automatisch sichtbar. Vorher landete er in
|
||||
* keiner Sichtbar-Liste und blieb nach dem Anlegen unsichtbar. */
|
||||
* **neu angelegter** Kalender automatisch sichtbar. */
|
||||
const [hidden, setHidden] = useState<Set<string>>(new Set())
|
||||
const [eventsByCal, setEventsByCal] = useState<Record<string, CalendarEvent[]>>({})
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('month')
|
||||
@@ -94,6 +97,7 @@ export default function CalendarPage() {
|
||||
const [showList, setShowList] = useState(() =>
|
||||
typeof window === 'undefined' ? true : window.matchMedia('(min-width: 900px)').matches)
|
||||
|
||||
const [dayDialog, setDayDialog] = useState<Date | null>(null)
|
||||
const [eventDialog, setEventDialog] = useState<{ calId: string; event?: CalendarEvent; start: Date } | null>(null)
|
||||
const [calDialog, setCalDialog] = useState<{ calendar?: CalendarItem } | null>(null)
|
||||
const [deleteCalendar, setDeleteCalendar] = useState<CalendarItem | null>(null)
|
||||
@@ -102,10 +106,28 @@ export default function CalendarPage() {
|
||||
const importInputRef = useRef<HTMLInputElement>(null)
|
||||
const importTargetRef = useRef<string | null>(null)
|
||||
|
||||
const loadEvents = useCallback(async (list: CalendarItem[]) => {
|
||||
/**
|
||||
* Sichtbares Zeitfenster. Der Server klappt Wiederholungen **darin** auf –
|
||||
* eine wöchentliche Reihe ohne Ende hat kein natürliches Ende, also muss
|
||||
* die Ansicht sagen, welchen Ausschnitt sie braucht.
|
||||
*/
|
||||
const range = useMemo(() => {
|
||||
if (viewMode === 'month') {
|
||||
const s = startOfWeek(startOfMonth(cursor))
|
||||
return { from: addDays(s, -1), to: addDays(s, 43) }
|
||||
}
|
||||
if (viewMode === 'week') {
|
||||
const s = startOfWeek(cursor)
|
||||
return { from: addDays(s, -1), to: addDays(s, 8) }
|
||||
}
|
||||
const today = startOfDay(new Date())
|
||||
return { from: addDays(today, -31), to: addDays(today, 365) }
|
||||
}, [viewMode, cursor.getFullYear(), cursor.getMonth(), viewMode === 'week' ? +startOfWeek(cursor) : 0])
|
||||
|
||||
const loadEvents = useCallback(async (list: CalendarItem[], from: Date, to: Date) => {
|
||||
const pairs = await Promise.all(list.map(async c => {
|
||||
try {
|
||||
return [c.id, await calendarApi.listEvents(c.id)] as const
|
||||
return [c.id, await calendarApi.listEvents(c.id, from, to)] as const
|
||||
} catch {
|
||||
return [c.id, [] as CalendarEvent[]] as const
|
||||
}
|
||||
@@ -113,20 +135,29 @@ export default function CalendarPage() {
|
||||
setEventsByCal(Object.fromEntries(pairs))
|
||||
}, [])
|
||||
|
||||
const reloadAll = useCallback(async () => {
|
||||
const loadCalendars = useCallback(async () => {
|
||||
setError(null)
|
||||
try {
|
||||
const list = await calendarApi.list()
|
||||
setCalendars(list)
|
||||
await loadEvents(list)
|
||||
setCalendars(await calendarApi.list())
|
||||
} catch (e) {
|
||||
setError(e instanceof APIError ? e.message : 'Laden fehlgeschlagen')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [loadEvents])
|
||||
}, [])
|
||||
|
||||
useEffect(() => { reloadAll() }, [reloadAll])
|
||||
useEffect(() => { loadCalendars() }, [loadCalendars])
|
||||
|
||||
// Termine hängen an Kalenderliste **und** Zeitfenster: Beim Blättern in
|
||||
// einen anderen Monat müssen die Wiederholungen dort neu aufgeklappt werden.
|
||||
useEffect(() => {
|
||||
if (calendars.length === 0) { setEventsByCal({}); return }
|
||||
loadEvents(calendars, range.from, range.to)
|
||||
}, [calendars, range.from, range.to, loadEvents])
|
||||
|
||||
const refreshEvents = useCallback(
|
||||
() => loadEvents(calendars, range.from, range.to),
|
||||
[calendars, range.from, range.to, loadEvents])
|
||||
|
||||
const allEvents = useMemo(() => {
|
||||
const out: EventWithCalendar[] = []
|
||||
@@ -149,13 +180,10 @@ export default function CalendarPage() {
|
||||
|
||||
const defaultCalendarId = calendars[0]?.id
|
||||
|
||||
const openNewEvent = useCallback((start: Date) => {
|
||||
setCalendars(cals => {
|
||||
const first = cals[0]
|
||||
if (first) setEventDialog({ calId: first.id, start })
|
||||
return cals
|
||||
})
|
||||
}, [])
|
||||
function openNewEvent(start: Date) {
|
||||
if (!defaultCalendarId) return
|
||||
setEventDialog({ calId: defaultCalendarId, start })
|
||||
}
|
||||
|
||||
function openEditEvent(ev: EventWithCalendar) {
|
||||
setEventDialog({ calId: ev.calendarId, event: ev, start: ev.startsAt })
|
||||
@@ -170,7 +198,7 @@ export default function CalendarPage() {
|
||||
await calendarApi.createEvent(calId, input)
|
||||
}
|
||||
setEventDialog(null)
|
||||
await loadEvents(calendars)
|
||||
await refreshEvents()
|
||||
} catch (e) {
|
||||
setError(e instanceof APIError ? e.message : 'Speichern fehlgeschlagen')
|
||||
}
|
||||
@@ -182,7 +210,7 @@ export default function CalendarPage() {
|
||||
await calendarApi.deleteEvent(deleteEvent.calId, deleteEvent.uid)
|
||||
setDeleteEvent(null)
|
||||
setEventDialog(null)
|
||||
await loadEvents(calendars)
|
||||
await refreshEvents()
|
||||
} catch (e) {
|
||||
setError(e instanceof APIError ? e.message : 'Löschen fehlgeschlagen')
|
||||
}
|
||||
@@ -196,7 +224,7 @@ export default function CalendarPage() {
|
||||
await calendarApi.create(name, color)
|
||||
}
|
||||
setCalDialog(null)
|
||||
await reloadAll()
|
||||
await loadCalendars()
|
||||
} catch (e) {
|
||||
setError(e instanceof APIError ? e.message : 'Speichern fehlgeschlagen')
|
||||
}
|
||||
@@ -207,7 +235,7 @@ export default function CalendarPage() {
|
||||
try {
|
||||
await calendarApi.remove(deleteCalendar.id)
|
||||
setDeleteCalendar(null)
|
||||
await reloadAll()
|
||||
await loadCalendars()
|
||||
} catch (e) {
|
||||
setError(e instanceof APIError ? e.message : 'Löschen fehlgeschlagen')
|
||||
}
|
||||
@@ -224,7 +252,7 @@ export default function CalendarPage() {
|
||||
if (!file || !calId) return
|
||||
try {
|
||||
await calendarApi.import(calId, file)
|
||||
await loadEvents(calendars)
|
||||
await refreshEvents()
|
||||
} catch (err) {
|
||||
setError(err instanceof APIError ? err.message : 'Import fehlgeschlagen')
|
||||
}
|
||||
@@ -238,11 +266,6 @@ export default function CalendarPage() {
|
||||
})
|
||||
}
|
||||
|
||||
function jumpToDay(day: Date) {
|
||||
setCursor(day)
|
||||
setViewMode('week')
|
||||
}
|
||||
|
||||
const periodLabel = viewMode === 'month'
|
||||
? `${monthLabels[cursor.getMonth()]} ${cursor.getFullYear()}`
|
||||
: viewMode === 'week'
|
||||
@@ -272,7 +295,7 @@ export default function CalendarPage() {
|
||||
...navBtnStyle, width: 30,
|
||||
color: showList ? 'var(--color-primary)' : 'var(--color-text-muted)',
|
||||
}}>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ display: 'block', margin: '0 auto' }}>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
|
||||
<circle cx="3.5" cy="6" r="1.2" fill="currentColor" /><circle cx="3.5" cy="12" r="1.2" fill="currentColor" /><circle cx="3.5" cy="18" r="1.2" fill="currentColor" />
|
||||
</svg>
|
||||
@@ -330,27 +353,42 @@ export default function CalendarPage() {
|
||||
fontSize: 18, lineHeight: 1, padding: '0 2px',
|
||||
}}>+</button>
|
||||
</div>
|
||||
{calendars.map(cal => (
|
||||
<div key={cal.id} className="aether-cal-row" style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, padding: '5px 4px',
|
||||
fontSize: 13, color: 'var(--color-text)', borderRadius: 6,
|
||||
}}>
|
||||
<input type="checkbox" checked={!hidden.has(cal.id)} onChange={() => toggleVisible(cal.id)}
|
||||
style={{ accentColor: cal.color, cursor: 'pointer' }} />
|
||||
<span onClick={() => toggleVisible(cal.id)} style={{
|
||||
flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer',
|
||||
opacity: hidden.has(cal.id) ? 0.45 : 1,
|
||||
{calendars.map(cal => {
|
||||
const on = !hidden.has(cal.id)
|
||||
return (
|
||||
<div key={cal.id} className="aether-cal-row" style={{
|
||||
display: 'flex', alignItems: 'center', gap: 9, padding: '6px 4px',
|
||||
fontSize: 13, color: 'var(--color-text)', borderRadius: 6,
|
||||
}}>
|
||||
{cal.name}
|
||||
</span>
|
||||
<CalMenu
|
||||
onRename={() => setCalDialog({ calendar: cal })}
|
||||
onExport={() => window.open(calendarApi.exportUrl(cal.id), '_blank')}
|
||||
onImport={() => triggerImport(cal.id)}
|
||||
onDelete={() => setDeleteCalendar(cal)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{/* Der Farbpunkt **ist** der Schalter: gefüllt = wird
|
||||
angezeigt, leerer Ring = ausgeblendet. Ein Kästchen
|
||||
daneben sagte dasselbe zweimal. */}
|
||||
<button
|
||||
onClick={() => toggleVisible(cal.id)}
|
||||
role="switch" aria-checked={on}
|
||||
title={on ? 'Ausblenden' : 'Einblenden'}
|
||||
style={{
|
||||
width: 15, height: 15, borderRadius: '50%', flexShrink: 0, padding: 0,
|
||||
border: `2px solid ${cal.color}`,
|
||||
background: on ? cal.color : 'transparent',
|
||||
cursor: 'pointer', transition: 'background 0.12s',
|
||||
}}
|
||||
/>
|
||||
<span onClick={() => toggleVisible(cal.id)} style={{
|
||||
flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer',
|
||||
opacity: on ? 1 : 0.45,
|
||||
}}>
|
||||
{cal.name}
|
||||
</span>
|
||||
<CalMenu
|
||||
onRename={() => setCalDialog({ calendar: cal })}
|
||||
onExport={() => window.open(calendarApi.exportUrl(cal.id), '_blank')}
|
||||
onImport={() => triggerImport(cal.id)}
|
||||
onDelete={() => setDeleteCalendar(cal)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{calendars.length === 0 && (
|
||||
<p style={{ fontSize: 12.5, color: 'var(--color-text-muted)', lineHeight: 1.5 }}>
|
||||
Noch kein Kalender – über <strong>+</strong> einen anlegen.
|
||||
@@ -361,10 +399,10 @@ export default function CalendarPage() {
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0, overflow: 'hidden', display: 'flex' }}>
|
||||
{viewMode === 'month' && (
|
||||
<MonthGrid cursor={cursor} byDay={byDay} onDayClick={openNewEvent} onEventClick={openEditEvent} onMore={jumpToDay} />
|
||||
<MonthGrid cursor={cursor} byDay={byDay} onOpenDay={setDayDialog} onEventClick={openEditEvent} />
|
||||
)}
|
||||
{viewMode === 'week' && (
|
||||
<WeekGrid cursor={cursor} byDay={byDay} onSlotClick={openNewEvent} onEventClick={openEditEvent} />
|
||||
<WeekGrid cursor={cursor} byDay={byDay} onSlotClick={openNewEvent} onOpenDay={setDayDialog} onEventClick={openEditEvent} />
|
||||
)}
|
||||
{viewMode === 'list' && (
|
||||
<ListAgenda events={allEvents} onEventClick={openEditEvent} />
|
||||
@@ -374,6 +412,15 @@ export default function CalendarPage() {
|
||||
|
||||
<input ref={importInputRef} type="file" accept=".ics,text/calendar" style={{ display: 'none' }} onChange={handleImportFile} />
|
||||
|
||||
{dayDialog && (
|
||||
<DayDialog
|
||||
day={dayDialog}
|
||||
events={byDay.get(dayKey(dayDialog)) ?? []}
|
||||
onPick={ev => { setDayDialog(null); openEditEvent(ev) }}
|
||||
onCreate={() => { const d = dayDialog; setDayDialog(null); openNewEvent(suggestStart(d)) }}
|
||||
onClose={() => setDayDialog(null)}
|
||||
/>
|
||||
)}
|
||||
{eventDialog && (
|
||||
<EventDialog
|
||||
event={eventDialog.event}
|
||||
@@ -400,7 +447,7 @@ export default function CalendarPage() {
|
||||
{deleteEvent && (
|
||||
<ConfirmDialog
|
||||
title="Termin löschen"
|
||||
message="Diesen Termin unwiderruflich löschen?"
|
||||
message="Diesen Termin unwiderruflich löschen? Bei einer Reihe verschwinden alle Termine der Reihe."
|
||||
confirmLabel="Löschen" danger
|
||||
onConfirm={confirmDeleteEvent}
|
||||
onCancel={() => setDeleteEvent(null)}
|
||||
@@ -478,8 +525,7 @@ function timeLabel(d: Date): string {
|
||||
|
||||
/** Ein Termin im Monatsraster bzw. in der ganztägigen Zeile der Woche.
|
||||
* `stopPropagation` ist hier das Entscheidende: Ohne das reichte der Klick
|
||||
* an die Tageszelle darunter durch, die sofort den Dialog „Neuer Termin"
|
||||
* öffnete – ein vorhandener Termin ließ sich dadurch gar nicht öffnen. */
|
||||
* an die Tageszelle darunter durch und öffnete den Tag statt den Termin. */
|
||||
function EventChip({ ev, onClick }: { ev: EventWithCalendar; onClick: () => void }) {
|
||||
return (
|
||||
<div
|
||||
@@ -495,16 +541,16 @@ function EventChip({ ev, onClick }: { ev: EventWithCalendar; onClick: () => void
|
||||
>
|
||||
{!ev.all_day && <span style={{ opacity: 0.75 }}>{timeLabel(ev.startsAt)}</span>}
|
||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{ev.summary || '(ohne Titel)'}</span>
|
||||
{ev.recurring && <span style={{ opacity: 0.7, flexShrink: 0 }}>↻</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MonthGrid({ cursor, byDay, onDayClick, onEventClick, onMore }: {
|
||||
function MonthGrid({ cursor, byDay, onOpenDay, onEventClick }: {
|
||||
cursor: Date
|
||||
byDay: Map<string, EventWithCalendar[]>
|
||||
onDayClick: (start: Date) => void
|
||||
onOpenDay: (day: Date) => void
|
||||
onEventClick: (ev: EventWithCalendar) => void
|
||||
onMore: (day: Date) => void
|
||||
}) {
|
||||
const gridStart = startOfWeek(startOfMonth(cursor))
|
||||
const today = new Date()
|
||||
@@ -532,7 +578,7 @@ function MonthGrid({ cursor, byDay, onDayClick, onEventClick, onMore }: {
|
||||
<div
|
||||
key={+day}
|
||||
className="aether-cal-cell"
|
||||
onClick={() => onDayClick(suggestStart(day))}
|
||||
onClick={() => onOpenDay(day)}
|
||||
style={{
|
||||
borderRight: '1px solid var(--color-border)', padding: 4, cursor: 'pointer',
|
||||
background: inMonth ? 'transparent' : 'var(--color-surface-2)',
|
||||
@@ -550,18 +596,12 @@ function MonthGrid({ cursor, byDay, onDayClick, onEventClick, onMore }: {
|
||||
</span>
|
||||
<div style={{ overflow: 'hidden', minWidth: 0 }}>
|
||||
{events.slice(0, 3).map(ev => (
|
||||
<EventChip key={ev.calendarId + ev.uid} ev={ev} onClick={() => onEventClick(ev)} />
|
||||
<EventChip key={eventKey(ev)} ev={ev} onClick={() => onEventClick(ev)} />
|
||||
))}
|
||||
{events.length > 3 && (
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onMore(day) }}
|
||||
style={{
|
||||
border: 'none', background: 'none', padding: '0 4px', cursor: 'pointer',
|
||||
fontSize: 10.5, color: 'var(--color-text-muted)',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 10.5, color: 'var(--color-text-muted)', paddingLeft: 4 }}>
|
||||
+{events.length - 3} weitere
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -624,10 +664,11 @@ function layoutDay(events: EventWithCalendar[], day: Date): Slot[] {
|
||||
}))
|
||||
}
|
||||
|
||||
function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
function WeekGrid({ cursor, byDay, onSlotClick, onOpenDay, onEventClick }: {
|
||||
cursor: Date
|
||||
byDay: Map<string, EventWithCalendar[]>
|
||||
onSlotClick: (start: Date) => void
|
||||
onOpenDay: (day: Date) => void
|
||||
onEventClick: (ev: EventWithCalendar) => void
|
||||
}) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null)
|
||||
@@ -643,7 +684,7 @@ function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
}, [])
|
||||
|
||||
const cols = `${GUTTER}px repeat(7, minmax(0, 1fr))`
|
||||
const nowTop = ((now: Date) => (now.getHours() * 60 + now.getMinutes()) / 60 * HOUR_H)(today)
|
||||
const nowTop = (today.getHours() * 60 + today.getMinutes()) / 60 * HOUR_H
|
||||
|
||||
/** Klick ins Raster: die angeklickte Stunde, nicht Mitternacht. */
|
||||
function slotFromClick(e: MouseEvent<HTMLDivElement>, day: Date) {
|
||||
@@ -657,13 +698,17 @@ function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
|
||||
{/* Kopfzeile */}
|
||||
{/* Kopfzeile – der Tag darin öffnet den Tag, wie im Monatsraster. */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: cols, borderBottom: '1px solid var(--color-border)', flexShrink: 0 }}>
|
||||
<div />
|
||||
{days.map(day => {
|
||||
const isToday = isSameDay(day, today)
|
||||
return (
|
||||
<div key={+day} style={{ padding: '6px 4px', textAlign: 'center', borderLeft: '1px solid var(--color-border)' }}>
|
||||
<button key={+day} onClick={() => onOpenDay(day)} className="aether-cal-cell" style={{
|
||||
padding: '6px 4px', textAlign: 'center', borderLeft: '1px solid var(--color-border)',
|
||||
background: 'transparent', border: 'none', borderLeftWidth: 1, borderLeftStyle: 'solid',
|
||||
borderLeftColor: 'var(--color-border)', cursor: 'pointer',
|
||||
}}>
|
||||
<div style={{ fontSize: 10.5, color: 'var(--color-text-muted)' }}>{weekdayLabels[(day.getDay() + 6) % 7]}</div>
|
||||
<span style={{
|
||||
fontSize: 14, fontWeight: isToday ? 700 : 500,
|
||||
@@ -673,20 +718,19 @@ function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
}}>
|
||||
{day.getDate()}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Ganztägige Termine – eigene Zeile über dem Stundenraster, so wie sie
|
||||
auch gemeint sind: ohne Uhrzeit. */}
|
||||
{/* Ganztägige Termine – eigene Zeile über dem Stundenraster. */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: cols, borderBottom: '1px solid var(--color-border)', flexShrink: 0, minHeight: 26 }}>
|
||||
<div style={{ fontSize: 9.5, color: 'var(--color-text-muted)', padding: '4px 6px', textAlign: 'right' }}>ganztg.</div>
|
||||
{days.map(day => (
|
||||
<div key={+day} className="aether-cal-cell" onClick={() => onSlotClick(suggestStart(day))}
|
||||
<div key={+day} className="aether-cal-cell" onClick={() => onOpenDay(day)}
|
||||
style={{ borderLeft: '1px solid var(--color-border)', padding: 2, cursor: 'pointer', minWidth: 0 }}>
|
||||
{(byDay.get(dayKey(day)) ?? []).filter(ev => ev.all_day).map(ev => (
|
||||
<EventChip key={ev.calendarId + ev.uid} ev={ev} onClick={() => onEventClick(ev)} />
|
||||
<EventChip key={eventKey(ev)} ev={ev} onClick={() => onEventClick(ev)} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
@@ -733,7 +777,7 @@ function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
|
||||
{slots.map(({ ev, top, height, col, cols: n }) => (
|
||||
<div
|
||||
key={ev.calendarId + ev.uid}
|
||||
key={eventKey(ev)}
|
||||
className="aether-cal-chip"
|
||||
onClick={e => { e.stopPropagation(); onEventClick(ev) }}
|
||||
title={`${ev.summary} – ${timeLabel(ev.startsAt)}`}
|
||||
@@ -746,7 +790,7 @@ function WeekGrid({ cursor, byDay, onSlotClick, onEventClick }: {
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 10.5, color: ev.color, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{ev.summary || '(ohne Titel)'}
|
||||
{ev.summary || '(ohne Titel)'}{ev.recurring ? ' ↻' : ''}
|
||||
</div>
|
||||
{height > 28 && (
|
||||
<div style={{ fontSize: 9.5, color: 'var(--color-text-muted)' }}>{timeLabel(ev.startsAt)}</div>
|
||||
@@ -794,7 +838,7 @@ function ListAgenda({ events, onEventClick }: { events: EventWithCalendar[]; onE
|
||||
{isSameDay(day, today) && ' · heute'}
|
||||
</div>
|
||||
{evs.map(ev => (
|
||||
<div key={ev.calendarId + ev.uid} className="aether-cal-cell" onClick={() => onEventClick(ev)} style={{
|
||||
<div key={eventKey(ev)} className="aether-cal-cell" onClick={() => onEventClick(ev)} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8,
|
||||
cursor: 'pointer', border: '1px solid var(--color-border)', marginBottom: 6,
|
||||
}}>
|
||||
@@ -803,7 +847,7 @@ function ListAgenda({ events, onEventClick }: { events: EventWithCalendar[]; onE
|
||||
{ev.all_day ? 'ganztg.' : timeLabel(ev.startsAt)}
|
||||
</span>
|
||||
<span style={{ fontSize: 13.5, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{ev.summary || '(ohne Titel)'}
|
||||
{ev.summary || '(ohne Titel)'}{ev.recurring ? ' ↻' : ''}
|
||||
</span>
|
||||
{ev.location && (
|
||||
<span style={{ fontSize: 12, color: 'var(--color-text-muted)', marginLeft: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
|
||||
Reference in new issue
Block a user