\n {/* Hero Section */}\n

Academic Calendar

\n Stay informed about important dates, events, and activities throughout the academic year.\n

\n\n {/* Calendar Controls */}\n

\n {/* View Toggle */}\n

\n setViewMode('month')}\n className={`px-4 py-2 rounded-md font-medium transition-all ${\n viewMode === 'month'\n ? 'bg-school-red text-white'\n : 'text-gray-600 hover:bg-gray-200'\n }`}\n >\n Month View\n \n setViewMode('list')}\n className={`px-4 py-2 rounded-md font-medium transition-all ${\n viewMode === 'list'\n ? 'bg-school-red text-white'\n : 'text-gray-600 hover:bg-gray-200'\n }`}\n >\n List View\n \n

\n\n {/* Category Filter */}\n

\n \n setSelectedCategory(e.target.value)}\n className=\"form-input px-4 py-2 rounded-lg border border-gray-300\"\n >\n {eventCategories.map((category) => (\n \n ))}\n \n

\n\n {/* Actions */}\n

\n \n \n

\n\n {viewMode === 'month' ? (\n /* Month View */\n

\n {/* Month Navigation */}\n

\n navigateMonth('prev')}\n className=\"p-2 rounded-lg hover:bg-gray-100 transition-colors\"\n >\n \n \n \n

\n {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}\n

\n \n navigateMonth('next')}\n className=\"p-2 rounded-lg hover:bg-gray-100 transition-colors\"\n >\n \n \n

\n\n {/* Calendar Grid */}\n

\n {/* Day Headers */}\n

\n {dayNames.map((day) => (\n

\n {day}\n

\n ))}\n

\n\n {/* Calendar Days */}\n

\n {getDaysInMonth(currentDate).map((day, index) => {\n if (!day) {\n return

;\n }\n\n const dayEvents = getEventsByDate(day);\n const isToday = day.toDateString() === new Date().toDateString();\n\n return (\n

\n {day.getDate()}\n

\n \n

\n {dayEvents.slice(0, 2).map((event) => {\n const categoryInfo = getCategoryInfo(event.category);\n return (\n \n {event.title}\n

\n );\n })}\n {dayEvents.length > 2 && (\n

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

\n )}\n

\n );\n })}\n

\n \n ) : (\n /* List View */\n

\n {/* Events List */}\n

Upcoming Events

\n {filteredEvents.map((event) => {\n const categoryInfo = getCategoryInfo(event.category);\n const eventDate = new Date(event.date);\n \n return (\n

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

\n \n

{event.title}

{event.description}

\n \n

\n \n {event.time}\n

\n \n {event.location}\n

\n \n

\n {eventDate.getDate()}\n

\n {eventDate.toLocaleDateString('en-US', { month: 'short' })}\n

\n );\n })}\n

\n\n {/* Sidebar */}\n

\n {/* Important Dates */}\n

Important Dates

\n {importantDates.map((date, index) => (\n

{date.title}

{date.description}

\n {new Date(date.date).toLocaleDateString()}\n

\n ))}\n

\n\n {/* Event Categories Legend */}\n

Event Categories

\n {eventCategories.slice(1).map((category) => (\n

\n {category.name}\n

\n ))}\n

\n\n {/* Quick Actions */}\n

Quick Actions

\n \n \n \n

\n )}\n \n );\n}","deleted","label",[167,168,169,149],"frontend","components","pages","permalink","https://www.val.town/x/Deboy/AGAPE/code/frontend/components/pages/CalendarPage.tsx","extension","actionData","errors"]