feat: Kalender mit FullCalendar - Woche/Monat/Tag, Drag&Drop, Wiederholungen

Kalender-UI komplett neu aufgesetzt mit FullCalendar:
* Drei Ansichten: Monat, Woche, Tag - ueber Toolbar wechselbar
* Drag & Drop: Termine zwischen Tagen verschieben
* Resize: Termindauer direkt am Rand ziehen
* Sidebar mit aktiven Kalendern (Checkbox fuers Ein-/Ausblenden)
* Deutsch lokalisiert, Woche startet Mo, Wochennummern
* Heute-Marker + Jetzt-Linie in Woche/Tag

Terminbearbeitung:
* Titel, Ort, Beschreibung, Zeitraum (oder ganztaegig)
* Wiederholungs-Editor: taeglich, woechentlich (mit Wochentagen),
  monatlich (auch "jeden 2. Mittwoch"), jaehrlich - jeweils mit
  Intervall, Enddatum oder Wiederholungsanzahl
* RRULE-Feld (RFC 5545) wird generiert und vom rrule-Plugin fuer
  die Anzeige im Kalender gerendert

Backend:
* CalendarEvent: description + location Spalten ergaenzt
* Calendar: ical_password_hash fuer passwortgeschuetzte Abo-Links
* /calendars/<id>/ical-link unterstuetzt password + clear_password
* DELETE /calendars/<id>/ical-link zum Zurueckziehen
* ical_export erzwingt HTTP Basic Auth wenn Passwort gesetzt -
  DAVx5, Apple Cal, Thunderbird verstehen das out-of-the-box

Frontend-Deps: @fullcalendar/{core,daygrid,timegrid,interaction,
rrule,vue3}, rrule - ca. 150KB Bundle-Overhead.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/views/CalendarView.vue

@@ -4,44 +4,24 @@
       <h2>Kalender</h2>
       <div class="header-actions">
         <Button icon="pi pi-plus" label="Neuer Kalender" size="small" outlined @click="showNewCalendar = true" />
-        <Button icon="pi pi-plus" label="Neues Event" size="small" @click="openNewEvent" />
+        <Button icon="pi pi-plus" label="Neuer Termin" size="small" @click="openNewEvent()" />
       </div>
     </div>
 
     <div class="calendar-layout">
       <aside class="calendar-sidebar">
+        <h4>Kalender</h4>
         <div v-for="cal in calendars" :key="cal.id" class="calendar-item">
+          <input type="checkbox" v-model="visibleCalendars[cal.id]" @change="refreshEvents" />
           <div class="calendar-color" :style="{ background: cal.color }"></div>
-          <span>{{ cal.name }}</span>
-          <span v-if="cal.owner_name" class="shared-label">({{ cal.owner_name }})</span>
-          <Button icon="pi pi-ellipsis-v" text size="small" @click="openCalendarMenu(cal, $event)" />
+          <span class="cal-name">{{ cal.name }}</span>
+          <span v-if="cal.permission !== 'owner'" class="shared-label">(geteilt)</span>
+          <Button icon="pi pi-ellipsis-v" text size="small" @click.stop="openCalendarMenu(cal)" />
         </div>
       </aside>
 
       <div class="calendar-main">
-        <div class="cal-nav">
-          <Button icon="pi pi-chevron-left" text @click="changeMonth(-1)" />
-          <h3>{{ currentMonthLabel }}</h3>
-          <Button icon="pi pi-chevron-right" text @click="changeMonth(1)" />
-          <Button label="Heute" text size="small" @click="goToday" />
-        </div>
-
-        <div class="cal-grid">
-          <div class="cal-header" v-for="day in weekDays" :key="day">{{ day }}</div>
-          <div
-            v-for="(cell, i) in calendarCells"
-            :key="i"
-            class="cal-cell"
-            :class="{ 'other-month': !cell.currentMonth, 'today': cell.isToday }"
-            @click="openNewEventOnDate(cell.date)"
-          >
-            <span class="cell-day">{{ cell.day }}</span>
-            <div v-for="evt in cell.events" :key="evt.id" class="cell-event"
-                 :style="{ background: evt.color }" @click.stop="openEditEvent(evt)">
-              {{ evt.summary }}
-            </div>
-          </div>
-        </div>
+        <FullCalendar ref="fcRef" :options="calendarOptions" />
       </div>
     </div>
 
@@ -62,7 +42,8 @@
     </Dialog>
 
     <!-- Event Dialog -->
