\n {[\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"].map(day => (\n

{day}

\n ))}\n {days.map((day, index) => {\n const dateEvents = day.date ? getEventsForDate(day.date) : [];\n return (\n \n {day.day && (\n <>\n

{day.day}

\n {dateEvents.slice(0, 2).map(event => (\n \n {event.title}\n

\n ))}\n {dateEvents.length > 2 && (\n

\n +{dateEvents.length - 2} more\n

\n )}\n

\n \n )}\n \n );\n })}\n \n );\n };\n\n const WeekView = () => {\n const days = getDaysForWeekView();\n const hours = getHoursForDayView();\n\n return (\n

\n {days.map((day, index) => (\n \n

{day.dayName}

\n \n {day.dayNumber}\n

\n ))}\n \n

\n {hours.map((hour, idx) => (\n

\n \n {hour.label}\n \n

\n ))}\n

\n {days.map((day, dayIndex) => (\n

\n {hours.map((hour, hourIndex) => (\n \n

\n ))}\n {getEventsForDate(day.date).map(event => {\n const { top, height } = getEventPosition(event);\n return (\n \n {event.title}\n

\n );\n })}\n \n ))}\n \n \n );\n };\n\n const DayView = () => {\n const hours = getHoursForDayView();\n const dayEvents = getEventsForDate(currentDate);\n\n return (\n

\n {new Intl.DateTimeFormat(\"en-US\", { weekday: \"long\" }).format(currentDate)}\n

\n {hours.map((hour, idx) => (\n

\n \n {hour.label}\n \n

\n ))}\n {dayEvents.map(event => {\n const { top, height } = getEventPosition(event);\n return (\n \n

{event.title}

\n {new Date(event.date).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })} -\n {new Date(event.endDate).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n

\n );\n })}\n

\n \n );\n };\n\n // Event creation modal\n const AddEventModal = () => {\n return (\n

New Event

\n setShowAddEvent(false)}\n className=\"text-gray-400 hover:text-white transition-colors\"\n >\n \n \n

\n Title\n setNewEvent({ ...newEvent, title: e.target.value })}\n className=\"w-full bg-gray-800 rounded-lg border border-gray-700 p-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Event title\"\n />\n

\n\n

\n Start\n {\n const [hours, minutes] = e.target.value.split(\":\");\n const newDate = new Date(newEvent.date);\n newDate.setHours(parseInt(hours), parseInt(minutes));\n setNewEvent({ ...newEvent, date: newDate });\n }}\n className=\"w-full bg-gray-800 rounded-lg border border-gray-700 p-2\"\n />\n

\n End\n {\n const [hours, minutes] = e.target.value.split(\":\");\n const newDate = new Date(newEvent.endDate);\n newDate.setHours(parseInt(hours), parseInt(minutes));\n setNewEvent({ ...newEvent, endDate: newDate });\n }}\n className=\"w-full bg-gray-800 rounded-lg border border-gray-700 p-2\"\n />\n

\n\n

\n Color\n

\n {[\"bg-blue-500\", \"bg-purple-500\", \"bg-green-500\", \"bg-yellow-500\", \"bg-red-500\"].map(color => (\n setNewEvent({ ...newEvent, color })}\n className={`w-8 h-8 rounded-full ${color} ${newEvent.color === color ? \"ring-2 ring-white\" : \"\"}`}\n />\n ))}\n

\n\n

\n setShowAddEvent(false)}\n className=\"px-4 py-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition-colors\"\n >\n Cancel\n \n \n \n Create Event\n \n

\n );\n };\n\n // Render main app with conditionally rendered add event modal\n return (\n

\n {/* App Header */}\n

Calendar

\n setShowAddEvent(true)}\n className=\"bg-blue-600 hover:bg-blue-500 p-2 rounded-full shadow-lg transition-colors duration-200\"\n >\n \n \n

\n\n

\n \n \n \n \n \n \n

{getHeaderDisplay()}

\n \n Today\n \n

\n\n

\n setView(\"month\")}\n className={`flex-1 py-1 text-sm font-medium rounded-md transition-colors ${\n view === \"month\" ? \"bg-gray-800\" : \"hover:bg-gray-800/50\"\n }`}\n >\n Month\n \n setView(\"week\")}\n className={`flex-1 py-1 text-sm font-medium rounded-md transition-colors ${\n view === \"week\" ? \"bg-gray-800\" : \"hover:bg-gray-800/50\"\n }`}\n >\n Week\n \n setView(\"day\")}\n className={`flex-1 py-1 text-sm font-medium rounded-md transition-colors ${\n view === \"day\" ? \"bg-gray-800\" : \"hover:bg-gray-800/50\"\n }`}\n >\n Day\n \n

\n\n {/* Calendar Content */}\n

\n {view === \"month\" && }\n {view === \"week\" && }\n {view === \"day\" && }\n

\n\n {/* Bottom Navigation */}\n \n\n {/* Add Event Modal */}\n {showAddEvent && }\n

\n );\n}","deleted","label","children",[],[150],"files",[148],"counts",{"_173":32,"_174":175,"_176":32,"_177":32},"pulls","branches",1,"forks","envVars","contents",[180],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":182},["D",1747186504627],[150],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":192,"_178":197,"_200":-7,"_201":-5,"_202":-5,"_169":203,"_207":208},{"_102":103,"_95":96,"_104":193,"_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":194,"_130":195,"_133":196,"_145":22},["D",1747186463896],{"_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},[198],{"_102":149,"_95":150,"_151":152,"_153":-5,"_154":136,"_155":135,"_156":157,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":199},[150],"readme","upstream","pull",[204],{"_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":205,"_98":206},[],[150],"previews",[204],"actionData","errors"]