\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",[98],"permalink","https://www.val.town/x/Gj64/untitled-2887/code/new-file-5904.tsx","extension","actionData","errors"]