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();
})();