Kalender (Calendar)
Zweck
/calendar liefert eine Multi-View-Kalender-Ansicht mit:
- Monats- (
MonthView), Wochen- (WeekView), Tages- (DayView) und Agenda- (AgendaView) Sichten. - Sidebar mit verbundenen Mail-Konten (
MailboxEmployee) — Microsoft-365-Kalender werden automatisch eingelesen. - Standardfarben für Kalender-Einträge aus einem Default-Pool (
DEFAULT_CALENDAR_COLORS). - Mobile-Default: auf kleinen Bildschirmen wechselt die View automatisch zu
agenda(Time-Grid waere unbedienbar). - Popout-Modus (
/calendar-popout) — Vollbild ohne SpeamCore-Layout, für einen zweiten Bildschirm.
EventFormModal legt neue Termine an oder bearbeitet bestehende — über CalendarEvent-Endpoints.
Voraussetzungen
Berechtigungen (CASL)
| Action | Subject | Wirkung | Keycloak-Rolle |
|---|---|---|---|
view | FE_Calendar, CalendarEvent | Modul aufrufbar | — |
create/update/delete | CalendarEvent | Termine pflegen | APP_SPEAMCORE_CREATE/UPDATE/DELETE_CALENDAR_EVENT |
view | MailboxEmployee | Sidebar mit verbundenen Kalendern | APP_SPEAMCORE_VIEW_MAILBOX_EMPLOYEE |
Schritt-für-Schritt-Anleitung
Termin erstellen
- Kalender (
/calendar) → in der gewuenschten View einen freien Slot anklicken. EventFormModalöffnet sich vorbefuellt mit Datum/Zeit.- Titel, Beschreibung, Teilnehmer, Anfangs-/Endzeit, Erinnerung pflegen.
- Speichern →
POST /api/calendar-events.
View wechseln
CalendarHeader bietet Buttons für Monats/Wochen/Tages/Agenda. Mobile defaults auf agenda.
Mailbox-Sidebar nutzen
CalendarSidebar listet alle verbundenen Mailboxes — Toggle-Switches blenden die Kalender ein/aus.
Popout-Fenster
/calendar-popout öffnet die Ansicht in einem eigenen Browser-Fenster ohne HomeLayout — geeignet für Dashboards.
Toolbar (Detail-Seite)
Schlanke Toolbar oben rechts:
| Icon | Aktion (aria-label) | CASL | Wirkung |
|---|---|---|---|
| ← | Zurückgehen | — | Zurück zur Liste. |
| 🏠 | Zur Startseite gehen | — | Springt auf das Dashboard / /. |
| ⏮/◀/▶/⏭ | Pagination | — | Navigation durch die gefilterte Liste — Massen-Bearbeitung ohne Liste-Sprung. |
Globale Floating-Drawer (links)
Wie auf jeder Detail-Seite verfuegbar — siehe Floating-Quickbar:
- KAL. (Mini-Kalender)
- ZEIT (Persoenliche Wochen-Arbeitszeit)
- ARBEIT (Eigene bevorstehende Aufträge)
UI-Elemente
Komponenten
| Komponente | Funktion |
|---|---|
CalendarHeader | View-Switch und Navigation (vor/zurueck/heute) |
MonthView, WeekView, DayView, AgendaView | Render-Komponenten je View |
EventFormModal | Termin-Erfassung |
CalendarSidebar | Mailbox-Liste mit Toggle |
Hooks
| Hook | Funktion |
|---|---|
useCalendarNavigation | Datum-Navigation und Range-Berechnung |
useCalendarEvents | Daten-Laden je Datum-Range und aktiven Mailboxes |
Wiederverwendbare Konzepte
Verknuepfungen zu anderen Modulen
- Mail-Konten — Quelle für Outlook-Kalender.
- Mail — verlinkt mit Calendar-Events über
Mail.calendarEvent(Phase 1). - Workorders — Termin-Verknuepfungen mit Aufträgen.
- Mitarbeiter — Teilnehmer.
Häufige Fehler und Lösungen
| Fehler | Lösung |
|---|---|
| Microsoft-365-Termine fehlen | MailboxEmployee nicht aktiviert oder Graph-Token abgelaufen — in Mail-Konten reauthentifizieren. |
| Mobile-Ansicht zeigt nur Agenda | Per Design — Time-Grid waere zu schmal. |
| Termin im Popout wird nicht gespeichert | Cookie/Session-Sharing zwischen Fenstern erforderlich. |
API/Schnittstellen
| Methode | Endpoint | Zweck | CASL |
|---|---|---|---|
GET | /api/calendar-events?startDate&endDate | Liste | view CalendarEvent |
POST | /api/calendar-events | Anlegen | create CalendarEvent |
PATCH | /api/calendar-events/:id | Ändern | update CalendarEvent |
DELETE | /api/calendar-events/:id | Soft-Delete | delete CalendarEvent |
GET | /api/mailbox-employees?filter[employeeId] | Sidebar | view MailboxEmployee |
Verwandte Module
- Buchungsseiten (CalendarPage) — Calendly-ähnliche öffentliche Buchungs-Slots pro Mitarbeiter. Buchungen erscheinen automatisch als Termine in diesem Kalender hier.
Versionshinweise
- 2026-04-30: Initiale Veröffentlichung.
- 2026-05-21 (Welle 138): Querverweis auf das neue Modul Buchungsseiten (CalendarPage) ergänzt — externe Gäste können seitdem Termine bei Mitarbeitern buchen, die dann hier im Kalender als reguläre Termine erscheinen.