diff --git a/css/site.css b/css/site.css index ac567378..c75d99cb 100644 --- a/css/site.css +++ b/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); diff --git a/src/content/pages/events.html b/src/content/pages/events.html index da62580e..ce675a3c 100644 --- a/src/content/pages/events.html +++ b/src/content/pages/events.html @@ -15,6 +15,10 @@
+
diff --git a/src/pages/events.astro b/src/pages/events.astro index 7c8bef36..650e8ac2 100644 --- a/src/pages/events.astro +++ b/src/pages/events.astro @@ -6,7 +6,7 @@ import mainHtml from "../content/pages/events.html?raw"; @@ -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(); })();