Pass explicit date range when fetching events

src/APIFunctions/SCEvents.js

@@ -3,14 +3,20 @@ import config from '../config/config.json';
 
 const SCEVENTS_API_URL = config.SCEvents?.BASE_URL || '/api/scevents';
 
-export async function getAllSCEvents(token) {
+export async function getAllSCEvents(token, { startDate, endDate } = {}) {
   const status = new ApiResponse();
   try {
     const headers = token
       ? { Authorization: `Bearer ${token}` }
       : {};
 
-    const res = await fetch(`${SCEVENTS_API_URL}/events/`, {
+    const url = new URL(`${SCEVENTS_API_URL}/events/`, window.location.origin);
+    if (startDate && endDate) {
+      url.searchParams.set('startDate', startDate);
+      url.searchParams.set('endDate', endDate);
+    }
+
+    const res = await fetch(url.pathname + url.search, {
       headers,
     });
 

src/Pages/Events/CalendarView.js

@@ -816,9 +816,15 @@ function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
 
 // ─── Main export ──────────────────────────────────────────────────────────────
 
-export default function CalendarView({ events, isAdminView = false, user, canCreateEvent = false }) {
-  const today = new Date();
-  const [cursor, setCursor] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
+export default function CalendarView({
+  events,
+  isAdminView = false,
+  user,
+  canCreateEvent = false,
+  cursor,
+  setCursor,
+}) {
+  const today = useMemo(() => new Date(), []);
   const [selectedEvent, setSelectedEvent] = useState(null);
 
   const eventsByDate = useMemo(() => {

src/Pages/Events/Events.js

@@ -132,6 +132,13 @@ function formatEventTime(time) {
   });
 }
 
+function formatDateParam(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
 function canUserSeeEvent(event, user) {
   const userId = user?._id != null ? String(user._id) : '';
   const userAccess = getUserAccessLevel(user);
@@ -279,6 +286,10 @@ export default function EventsPage() {
   const [events, setEvents] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [cursor, setCursor] = useState(() => {
+    const today = new Date();
+    return new Date(today.getFullYear(), today.getMonth(), 1);
+  });
 
   const canCreateEvent = user?.accessLevel >= membershipState.OFFICER;
   const visibleEvents = events.filter((event) => canUserSeeEvent(event, user));
@@ -296,7 +307,9 @@ export default function EventsPage() {
       setHasError(false);
 
       const token = window.localStorage.getItem('jwtToken');
-      const response = await getAllSCEvents(token);
+      const startDate = formatDateParam(new Date(cursor.getFullYear(), cursor.getMonth(), 1));
+      const endDate = formatDateParam(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0));
+      const response = await getAllSCEvents(token, { startDate, endDate });
 
       if (!response.error) {
         setEvents(Array.isArray(response.responseData) ? response.responseData : []);
@@ -308,7 +321,7 @@ export default function EventsPage() {
     }
 
     fetchEvents();
-  }, []);
+  }, [cursor]);
 
   return (
     <div className={pageContainerClass}>
@@ -338,6 +351,8 @@ export default function EventsPage() {
             isAdminView={isAdminView}
             user={user}
             canCreateEvent={canCreateEvent}
+            cursor={cursor}
+            setCursor={setCursor}
           />
         )}
       </div>