Neeraj Add Government Holidays to Community Calendar

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,13 +258,15 @@ export default function CommunityCalendar() {
     'Needs Attendees': 'statusNeedsAttendees',
     'Filling Fast': 'statusFillingFast',
     'Full Event': 'statusFull',
+    Holiday: 'statusHoliday',
   };
 
   const statusIconMap = {
     New: '⭐',
     'Needs Attendees': '🙋',
     'Filling Fast': '⚡',
     'Full Event': '⛔',
+    Holiday: '🎉',
     Full: '⛔',
   };
 

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;
+}

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;