css/site.css

@@ -273,6 +273,24 @@ body.custom-background { background-color: #ffffff; }
   color: #bf4d28;
 }
 
+.calendar-search {
+  display: grid;
+  gap: 5px;
+  min-width: min(100%, 280px);
+  color: #444444;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.calendar-search input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 38px;
+  margin: 0;
+  text-transform: none;
+}
+
 .calendar-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);

src/content/pages/events.html

@@ -15,6 +15,10 @@
 
               <div class="calendar-actions">
                 <button class="calendar-secondary-button" type="button" data-calendar-today>This Month</button>
+                <label class="calendar-search">
+                  <span>Search events</span>
+                  <input type="search" data-calendar-search autocomplete="off" placeholder="Search by title, location, or details" />
+                </label>
                 <button class="calendar-secondary-button" type="button" data-calendar-export>Export Calendar</button>
               </div>
 

src/pages/events.astro

@@ -6,7 +6,7 @@ import mainHtml from "../content/pages/events.html?raw";
 <SiteLayout
   title="Upcoming Events &#8211; FFWPU Ireland"
   description="See upcoming FFWPU Ireland community events and calendar listings."
-  bodyClass="archive post-type-archive post-type-archive-tribe_events custom-background metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles parabola-menu-left"
+  bodyClass="archive post-type-archive post-type-archive-tribe_events custom-background tribe-events-page-template tribe-no-js tribe-filter-live metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles parabola-menu-left"
   pathname="/events.html"
   canonical="/events.html"
 >
@@ -36,6 +36,7 @@ import mainHtml from "../content/pages/events.html?raw";
       const grid = calendar.querySelector("[data-calendar-grid]");
       const list = calendar.querySelector("[data-calendar-list]");
       const title = calendar.querySelector("#calendar-month-title");
+      const search = calendar.querySelector("[data-calendar-search]");
       const today = new Date();
       let visibleMonth = new Date(today.getFullYear(), today.getMonth(), 1);
       let selectedDate = toDateKey(today);
@@ -78,6 +79,19 @@ import mainHtml from "../content/pages/events.html?raw";
         return addDays(last, sundayIndex);
       }
 
+      function eventMatchesQuery(event) {
+        const query = String(search?.value || "").trim().toLowerCase();
+
+        if (!query) {
+          return true;
+        }
+
+        return [event.title, event.location, event.details]
+          .join(" ")
+          .toLowerCase()
+          .includes(query);
+      }
+
       function eventsBetween(start, end) {
         const events = [];
 
@@ -96,7 +110,7 @@ import mainHtml from "../content/pages/events.html?raw";
           }
         }
 
-        return events;
+        return events.filter(eventMatchesQuery);
       }
 
       function formatEventTime(event) {
@@ -189,7 +203,7 @@ import mainHtml from "../content/pages/events.html?raw";
         if (!events.length) {
           const empty = document.createElement("p");
           empty.className = "calendar-empty";
-          empty.textContent = "No events for this view.";
+          empty.textContent = "No matching events for this view.";
           list.append(empty);
           return;
         }
@@ -304,6 +318,7 @@ import mainHtml from "../content/pages/events.html?raw";
       });
 
       calendar.querySelector("[data-calendar-export]")?.addEventListener("click", exportCalendar);
+      search?.addEventListener("input", render);
 
       render();
     })();