this is so ass rn but im committing for reference

src/component/calendar.astro

@@ -1,4 +1,4 @@
-<div id="calendar"/>
+<div id="calendar" class="bg-[#009FB75f] p-4 rounded-xl"/>
 
 <script>
 import { Calendar } from '@fullcalendar/core';
@@ -18,7 +18,15 @@ let calendar = new Calendar(calendarEl, {
     center: 'title',
     right: 'today'
   },
+  selectable: true,
 
+  select: function(info) {
+    window.location.href = `/?editor=${info.startStr}`
+  },
+  datesSet: function(info) {
+    // Called when the date range changes (e.g., when navigating months)
+    console.log(info);
+  }
 });
 calendar.render();
 

src/component/editor.astro

@@ -28,4 +28,8 @@
 
 		await uploadEntry(entry)
 	})
+
+	export function getHTML() {
+		return quill.getSemanticHTML()
+	}
 </script>

src/pages/api/entry/index.ts

@@ -6,7 +6,7 @@ import { db } from '@util/db';
 import { entryTable } from '@db/schema';
 
 export async function GET({ request }: APIContext) {
-    const { id, date } = getParams(request)
+    const { id, date, month } = getParams(request)
     
     if (id && !isNaN(Number(id))) {
         return getEntryByID(Number(id))
@@ -16,6 +16,10 @@ export async function GET({ request }: APIContext) {
         return getEntryByDate(date)
     }
     
+    if (month) {
+        return getEntryByMonth(month)
+    }
+
     return httpResponse({ error: 'Failed to retrieve entry' }, 500);
 }
 
@@ -44,12 +48,25 @@ async function getEntryByDate(dateString: string) {
             sql`${entryTable.date} >= ${startDate.toISOString()}::timestamp AND ${entryTable.date} <= ${endDate.toISOString()}::timestamp`
         )
 
-        if (entry.length == 0) {
-            return httpResponse({'error': 'entry not found'}, 404)
-        }
-
         return httpResponse(entry, 200)
     } catch(error) {
         return httpResponse({'error': error}, 400)
     }
 }
+
+async function getEntryByMonth(monthString: string) {
+    try {
+        const [year, month] = monthString.split('-').map(Number)
+        
+        const startDate = new Date(year, month - 1, 1, 0, 0, 0, 0)
+        const endDate = new Date(year, month, 1, 0, 0, 0, 0)
+
+        const entries = await db.select().from(entryTable).where(
+            sql`${entryTable.date} >= ${startDate.toISOString()}::timestamp AND ${entryTable.date} < ${endDate.toISOString()}::timestamp`
+        )
+        
+        return httpResponse(entries, 200)
+    } catch(error) {
+        return httpResponse({'error': error}, 400)
+    }
+}

src/pages/index.astro

@@ -6,16 +6,38 @@ import Editor from "../component/editor.astro"
 ---
 
 <script>
+    import type { Entry } from "@util/quill";
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const monthList = urlParams.get('month');
+    
+    
+    const res = await fetch('/api/entry?month=' + monthList);
+    const entries = await res.json();
+    
     const el = document.getElementById('entry-list')!;
 
+    entries.forEach((entry: Entry) => {
+        const entryDiv = document.createElement('div');
+        entryDiv.className = 'entry-item p-2 border-b cursor-pointer hover:bg-gray-100';
+        entryDiv.innerText = `${new Date(entry.date).toLocaleString()}`
+        entryDiv.onclick = () => {
+            window.location.href = `/api/entry?id=${entry.id}`;
+        };
+        el.appendChild(entryDiv);
+    });
 
 </script>
 
 <Layout>
-    <div class="flex space-x-4 w-full">
+    <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 w-full">
-        <div class="w-2/5">
+        <div class="md:w-1/2">
             <Calendar />
             <div id="entry-list" />
         </div>
+        
+        <div id="right" class="md:w-1/2">
+            <Editor />
+        </div>
     </div>
 </Layout>