getting better, now using readOnly property instead of a new view each time

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

@@ -1,11 +1,24 @@
+---
+const {
+	entry,
+	editMode
+} = Astro.props
+---
 
-<div id="editor" />
+<!-- Share the data from the server -->
+<div id="data-entry" hidden>{entry}</div> 
+<div id="data-editMode" hidden>{editMode}</div> 
 
 <script>
 	import Quill from "quill";
 	import { uploadEntry } from '../utils/quill'
 	import type { Entry } from "../utils/quill";
 	
+	const entry = JSON.parse(document.getElementById('data-entry')!.innerText)
+	const editMode = document.getElementById('data-editMode')!.innerText === 'true' ? true : false
+	
+	console.log(editMode)
+	
 	const quill = new Quill('#editor', {
 		modules: {
 			toolbar: [
@@ -14,9 +27,12 @@
 			],
 		},
 		placeholder: 'Compose an epic...',
-		theme: 'snow', // or 'bubble'
+		theme: 'bubble',
+		readOnly: !editMode
 	});
 	
+	quill.setContents(entry.content)
+	
 	document.querySelector("#upload")?.addEventListener('click', async () => {
 		const contents = quill.getContents()
 		
@@ -29,3 +45,8 @@
 		await uploadEntry(entry)
 	})
 </script>
+
+
+<div class="bg-[#009FB75f] rounded-xl">
+	<div id="editor" />
+</div>

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

@@ -3,19 +3,22 @@ import "../styles/global.css"
 import Layout from "../component/core/layout.astro"
 import Calendar from "../component/calendar.astro"
 import Editor from "../component/editor.astro"
+
+
+const res = await fetch(new URL('/api/entry?id=5', Astro.url))
+const en = await res.json()
 ---
 
-<script>
-  const el = document.getElementById('entry-list')!;
-  
-  
-</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 entry={JSON.stringify(en)} editMode={false} />
+        </div>
     </div>
 </Layout>