diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue index 8d244b4..959f237 100644 --- a/frontend/src/views/CalendarView.vue +++ b/frontend/src/views/CalendarView.vue @@ -21,7 +21,16 @@
- + + +
@@ -293,8 +302,31 @@ const calendarOptions = computed(() => ({ select: onDateSelect, eventDrop: onEventDrop, eventResize: onEventDrop, + displayEventEnd: true, + eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false }, })) +function formatEventTime(ev) { + if (!ev.start) return '' + const fmt = d => d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) + if (!ev.end) return fmt(ev.start) + return `${fmt(ev.start)}–${fmt(ev.end)}` +} + +function eventTooltip(ev) { + const p = ev.extendedProps + const parts = [ev.title] + if (p.all_day) parts.push('Ganztaegig') + else if (ev.start) { + const fmt = d => d.toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' }) + parts.push(ev.end ? `${fmt(ev.start)}–${fmt(ev.end)}` : fmt(ev.start)) + } + if (p.recurrence_rule) parts.push('Wiederholung') + if (p.location) parts.push('Ort: ' + p.location) + if (p.description) parts.push(p.description) + return parts.join(' • ') +} + async function fetchEvents(info, successCallback, failureCallback) { try { const all = [] @@ -656,4 +688,8 @@ onMounted(async () => { .ical-url { font-size: 0.8rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .ical-url code { background: var(--p-surface-100); padding: 0.25rem 0.5rem; border-radius: 4px; word-break: break-all; } .hint-badge { font-size: 0.75rem; color: var(--p-primary-700); display: inline-flex; gap: 0.25rem; align-items: center; } +.fc-event-content-inner { display: flex; align-items: center; gap: 0.2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 2px; } +.fc-event-content-inner .fc-icon { flex-shrink: 0; font-size: 0.85em; } +.fc-event-content-inner .fc-time { flex-shrink: 0; font-weight: 600; font-size: 0.8em; opacity: 0.9; } +.fc-event-content-inner .fc-title { overflow: hidden; text-overflow: ellipsis; }