From a336728e68d86952a575c7a4184392fdfec660f9 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 21 Mar 2026 11:19:04 +0100
Subject: [PATCH] feat(calendar): add recurrence selector to quick event
 overlay

The RecurrenceSelector was already built but only available in the full
EventForm. Now it's integrated into the QuickEventOverlay so users can
set recurring events directly when creating via grid click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/event/QuickEventOverlay.svelte | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/apps/calendar/apps/web/src/lib/components/event/QuickEventOverlay.svelte b/apps/calendar/apps/web/src/lib/components/event/QuickEventOverlay.svelte
index 8994167fa..a8ef21281 100644
--- a/apps/calendar/apps/web/src/lib/components/event/QuickEventOverlay.svelte
+++ b/apps/calendar/apps/web/src/lib/components/event/QuickEventOverlay.svelte
@@ -4,6 +4,7 @@
 	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { contactsStore } from '$lib/stores/contacts.svelte';
 	import RecurrenceEditDialog from './RecurrenceEditDialog.svelte';
+	import RecurrenceSelector from './RecurrenceSelector.svelte';
 	import type {
 		LocationDetails,
 		CalendarEvent,
@@ -209,6 +210,8 @@
 	let locationCountry = $state('');
 	let submitting = $state(false);
 	let showRecurrenceDialog = $state(false);
+	let recurrenceRule = $state<string | null>(null);
+	let recurrenceEndDate = $state<string | null>(null);
 
 	// People state
 	let responsiblePerson = $state<ResponsiblePerson | null>(null);
@@ -261,6 +264,14 @@
 			responsiblePerson = event.metadata?.responsiblePerson || null;
 			attendees = event.metadata?.attendees || [];
 
+			// Initialize recurrence
+			recurrenceRule = event.recurrenceRule || null;
+			recurrenceEndDate = event.recurrenceEndDate
+				? typeof event.recurrenceEndDate === 'string'
+					? event.recurrenceEndDate
+					: event.recurrenceEndDate.toISOString()
+				: null;
+
 			// Initialize time fields
 			const eventStart = toDate(event.startTime);
 			const eventEnd = toDate(event.endTime);
@@ -568,6 +579,8 @@
 				isAllDay,
 				description: description.trim() || undefined,
 				location: location.trim() || undefined,
+				recurrenceRule: recurrenceRule || undefined,
+				recurrenceEndDate: recurrenceEndDate || undefined,
 				metadata,
 			};
 
@@ -922,6 +935,30 @@
 				</div>
 			{/if}
 
+			<!-- Recurrence -->
+			<div class="form-row">
+				<div class="row-icon">
+					<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+						/>
+					</svg>
+				</div>
+				<div class="row-content">
+					<RecurrenceSelector
+						{recurrenceRule}
+						{recurrenceEndDate}
+						onRecurrenceChange={(rule, endDate) => {
+							recurrenceRule = rule;
+							recurrenceEndDate = endDate;
+						}}
+					/>
+				</div>
+			</div>
+
 			<!-- Start date/time -->
 			<div class="form-row">
 				<div class="row-icon">