\n\n i);\n\n useEffect(() => {\n loadEvents();\n }, []);\n\n async function loadEvents() {\n const response = await fetch(\"/api/events\");\n const data = await response.json();\n setEvents(data);\n }\n\n function getDayClass(index) {\n return \\`day-bg-\\${index}\\`;\n }\n\n async function createEvent(date, hour) {\n if (!userName) return;\n\n const newEvent = {\n id: Date.now().toString(),\n title: \"New Event\",\n date,\n hour,\n author: userName,\n };\n\n await fetch(\"/api/events\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newEvent),\n });\n\n setEvents([...events, newEvent]);\n }\n\n async function updateEvent(eventId, updates) {\n const event = events.find(e => e.id === eventId);\n if (!event) return;\n\n const updatedEvent = { ...event, ...updates };\n\n await fetch(\"/api/events\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(updatedEvent),\n });\n\n setEvents(events.map(ev => ev.id === eventId ? updatedEvent : ev));\n }\n\n function handleDragStart(e, event) {\n setDragging(event);\n e.dataTransfer.effectAllowed = \"move\";\n }\n\n function handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n }\n\n function handleDrop(e, date, hour) {\n e.preventDefault();\n if (!dragging) return;\n\n updateEvent(dragging.id, { date, hour });\n setDragging(null);\n }\n\n function handleNameSubmit(e) {\n e.preventDefault();\n if (tempName.trim()) {\n setUserName(tempName);\n setShowNameModal(false);\n }\n }\n\n function handleTitleUpdate(eventId, newTitle) {\n updateEvent(eventId, { title: newTitle });\n setEditingEvent(null);\n }\n\n if (showNameModal) {\n return (\n

Welcome!

\n );\n }\n\n return (\n

Calendar - Nov 8-12, 2024

👤 {userName}

\n\n

\n {hours.map((hour) => (\n \n {hour.toString().padStart(2, \"0\")}:00\n

\n ))}\n

\n\n {dates.map((dateInfo, index) => (\n

{dateInfo.day}

\n {dateInfo.date.split(\"-\")[2]}\n

\n {hours.map((hour) => (\n createEvent(dateInfo.date, hour)}\n onDragOver={handleDragOver}\n onDrop={(e) => handleDrop(e, dateInfo.date, hour)}\n >\n {events\n .filter((ev) => ev.date === dateInfo.date && ev.hour === hour)\n .map((event) => (\n handleDragStart(e, event)}\n className=\"event-block\"\n onClick={(e) => e.stopPropagation()}\n >\n {editingEvent === event.id ? (\n handleTitleUpdate(event.id, e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleTitleUpdate(event.id, e.currentTarget.value);\n }\n }}\n className=\"w-full bg-white text-black px-1 rounded text-xs\"\n autoFocus\n onClick={(e) => e.stopPropagation()}\n />\n ) : (\n setEditingEvent(event.id)}\n className=\"text-xs font-semibold\"\n >\n {event.title}\n

\n )}\n

by {event.author}

\n ))}\n

\n \n ))}\n \n \n \n );\n }\n\n const root = createRoot(document.getElementById('app'));\n root.render(React.createElement(Calendar));\n `,\n }}\n />\n \n \n );\n}\n\n// Main export\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Handle API routes\n if (url.pathname.startsWith(\"/api/\")) {\n return handleAPI(req);\n }\n\n // Render the React app to HTML\n const html = \"\" + renderToString();\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","deleted","label","children",[],[150],"files",[148],"counts",{"_173":32,"_174":175,"_176":32,"_177":178},"pulls","branches",1,"forks","envVars",{"_179":32,"_180":32},"count","emptyCount","contents",[183],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":184,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":185},["D",1761682239247],[150],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":195,"_181":200,"_203":-7,"_204":-5,"_205":-5,"_169":206,"_210":211,"_212":-5,"_213":-5},{"_102":103,"_95":96,"_104":196,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":197,"_130":198,"_133":199,"_145":22},["D",1761681155002],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[201],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":184,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":202},[150],"readme","upstream","pull",[207],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":158,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_166":208,"_98":209},[],[150],"previews",[207],"ahead","behind","actionData","errors"]

mackey

montreal-calendar