-    <Dialog v-model:visible="showEventDialog" :header="editingEvent ? 'Event bearbeiten' : 'Neues Event'" modal :style="{ width: '500px' }">
+    <Dialog v-model:visible="showEventDialog" :header="editingEvent ? 'Termin bearbeiten' : 'Neuer Termin'"
+            modal :style="{ width: '560px' }">
       <div class="field">
         <label>Titel</label>
         <InputText v-model="eventForm.summary" fluid autofocus />
@@ -74,16 +55,73 @@
       <div class="field-row">
         <div class="field">
           <label>Start</label>
-          <InputText v-model="eventForm.dtstart" type="datetime-local" fluid />
+          <InputText v-model="eventForm.dtstart" :type="eventForm.all_day ? 'date' : 'datetime-local'" fluid />
         </div>
         <div class="field">
           <label>Ende</label>
-          <InputText v-model="eventForm.dtend" type="datetime-local" fluid />
+          <InputText v-model="eventForm.dtend" :type="eventForm.all_day ? 'date' : 'datetime-local'" fluid />
         </div>
       </div>
       <div class="field">
         <label><input type="checkbox" v-model="eventForm.all_day" /> Ganztaegig</label>
       </div>
+      <div class="field">
+        <label>Ort</label>
+        <InputText v-model="eventForm.location" fluid />
+      </div>
+      <div class="field">
+        <label>Beschreibung</label>
+        <Textarea v-model="eventForm.description" rows="3" fluid />
+      </div>
+
+      <!-- Recurrence editor -->
+      <div class="field">
+        <label>Wiederholung</label>
+        <Select v-model="recurFreq" :options="recurFreqOptions" optionLabel="label" optionValue="value" fluid />
+      </div>
+      <div v-if="recurFreq !== 'none'" class="recur-details">
+        <div class="field-row">
+          <div class="field">
+            <label>Alle</label>
+            <InputText v-model.number="recurInterval" type="number" min="1" style="width: 80px" />
+            <span class="recur-unit">{{ recurUnitLabel }}</span>
+          </div>
+          <div class="field">
+            <label>Ende</label>
+            <Select v-model="recurEndMode" :options="recurEndOptions" optionLabel="label" optionValue="value" />
+          </div>
+        </div>
+        <div v-if="recurEndMode === 'count'" class="field">
+          <label>Nach X Wiederholungen</label>
+          <InputText v-model.number="recurCount" type="number" min="1" style="width: 100px" />
+        </div>
+        <div v-if="recurEndMode === 'until'" class="field">
+          <label>Bis Datum</label>
+          <InputText v-model="recurUntil" type="date" style="width: 180px" />
+        </div>
+        <div v-if="recurFreq === 'weekly'" class="field">
+          <label>An Wochentagen</label>
+          <div class="weekday-row">
+            <label v-for="d in weekdayBtns" :key="d.value" class="weekday-btn" :class="{ active: recurWeekdays.includes(d.value) }">
+              <input type="checkbox" :value="d.value" v-model="recurWeekdays" /> {{ d.label }}
+            </label>
+          </div>
+        </div>
+        <div v-if="recurFreq === 'monthly'" class="field">
+          <label><input type="checkbox" v-model="recurByDayOfWeek" /> Am X. Wochentag des Monats (z.B. "jeden 2. Mittwoch")</label>
+        </div>
+        <div v-if="recurFreq === 'monthly' && recurByDayOfWeek" class="field-row">
+          <div class="field">
+            <label>Position</label>
+            <Select v-model="recurBySetPos" :options="setPosOptions" optionLabel="label" optionValue="value" />
+          </div>
+          <div class="field">
+            <label>Wochentag</label>
+            <Select v-model="recurByDay" :options="weekdayBtns" optionLabel="label" optionValue="value" />
+          </div>
+        </div>
+      </div>
+
       <template #footer>
         <Button v-if="editingEvent" label="Loeschen" severity="danger" text @click="confirmDeleteEvent = true" />
         <Button label="Abbrechen" text @click="showEventDialog = false" />
@@ -91,12 +129,12 @@
       </template>
     </Dialog>
 
-    <!-- Calendar Context Menu -->
-    <Dialog v-model:visible="showCalMenu" header="Kalender-Optionen" modal :style="{ width: '400px' }">
+    <!-- Calendar Menu -->
+    <Dialog v-model:visible="showCalMenu" header="Kalender-Optionen" modal :style="{ width: '480px' }">
       <div v-if="selectedCal" class="cal-menu-content">
         <p><strong>{{ selectedCal.name }}</strong></p>
 
