till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 00:01:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(calendar): add recurrence selector to quick event overlay

Browse source 
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>
This commit is contained in:
Till JS 2026-03-21 11:19:04 +01:00
parent afa9f99705
commit a336728e68
1 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
apps/calendar/apps/web/src/lib/components/event/QuickEventOverlay.svelte
View file

@ -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">