diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx index f3b4adb2b5..92cc5f2341 100644 --- a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx +++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx @@ -5,6 +5,7 @@ import 'react-calendar/dist/Calendar.css'; import axios from 'axios'; import { ENDPOINTS } from '../../../utils/URL'; import CalendarActivitySection from './CalendarActivitySection'; +import GOVERNMENT_HOLIDAYS from './governmentHolidays'; import styles from './CommunityCalendar.module.css'; import { FaCalendarAlt, @@ -73,9 +74,25 @@ export default function CommunityCalendar() { }, []); const mappedEvents = useMemo(() => { - return events.map(event => { + const holidayEvents = GOVERNMENT_HOLIDAYS.map(holiday => ({ + id: holiday.id, + title: holiday.title, + date: new Date(holiday.date), + type: 'Government Holiday', + status: 'Holiday', + time: 'All Day', + description: `${holiday.title} holiday`, + location: 'National', + isHoliday: true, + })); + + const communityEvents = events.map(event => { const eventDate = new Date(event.date); - const timeString = eventDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + + const timeString = eventDate.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + }); return { ...event, @@ -88,16 +105,23 @@ export default function CommunityCalendar() { location: event.location || 'Online', }; }); + + return [...communityEvents, ...holidayEvents]; }, [events]); const filteredEvents = useMemo( () => - mappedEvents.filter( - e => + mappedEvents.filter(e => { + if (e.isHoliday) { + return true; + } + + return ( (filter.type === 'all' || e.type === filter.type) && (filter.location === 'all' || e.location === filter.location) && - (filter.status === 'all' || e.status === filter.status), - ), + (filter.status === 'all' || e.status === filter.status) + ); + }), [mappedEvents, filter], ); @@ -234,6 +258,7 @@ export default function CommunityCalendar() { 'Needs Attendees': 'statusNeedsAttendees', 'Filling Fast': 'statusFillingFast', 'Full Event': 'statusFull', + Holiday: 'statusHoliday', }; const statusIconMap = { @@ -241,6 +266,7 @@ export default function CommunityCalendar() { 'Needs Attendees': '🙋', 'Filling Fast': '⚡', 'Full Event': '⛔', + Holiday: '🎉', Full: '⛔', }; diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css index d927a9f89f..874476343f 100644 --- a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css +++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css @@ -1548,6 +1548,7 @@ min-width: 0; /* CRITICAL */ overflow: hidden; } + .eventIcon { font-size: 0.75rem; flex-shrink: 0; @@ -1570,3 +1571,24 @@ font-weight: 600; } +.reactCalendar :global(.react-calendar__tile) .eventItem.statusHoliday { + background-color: #e7dfd2; + color: #5f5142; + padding: 4px 8px; + font-weight: 600; + border-radius: 6px; + border: 1px solid #d6cbbd; + width: fit-content; + max-width: 100%; +} + +.reactCalendarDarkMode :global(.react-calendar__tile) .eventItem.statusHoliday { + background-color: #5a4d40; + color: #f5eadf; + border: 1px solid #7a6a58; +} + +.selectedEventCard .statusHoliday { + background-color: #e8e1d8; + color: #5c4b3b; +} diff --git a/src/components/CommunityPortal/Calendar/governmentHolidays.js b/src/components/CommunityPortal/Calendar/governmentHolidays.js new file mode 100644 index 0000000000..aed98d2a6e --- /dev/null +++ b/src/components/CommunityPortal/Calendar/governmentHolidays.js @@ -0,0 +1,39 @@ +const GOVERNMENT_HOLIDAYS = [ + { + id: 'holiday-new-year', + title: "New Year's Day", + date: '2026-01-01', + }, + { + id: 'holiday-mlk', + title: 'Martin Luther King Jr. Day', + date: '2026-01-19', + }, + { + id: 'holiday-memorial', + title: 'Memorial Day', + date: '2026-05-25', + }, + { + id: 'holiday-independence', + title: 'Independence Day', + date: '2026-07-04', + }, + { + id: 'holiday-labor', + title: 'Labor Day', + date: '2026-09-07', + }, + { + id: 'holiday-thanksgiving', + title: 'Thanksgiving', + date: '2026-11-26', + }, + { + id: 'holiday-christmas', + title: 'Christmas Day', + date: '2026-12-25', + }, +]; + +export default GOVERNMENT_HOLIDAYS;