-        <div class="field">
+        <div v-if="selectedCal.permission === 'owner'" class="field">
           <label>Mit Benutzer teilen</label>
           <div class="share-row">
             <InputText v-model="shareUsername" placeholder="Benutzername" fluid />
@@ -105,11 +143,24 @@
           </div>
         </div>
 
-        <div v-if="selectedCal.permission === 'owner'" class="field">
-          <Button label="iCal-Link generieren" icon="pi pi-link" outlined size="small" @click="generateIcalLink" />
-          <div v-if="icalUrl" class="ical-url">
+        <div v-if="selectedCal.permission === 'owner'" class="field ical-block">
+          <label>iCal-Abo-Link</label>
+          <div v-if="!selectedCal.ical_token">
+            <InputText v-model="icalPassword" placeholder="Passwort (optional)" type="password" style="width: 220px" />
+            <Button label="Link erstellen" icon="pi pi-link" outlined size="small" @click="generateIcalLink" style="margin-left: 0.5rem" />
+          </div>
+          <div v-else class="ical-url">
             <code>{{ fullIcalUrl }}</code>
-            <Button icon="pi pi-copy" text size="small" @click="copyIcal" />
+            <Button icon="pi pi-copy" text size="small" @click="copyIcal" title="Kopieren" />
+            <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
+              <span v-if="selectedCal.ical_has_password" class="hint-badge">
+                <i class="pi pi-lock"></i> Passwortgeschuetzt
+              </span>
+              <InputText v-model="icalPassword" placeholder="Passwort aendern" type="password" style="width: 200px" />
+              <Button label="Passwort setzen" size="small" @click="setIcalPassword" />
+              <Button v-if="selectedCal.ical_has_password" label="Passwort entfernen" size="small" text @click="clearIcalPassword" />
+              <Button label="Link zurueckziehen" severity="danger" size="small" text @click="revokeIcal" />
+            </div>
           </div>
         </div>
 
@@ -118,39 +169,44 @@
       </div>
     </Dialog>
 
-    <!-- Confirm delete event -->
-    <Dialog v-model:visible="confirmDeleteEvent" header="Event loeschen" modal :style="{ width: '400px' }">
+    <Dialog v-model:visible="confirmDeleteEvent" header="Termin loeschen" modal :style="{ width: '400px' }">
       <p>Moechtest du <strong>{{ editingEvent?.summary }}</strong> wirklich loeschen?</p>
       <template #footer>
         <Button label="Abbrechen" text @click="confirmDeleteEvent = false" />
-        <Button label="Loeschen" severity="danger" @click="deleteEvent; confirmDeleteEvent = false" />
+        <Button label="Loeschen" severity="danger" @click="deleteEvent()" />
       </template>
     </Dialog>
 
-    <!-- Confirm delete calendar -->
     <Dialog v-model:visible="confirmDeleteCal" header="Kalender loeschen" modal :style="{ width: '400px' }">
-      <p>Moechtest du den Kalender <strong>{{ selectedCal?.name }}</strong> mit allen Events loeschen?</p>
+      <p>Moechtest du den Kalender <strong>{{ selectedCal?.name }}</strong> mit allen Terminen loeschen?</p>
       <template #footer>
         <Button label="Abbrechen" text @click="confirmDeleteCal = false" />
-        <Button label="Loeschen" severity="danger" @click="deleteCalendar(); confirmDeleteCal = false" />
+        <Button label="Loeschen" severity="danger" @click="deleteCalendar()" />
       </template>
     </Dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useToast } from 'primevue/usetoast'
 import apiClient from '../api/client'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
 import Select from 'primevue/select'
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import rrulePlugin from '@fullcalendar/rrule'
+import deLocale from '@fullcalendar/core/locales/de'
 
 const toast = useToast()
 const calendars = ref([])
-const allEvents = ref([])
-const currentDate = ref(new Date())
+const visibleCalendars = reactive({})
+const fcRef = ref(null)
 
 const showNewCalendar = ref(false)
 const newCalName = ref('')
@@ -158,92 +214,237 @@ const newCalColor = ref('#3788d8')
 
 const showEventDialog = ref(false)
 const editingEvent = ref(null)
