src/lib/components/calendar.svelte

@@ -1,29 +1,67 @@
 <script lang="ts">
-  import Calendar from "$lib/components/ui/calendar/calendar.svelte";
+    import Calendar from "$lib/components/ui/calendar/calendar.svelte";
-  import CalendarDay from "$lib/components/ui/calendar/calendar-day.svelte";
+    import CalendarDay from "$lib/components/ui/calendar/calendar-day.svelte";
-  import { CalendarDate } from "@internationalized/date";
+    import { CalendarDate, type DateValue } from "@internationalized/date";
-    
+
-  let {
+    let {
-    value = $bindable<CalendarDate | undefined>(new CalendarDate(2026, 2, 1)),
+        value = $bindable<CalendarDate | undefined>(
-  } = $props()
+            new CalendarDate(2026, 2, 1),
-  
+        ),
-  let getImageForDate = async (dateObject) => {
+    } = $props();
-    const date = `${dateObject.year}-${dateObject.month}-${dateObject.day}`;
+
-    const res = await fetch(`/api/entry?date=${date}`);
+    let placeholder = $state<CalendarDate | undefined>(undefined);
-    const data = await res.json();
+    let imageMap = $state<Map<string, string>>(new Map());
-    
+
-    console.log(date)
+    let displayedMonth = $derived(placeholder ?? value);
-    
+
-    return data.image ? data.image : "noi"
+    $effect(() => {
-  }
+        if (displayedMonth) {
-  
+            const month = `${displayedMonth.year}-${String(displayedMonth.month).padStart(2, "0")}`;
+            fetchMonthImages(month);
+        }
+    });
+
+    async function fetchMonthImages(month: string) {
+        try {
+            const res = await fetch(`/api/entry?month=${month}`);
+            const entries = await res.json();
+            const newMap = new Map<string, string>();
+            for (const entry of entries) {
+                if (entry.image) {
+                    const d = new Date(entry.date);
+                    const key = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+                    newMap.set(key, entry.image);
+                }
+            }
+            imageMap = newMap;
+        } catch (err) {
+            console.error("Failed to fetch month images:", err);
+        }
+    }
+
+    function getImageForDate(day: DateValue): string | null {
+        const key = `${day.year}-${day.month}-${day.day}`;
+        return imageMap.get(key) ?? null;
+    }
 </script>
 
-<Calendar type="single" bind:value class="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]">
+<Calendar
+    type="single"
+    bind:value
+    bind:placeholder
+    class="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
+>
     {#snippet day({ day })}
         <CalendarDay>
             {day.day}
-            <img src={getImageForDate(day)} alt="Image for {day}" />
+            {@const img = getImageForDate(day)}
+            {#if img}
+                <img
+                    src={img}
+                    alt=""
+                    class="h-4 w-full rounded-sm object-cover"
+                />
+            {/if}
         </CalendarDay>
     {/snippet}
 </Calendar>

src/routes/+page.svelte

@@ -14,7 +14,7 @@
     let selectedEntry = $state("");
     let selectedDate = $state(today());
     
-    let dateValue = $state(new CalendarDate(2026, 1, 1));
+    let dateValue = $state(new CalendarDate(2026, 2, 1));