web: adopt Cache Components, Partial Prefetching and ensureStatic

web/src/components/events/EventContainer.tsx

@@ -24,6 +24,7 @@ import {
   getFilterableVenues,
 } from "@/lib/eventFilter";
 import { isTodayOrFuture } from "@/lib/date";
+import { useToday } from "@/components/general/Today";
 import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
 import {
@@ -190,7 +191,7 @@ const CalendarDay = ({
   <div
     className={`${styles.calendarDay} ${events.length === 0 && styles.empty}`}
   >
-    <h3>{formatDate(parse(day, "yyyy-MM-dd", new Date()), "eeee dd.MM.")}</h3>
+    <h3>{formatDate(parse(day, "yyyy-MM-dd", new Date(0)), "eeee dd.MM.")}</h3>
     <ul>
       {events.map((event) => (
         <EventItem
@@ -234,10 +235,10 @@ const CalendarWeek = ({
   );
 };
 
-function srOnlyYear(yearMonthString: string) {
+function srOnlyYear(yearMonthString: string, today: Date) {
   // formatYearMonth only shows the year for non-current years; always expose it to screen readers
   const yearMonth = new Date(yearMonthString);
-  const isCurrentYear = yearMonth.getFullYear() === new Date().getFullYear();
+  const isCurrentYear = yearMonth.getFullYear() === today.getFullYear();
   if (!isCurrentYear) {
     return null;
   }
@@ -245,8 +246,9 @@ function srOnlyYear(yearMonthString: string) {
 }
 
 const EventCalendar = ({ events }: { events: EventOverviewItemFragment[] }) => {
+  const today = useToday();
   const futureSingularEvents = getSingularEvents(events).filter(
-    (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start),
+    (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start, today),
   );
   const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
   const yearMonths = Object.keys(eventsByDate);
@@ -283,8 +285,8 @@ const EventCalendar = ({ events }: { events: EventOverviewItemFragment[] }) => {
               data-collapsed={!visibleYearMonths.includes(yearMonth)}
             >
               <h2 onClick={() => toggleYearMonth(yearMonth)}>
-                {formatYearMonth(yearMonth)}
-                {srOnlyYear(yearMonth)}{" "}
+                {formatYearMonth(yearMonth, today)}
+                {srOnlyYear(yearMonth, today)}{" "}
                 <span className={styles.eventCounter}>({eventCount})</span>
               </h2>
               {eventCount === 0 && (