-const eventForm = ref({ summary: '', calendar_id: null, dtstart: '', dtend: '', all_day: false })
+const eventForm = ref({
+  summary: '', description: '', location: '',
+  calendar_id: null, dtstart: '', dtend: '', all_day: false,
+})
+
+// Recurrence editor state
+const recurFreq = ref('none')
+const recurInterval = ref(1)
+const recurEndMode = ref('forever')
+const recurCount = ref(10)
+const recurUntil = ref('')
+const recurWeekdays = ref([])
+const recurByDayOfWeek = ref(false)
+const recurBySetPos = ref(1)
+const recurByDay = ref('MO')
+
+const recurFreqOptions = [
+  { label: 'Keine Wiederholung', value: 'none' },
+  { label: 'Taeglich', value: 'daily' },
+  { label: 'Woechentlich', value: 'weekly' },
+  { label: 'Monatlich', value: 'monthly' },
+  { label: 'Jaehrlich', value: 'yearly' },
+]
+const recurEndOptions = [
+  { label: 'Kein Ende', value: 'forever' },
+  { label: 'Bis Datum', value: 'until' },
+  { label: 'Nach Anzahl', value: 'count' },
+]
+const weekdayBtns = [
+  { label: 'Mo', value: 'MO' }, { label: 'Di', value: 'TU' },
+  { label: 'Mi', value: 'WE' }, { label: 'Do', value: 'TH' },
+  { label: 'Fr', value: 'FR' }, { label: 'Sa', value: 'SA' }, { label: 'So', value: 'SU' },
+]
+const setPosOptions = [
+  { label: '1.', value: 1 }, { label: '2.', value: 2 }, { label: '3.', value: 3 },
+  { label: '4.', value: 4 }, { label: 'letzter', value: -1 },
+]
+const recurUnitLabel = computed(() => ({
+  daily: 'Tag(e)', weekly: 'Woche(n)', monthly: 'Monat(e)', yearly: 'Jahr(e)',
+}[recurFreq.value] || ''))
 
 const showCalMenu = ref(false)
 const selectedCal = ref(null)
 const shareUsername = ref('')
 const sharePermission = ref('read')
-const icalUrl = ref('')
+const icalPassword = ref('')
 const confirmDeleteEvent = ref(false)
 const confirmDeleteCal = ref(false)
 const permOptions = [{ label: 'Lesen', value: 'read' }, { label: 'Lesen+Schreiben', value: 'readwrite' }]
 
-const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
-
 const ownCalendars = computed(() => calendars.value.filter(c => c.permission === 'owner'))
-const fullIcalUrl = computed(() => icalUrl.value ? `${window.location.origin}${icalUrl.value}` : '')
+const fullIcalUrl = computed(() =>
+  selectedCal.value?.ical_token ? `${window.location.origin}/ical/${selectedCal.value.ical_token}` : ''
+)
 
-const currentMonthLabel = computed(() => {
-  return currentDate.value.toLocaleString('de-DE', { month: 'long', year: 'numeric' })
-})
+// FullCalendar configuration
+const calendarOptions = computed(() => ({
+  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin],
+  initialView: 'dayGridMonth',
+  headerToolbar: {
+    left: 'prev,next today',
+    center: 'title',
+    right: 'dayGridMonth,timeGridWeek,timeGridDay',
+  },
+  locale: deLocale,
+  firstDay: 1,
+  nowIndicator: true,
+  editable: true,
+  droppable: true,
+  eventDurationEditable: true,
+  selectable: true,
+  weekNumbers: true,
+  height: 'auto',
+  allDaySlot: true,
+  events: fetchEvents,
+  eventClick: onEventClick,
+  select: onDateSelect,
+  eventDrop: onEventDrop,
+  eventResize: onEventDrop,
+}))
 
