From 905c2e4d36aaea86b5ae0bcfc91d4f23277bbced Mon Sep 17 00:00:00 2001 From: Peter Meier Date: Sat, 20 Jun 2026 14:00:54 +0200 Subject: [PATCH] =?UTF-8?q?refactor(calendar):=20EventDateBox-Komponente?= =?UTF-8?q?=20f=C3=BCr=20Datums-Kachel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Einzel- und Mehrtages-Datum in eine dedizierte Komponente ausgelagert. Beide Varianten gleiche Höhe (h-20); Mehrtag zeigt Wochentag- und Tag-Range (z. B. "Sa–So" / "27–28") und wächst nur in der Breite. Zentriert gestapelt (kein Overflow), himmel-Box konsistent. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../components/blocks/CalendarBlock.svelte | 61 +++---------------- src/lib/components/blocks/EventDateBox.svelte | 45 ++++++++++++++ src/lib/iconify-mdi-subset.generated.json | 9 ++- 3 files changed, 59 insertions(+), 56 deletions(-) create mode 100644 src/lib/components/blocks/EventDateBox.svelte diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte index b5f5962..f26f225 100644 --- a/src/lib/components/blocks/CalendarBlock.svelte +++ b/src/lib/components/blocks/CalendarBlock.svelte @@ -18,6 +18,7 @@ import ImageModal from "$lib/components/ImageModal.svelte"; import SocialImageModal from "$lib/components/SocialImageModal.svelte"; import QrModal from "$lib/components/QrModal.svelte"; + import EventDateBox from "./EventDateBox.svelte"; type EventCardItem = CalendarItemData & { start: Date; @@ -604,59 +605,13 @@ - - {#if item.isMultiDay && item.end} -
-
- {item.start.toLocaleDateString("de-DE", { - month: "short", - })} -
-
- {item.start.getDate()}–{item.end.getDate()} -
-
- {item.start.getFullYear() === - item.end.getFullYear() - ? item.end.toLocaleDateString("de-DE", { - month: "short", - }) - : item.end.getFullYear()} -
-
- {:else} -
-
- {item.start.toLocaleDateString("de-DE", { - weekday: "short", - })} -
-
- {item.start.getDate()} -
-
- {item.start.toLocaleDateString("de-DE", { - month: "short", - })} -
-
- {/if} + +
+ /** + * Datum-Kachel für Kalender-Einträge: himmel-Box mit Wochentag/Tag/Monat. + * Einzeltermin → großer Tag. Mehrtägig → Wochentag- und Tag-Range (z. B. + * "Sa–So" / "27–28"). Beide Varianten haben dieselbe Höhe; die Box wächst + * für Ranges nur in der Breite (min-w-14 + px), bleibt also konsistent. + */ + let { + start, + end = null, + multiDay = false, + }: { start: Date; end?: Date | null; multiDay?: boolean } = $props(); + + const wd = (d: Date) => + d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, ""); + const mon = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" }); + + const isRange = $derived(multiDay && !!end); + + +
+ {#if isRange && end} +
+ {wd(start)}–{wd(end)} +
+
+ {start.getDate()}–{end.getDate()} +
+
+ {mon(start)} +
+ {:else} +
+ {wd(start)} +
+
+ {start.getDate()} +
+
+ {mon(start)} +
+ {/if} +
diff --git a/src/lib/iconify-mdi-subset.generated.json b/src/lib/iconify-mdi-subset.generated.json index 2e87570..1d18677 100644 --- a/src/lib/iconify-mdi-subset.generated.json +++ b/src/lib/iconify-mdi-subset.generated.json @@ -123,6 +123,9 @@ "magnify-plus": { "body": "" }, + "arrow-right": { + "body": "" + }, "file-download": { "body": "" }, @@ -138,9 +141,6 @@ "calendar-month-outline": { "body": "" }, - "arrow-right": { - "body": "" - }, "download-outline": { "body": "" }, @@ -228,6 +228,9 @@ "home-outline": { "body": "" }, + "calendar-month": { + "body": "" + }, "share-variant-outline": { "body": "" },