refactor(calendar): EventDateBox-Komponente für Datums-Kachel

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) <noreply@anthropic.com>
2026-06-20 14:00:54 +02:00
parent 6925ffee45
commit 905c2e4d36
3 changed files with 59 additions and 56 deletions
@@ -0,0 +1,45 @@
+<script lang="ts">
+  /**
+   * 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);
+</script>
+
+<div
+  class="event-date-box shrink-0 h-20 min-w-20 px-2.5 flex flex-col items-center justify-center gap-1 overflow-hidden leading-none bg-himmel-800 rounded-sm"
+>
+  {#if isRange && end}
+    <div class="text-[11px] uppercase tracking-wide text-himmel-300 whitespace-nowrap">
+      {wd(start)}–{wd(end)}
+    </div>
+    <div class="text-lg font-bold tracking-tight text-himmel-50 tabular-nums whitespace-nowrap">
+      {start.getDate()}–{end.getDate()}
+    </div>
+    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
+      {mon(start)}
+    </div>
+  {:else}
+    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
+      {wd(start)}
+    </div>
+    <div class="text-3xl font-bold text-himmel-50 tabular-nums">
+      {start.getDate()}
+    </div>
+    <div class="text-[11px] uppercase tracking-wide text-himmel-300">
+      {mon(start)}
+    </div>
+  {/if}
+</div>