-const calendarCells = computed(() => {
-  const year = currentDate.value.getFullYear()
-  const month = currentDate.value.getMonth()
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-  const today = new Date()
-
-  let startDay = (firstDay.getDay() + 6) % 7
-  const cells = []
-
-  for (let i = startDay - 1; i >= 0; i--) {
-    const d = new Date(year, month, -i)
-    cells.push({ date: d, day: d.getDate(), currentMonth: false, isToday: false, events: [] })
+async function fetchEvents(info, successCallback, failureCallback) {
+  try {
+    const all = []
+    for (const cal of calendars.value) {
+      if (visibleCalendars[cal.id] === false) continue
+      const res = await apiClient.get(`/calendars/${cal.id}/events`, {
+        params: { start: info.startStr, end: info.endStr },
+      })
+      for (const e of res.data) {
+        all.push(toFcEvent(e, cal))
+      }
+    }
+    successCallback(all)
+  } catch (err) {
+    failureCallback(err)
   }
-
-  for (let d = 1; d <= lastDay.getDate(); d++) {
-    const date = new Date(year, month, d)
-    const isToday = date.toDateString() === today.toDateString()
-    const dayEvents = allEvents.value.filter(e => {
-      const start = new Date(e.dtstart)
-      return start.getFullYear() === year && start.getMonth() === month && start.getDate() === d
-    })
-    cells.push({ date, day: d, currentMonth: true, isToday, events: dayEvents })
-  }
-
-  while (cells.length < 42) {
-    const d = new Date(year, month + 1, cells.length - startDay - lastDay.getDate() + 1)
-    cells.push({ date: d, day: d.getDate(), currentMonth: false, isToday: false, events: [] })
-  }
-
-  return cells
-})
-
-function changeMonth(delta) {
-  const d = new Date(currentDate.value)
-  d.setMonth(d.getMonth() + delta)
-  currentDate.value = d
-  loadEvents()
 }
 
-function goToday() {
-  currentDate.value = new Date()
-  loadEvents()
+function toFcEvent(e, cal) {
+  const fc = {
+    id: String(e.id),
+    title: e.summary,
+    color: cal.color,
+    allDay: e.all_day,
+    extendedProps: { ...e, _cal: cal },
+  }
+  if (e.recurrence_rule) {
+    // FullCalendar rrule plugin consumes the RRULE together with dtstart
+    fc.rrule = {
+      freq: extractFreq(e.recurrence_rule),
+      dtstart: e.dtstart,
+      ...parseRRule(e.recurrence_rule),
+    }
+    if (e.dtend && e.dtstart) {
+      const ms = new Date(e.dtend).getTime() - new Date(e.dtstart).getTime()
+      if (ms > 0) fc.duration = msToDuration(ms)
+    }
+  } else {
+    fc.start = e.dtstart
+    fc.end = e.dtend
+  }
+  return fc
+}
+
+function extractFreq(rrule) {
+  const m = /FREQ=([A-Z]+)/.exec(rrule)
+  return m ? m[1].toLowerCase() : 'daily'
+}
+
+function parseRRule(rrule) {
+  const out = {}
+  const parts = rrule.replace(/^RRULE:/i, '').split(';')
+  for (const p of parts) {
+    const [k, v] = p.split('=')
+    if (!v) continue
+    const key = k.toUpperCase()
+    if (key === 'INTERVAL') out.interval = parseInt(v)
+    else if (key === 'COUNT') out.count = parseInt(v)
+    else if (key === 'UNTIL') out.until = v
+    else if (key === 'BYDAY') out.byweekday = v.split(',')
+    else if (key === 'BYSETPOS') out.bysetpos = v.split(',').map(Number)
+  }
+  return out
+}
+
+function msToDuration(ms) {
+  const hours = Math.floor(ms / 3600000)
+  const minutes = Math.floor((ms % 3600000) / 60000)
+  return { hours, minutes }
+}
+
+function buildRRule() {
+  if (recurFreq.value === 'none') return ''
+  const parts = [`FREQ=${recurFreq.value.toUpperCase()}`]
+  if (recurInterval.value > 1) parts.push(`INTERVAL=${recurInterval.value}`)
+  if (recurEndMode.value === 'count') parts.push(`COUNT=${recurCount.value}`)
+  if (recurEndMode.value === 'until' && recurUntil.value) {
+    parts.push(`UNTIL=${recurUntil.value.replace(/-/g, '')}T235959Z`)
+  }
+  if (recurFreq.value === 'weekly' && recurWeekdays.value.length) {
+    parts.push(`BYDAY=${recurWeekdays.value.join(',')}`)
+  }
+  if (recurFreq.value === 'monthly' && recurByDayOfWeek.value) {
+    parts.push(`BYDAY=${recurByDay.value}`)
+    parts.push(`BYSETPOS=${recurBySetPos.value}`)
+  }
+  return parts.join(';')
+}
+
+function loadRRuleIntoForm(rrule) {
+  if (!rrule) {
+    recurFreq.value = 'none'
+    return
+  }
+  const parsed = parseRRule(rrule)
+  recurFreq.value = extractFreq(rrule)
+  recurInterval.value = parsed.interval || 1
+  if (parsed.count) { recurEndMode.value = 'count'; recurCount.value = parsed.count }
+  else if (parsed.until) {
+    recurEndMode.value = 'until'
+    // UNTIL=20261231T235959Z -> 2026-12-31
+    const d = parsed.until.slice(0, 8)
+    recurUntil.value = `${d.slice(0, 4)}-${d.slice(4, 6)}-${d.slice(6, 8)}`
+  } else recurEndMode.value = 'forever'
+  recurWeekdays.value = parsed.byweekday || []
+  if (parsed.bysetpos) {
+    recurByDayOfWeek.value = true
+    recurBySetPos.value = parsed.bysetpos[0]
+    recurByDay.value = (parsed.byweekday || ['MO'])[0]
+  } else {
+    recurByDayOfWeek.value = false
+  }
+}
+
+function onEventClick(info) {
+  const e = info.event.extendedProps
+  openEditEvent(e)
+}
+
+function onDateSelect(info) {
+  openNewEvent(info.start, info.end, info.allDay)
+}
+
+async function onEventDrop(info) {
+  const e = info.event.extendedProps
+  try {
+    await apiClient.put(`/events/${e.id}`, {
+      dtstart: toServerISO(info.event.start, e.all_day),
+      dtend: info.event.end ? toServerISO(info.event.end, e.all_day) : null,
+    })
+    toast.add({ severity: 'success', summary: 'Verschoben', life: 2000 })
+  } catch (err) {
+    info.revert()
+    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 4000 })
+  }
+}
+
+function refreshEvents() {
+  fcRef.value?.getApi().refetchEvents()
 }
 
 async function loadCalendars() {
   const res = await apiClient.get('/calendars')
   calendars.value = res.data
+  for (const c of calendars.value) {
+    if (!(c.id in visibleCalendars)) visibleCalendars[c.id] = true
+  }
   if (!calendars.value.length) {
     await apiClient.post('/calendars', { name: 'Mein Kalender', color: '#3788d8' })
-    const res2 = await apiClient.get('/calendars')
-    calendars.value = res2.data
-  }
-}
-
-async function loadEvents() {
-  allEvents.value = []
-  for (const cal of calendars.value) {
-    const year = currentDate.value.getFullYear()
-    const month = currentDate.value.getMonth()
-    const start = new Date(year, month - 1, 1).toISOString()
-    const end = new Date(year, month + 2, 0).toISOString()
-    try {
-      const res = await apiClient.get(`/calendars/${cal.id}/events`, { params: { start, end } })
-      allEvents.value.push(...res.data.map(e => ({ ...e, color: cal.color, calendarName: cal.name })))
-    } catch { /* skip */ }
+    await loadCalendars()
   }
 }
 
@@ -253,33 +454,23 @@ async function createCalendar() {
   showNewCalendar.value = false
   newCalName.value = ''
   await loadCalendars()
+  refreshEvents()
 }
 
-function openNewEvent() {
+function openNewEvent(start, end, allDay = false) {
   editingEvent.value = null
-  const now = new Date()
-  const later = new Date(now.getTime() + 3600000)
+  const now = start || new Date()
+  const later = end || new Date(now.getTime() + 3600000)
   eventForm.value = {
     summary: '',
+    description: '',
+    location: '',
     calendar_id: ownCalendars.value[0]?.id,
-    dtstart: toLocalISO(now),
-    dtend: toLocalISO(later),
-    all_day: false,
-  }
-  showEventDialog.value = true
-}
-
-function openNewEventOnDate(date) {
-  editingEvent.value = null
-  const start = new Date(date); start.setHours(9, 0)
-  const end = new Date(date); end.setHours(10, 0)
-  eventForm.value = {
-    summary: '',
-    calendar_id: ownCalendars.value[0]?.id,
-    dtstart: toLocalISO(start),
-    dtend: toLocalISO(end),
-    all_day: false,
+    dtstart: toLocalISO(now, allDay),
+    dtend: toLocalISO(later, allDay),
+    all_day: allDay,
   }
+  loadRRuleIntoForm('')
   showEventDialog.value = true
 }
 
@@ -287,37 +478,57 @@ function openEditEvent(evt) {
   editingEvent.value = evt
   eventForm.value = {
     summary: evt.summary,
+    description: evt.description || '',
+    location: evt.location || '',
     calendar_id: evt.calendar_id,
-    dtstart: toLocalISO(new Date(evt.dtstart)),
-    dtend: toLocalISO(new Date(evt.dtend)),
+    dtstart: toLocalISO(new Date(evt.dtstart), evt.all_day),
+    dtend: evt.dtend ? toLocalISO(new Date(evt.dtend), evt.all_day) : '',
     all_day: evt.all_day,
   }
+  loadRRuleIntoForm(evt.recurrence_rule)
   showEventDialog.value = true
 }
 
 async function saveEvent() {
   if (!eventForm.value.summary.trim()) return
-  const payload = { ...eventForm.value }
-
-  if (editingEvent.value) {
-    await apiClient.put(`/events/${editingEvent.value.id}`, payload)
-  } else {
-    await apiClient.post(`/calendars/${payload.calendar_id}/events`, payload)
+  const payload = {
+    summary: eventForm.value.summary.trim(),
+    description: eventForm.value.description,
+    location: eventForm.value.location,
+    dtstart: fromLocalISO(eventForm.value.dtstart, eventForm.value.all_day),
+    dtend: eventForm.value.dtend ? fromLocalISO(eventForm.value.dtend, eventForm.value.all_day) : null,
+    all_day: eventForm.value.all_day,
+    recurrence_rule: buildRRule(),
+    calendar_id: eventForm.value.calendar_id,
+  }
+  try {
+    if (editingEvent.value) {
+      await apiClient.put(`/events/${editingEvent.value.id}`, payload)
+    } else {
+      await apiClient.post(`/calendars/${payload.calendar_id}/events`, payload)
+    }
+    showEventDialog.value = false
+    refreshEvents()
+  } catch (err) {
+    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 5000 })
   }
-  showEventDialog.value = false
-  await loadEvents()
 }
 
 async function deleteEvent() {
   if (!editingEvent.value) return
-  await apiClient.delete(`/events/${editingEvent.value.id}`)
-  showEventDialog.value = false
-  await loadEvents()
+  try {
+    await apiClient.delete(`/events/${editingEvent.value.id}`)
+    confirmDeleteEvent.value = false
+    showEventDialog.value = false
+    refreshEvents()
+  } catch (err) {
+    toast.add({ severity: 'error', summary: 'Fehler', detail: err.response?.data?.error, life: 5000 })
+  }
 }
 
 function openCalendarMenu(cal) {
   selectedCal.value = cal
-  icalUrl.value = ''
+  icalPassword.value = ''
   showCalMenu.value = true
 }
 
@@ -336,8 +547,37 @@ async function shareCalendar() {
 
 async function generateIcalLink() {
   if (!selectedCal.value) return
-  const res = await apiClient.post(`/calendars/${selectedCal.value.id}/ical-link`)
-  icalUrl.value = res.data.ical_url
+  const body = {}
+  if (icalPassword.value) body.password = icalPassword.value
+  const res = await apiClient.post(`/calendars/${selectedCal.value.id}/ical-link`, body)
+  selectedCal.value.ical_token = res.data.token
+  selectedCal.value.ical_has_password = res.data.has_password
+  icalPassword.value = ''
+  toast.add({ severity: 'success', summary: 'Link erstellt', life: 2500 })
+}
+
+async function setIcalPassword() {
+  if (!selectedCal.value || !icalPassword.value) return
+  const res = await apiClient.post(`/calendars/${selectedCal.value.id}/ical-link`, { password: icalPassword.value })
+  selectedCal.value.ical_has_password = res.data.has_password
+  icalPassword.value = ''
+  toast.add({ severity: 'success', summary: 'Passwort gesetzt', life: 2500 })
+}
+
+async function clearIcalPassword() {
+  if (!selectedCal.value) return
+  const res = await apiClient.post(`/calendars/${selectedCal.value.id}/ical-link`, { clear_password: true })
+  selectedCal.value.ical_has_password = res.data.has_password
+  toast.add({ severity: 'success', summary: 'Passwort entfernt', life: 2500 })
+}
+
+async function revokeIcal() {
+  if (!selectedCal.value) return
+  if (!confirm('Link zurueckziehen? Abonnenten koennen danach nicht mehr zugreifen.')) return
+  await apiClient.delete(`/calendars/${selectedCal.value.id}/ical-link`)
+  selectedCal.value.ical_token = null
+  selectedCal.value.ical_has_password = false
+  toast.add({ severity: 'success', summary: 'Link zurueckgezogen', life: 2500 })
 }
 
 function copyIcal() {
@@ -349,18 +589,42 @@ async function deleteCalendar() {
   if (!selectedCal.value) return
   await apiClient.delete(`/calendars/${selectedCal.value.id}`)
   showCalMenu.value = false
+  confirmDeleteCal.value = false
   await loadCalendars()
-  await loadEvents()
+  refreshEvents()
 }
 
-function toLocalISO(date) {
+function toLocalISO(date, allDay = false) {
   const pad = n => String(n).padStart(2, '0')
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
+  const d = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+  if (allDay) return d
+  return `${d}T${pad(date.getHours())}:${pad(date.getMinutes())}`
 }
 
+function fromLocalISO(s, allDay = false) {
+  // datetime-local strings are in local tz - just pass through
+  if (allDay) return s + 'T00:00:00'
+  return s
+}
+
+function toServerISO(date, allDay = false) {
+  return toLocalISO(date, allDay)
+}
+
+watch(() => eventForm.value.all_day, (allDay) => {
+  // Toggle between date / datetime-local - strip or add time part
+  const fix = (v) => {
+    if (!v) return v
+    if (allDay) return v.length > 10 ? v.slice(0, 10) : v
+    return v.length === 10 ? `${v}T09:00` : v
+  }
+  eventForm.value.dtstart = fix(eventForm.value.dtstart)
+  eventForm.value.dtend = fix(eventForm.value.dtend)
+})
+
 onMounted(async () => {
   await loadCalendars()
-  await loadEvents()
+  refreshEvents()
 })
 </script>
 
@@ -369,28 +633,27 @@ onMounted(async () => {
 .view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
 .view-header h2 { margin: 0; }
 .header-actions { display: flex; gap: 0.5rem; }
-.calendar-layout { display: flex; gap: 1rem; }
-.calendar-sidebar { width: 220px; flex-shrink: 0; }
+.calendar-layout { display: flex; gap: 1rem; align-items: flex-start; }
+.calendar-sidebar { width: 240px; flex-shrink: 0; }
+.calendar-sidebar h4 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; color: var(--p-text-muted-color); }
 .calendar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.875rem; }
 .calendar-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
-.shared-label { color: var(--p-text-muted-color); font-size: 0.75rem; }
-.calendar-main { flex: 1; }
-.cal-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
-.cal-nav h3 { margin: 0; min-width: 180px; text-align: center; }
-.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--p-surface-200); }
-.cal-header { padding: 0.5rem; text-align: center; font-weight: 600; font-size: 0.8rem; background: var(--p-surface-100); border-bottom: 1px solid var(--p-surface-200); }
-.cal-cell { min-height: 80px; padding: 0.25rem; border: 1px solid var(--p-surface-100); cursor: pointer; font-size: 0.8rem; }
-.cal-cell:hover { background: var(--p-surface-50); }
-.cal-cell.other-month { opacity: 0.4; }
-.cal-cell.today { background: var(--p-primary-50); }
-.cell-day { font-weight: 500; font-size: 0.75rem; }
-.cell-event { font-size: 0.7rem; padding: 1px 4px; border-radius: 3px; color: white; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
-.field { margin-bottom: 1rem; }
-.field label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
-.field-row { display: flex; gap: 1rem; }
+.cal-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shared-label { color: var(--p-text-muted-color); font-size: 0.7rem; }
+.calendar-main { flex: 1; min-width: 0; }
+.field { margin-bottom: 0.75rem; }
+.field label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem; }
+.field-row { display: flex; gap: 0.75rem; }
 .field-row .field { flex: 1; }
-.share-row { display: flex; gap: 0.5rem; align-items: flex-start; }
-.ical-url { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
-.ical-url code { font-size: 0.75rem; word-break: break-all; }
-.cal-menu-content p { margin: 0 0 1rem; }
+.recur-details { padding: 0.75rem; background: var(--p-surface-50); border-radius: 6px; margin-top: 0.5rem; }
+.recur-unit { display: inline-block; margin-left: 0.5rem; font-size: 0.85rem; color: var(--p-text-muted-color); }
+.weekday-row { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.weekday-btn { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 4px;
+               background: var(--p-surface-100); font-size: 0.85rem; cursor: pointer; }
+.weekday-btn.active { background: var(--p-primary-100); }
+.share-row { display: flex; gap: 0.5rem; align-items: center; }
+.ical-block { border-top: 1px solid var(--p-surface-200); padding-top: 1rem; margin-top: 1rem; }
+.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; }
 </style>