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/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>