\n {date.getDate()}\n

\n {dayEvents.slice(0, 3).map((event) => (\n onEditEvent(event)}\n className=\"text-xs p-1 bg-blue-100 text-blue-800 rounded cursor-pointer hover:bg-blue-200 truncate\"\n title={`${event.title} - ${formatTime(event.start_time)}`}\n >\n {formatTime(event.start_time)} {event.title}\n

\n ))}\n {dayEvents.length > 3 && (\n

\n +{dayEvents.length - 3} more\n

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

\n {/* Day headers */}\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (\n

\n {day}\n

\n ))}\n {days}\n

\n );\n };\n\n const renderWeekView = () => {\n const startDate = getViewStartDate();\n const days = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(startDate);\n date.setDate(startDate.getDate() + i);\n const dayEvents = getEventsForDate(date);\n const isToday = date.toDateString() === new Date().toDateString();\n\n days.push(\n

\n {date.toLocaleDateString('en-US', { weekday: 'short' })}\n

\n {date.getDate()}\n

\n {dayEvents.map((event) => (\n onEditEvent(event)}\n >\n

{event.title}

\n {formatTime(event.start_time)} - {formatTime(event.end_time)}\n

\n ))}\n

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

\n {days}\n

\n );\n };\n\n const renderDayView = () => {\n const dayEvents = getEventsForDate(currentDate);\n const isToday = currentDate.toDateString() === new Date().toDateString();\n\n return (\n

\n {currentDate.toLocaleDateString('en-US', { \n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric' \n })}\n

\n {dayEvents.length === 0 ? (\n

No events scheduled for this day

\n ) : (\n

\n {dayEvents.map((event) => (\n \n

{event.title}

\n {formatTime(event.start_time)} - {formatTime(event.end_time)}\n

\n {event.description && (\n

{event.description}

\n )}\n {event.reminder_time && (\n

\n 🔔 Reminder: {new Date(event.reminder_time).toLocaleString()}\n

\n )}\n

\n onEditEvent(event)}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n Edit\n \n deleteEvent(event.id!)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n >\n Delete\n \n

\n ))}\n

\n )}\n

\n \n );\n };\n\n const getViewTitle = () => {\n switch (viewMode) {\n case 'month':\n return currentDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long' });\n case 'week':\n const startDate = getViewStartDate();\n const endDate = new Date(startDate);\n endDate.setDate(startDate.getDate() + 6);\n return `${startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${endDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n case 'day':\n return currentDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });\n }\n };\n\n if (loading) {\n return (\n

Loading calendar...

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

\n {/* Calendar Header */}\n

{getViewTitle()}

\n navigateDate('prev')}\n className=\"p-2 hover:bg-gray-100 rounded\"\n >\n ←\n \n setCurrentDate(new Date())}\n className=\"px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200\"\n >\n Today\n \n navigateDate('next')}\n className=\"p-2 hover:bg-gray-100 rounded\"\n >\n →\n \n

\n \n

\n {(['month', 'week', 'day'] as const).map((mode) => (\n setViewMode(mode)}\n className={`px-3 py-1 text-sm rounded capitalize ${\n viewMode === mode\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n {mode}\n \n ))}\n

\n\n {/* Calendar View */}\n {viewMode === 'month' && renderMonthView()}\n {viewMode === 'week' && renderWeekView()}\n {viewMode === 'day' && renderDayView()}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Ozy/Tracker/code/frontend/components/Calendar.tsx","extension","actionData","errors"]