add some date handling

web/src/components/events/EventContainer.tsx

@@ -1,16 +1,21 @@
 "use client";
 
-import styles from "./eventContainer.module.scss";
+import { useState } from "react";
 import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
-import { EventFragment } from "@/gql/graphql";
-import { getSingularEvents } from "@/lib/event";
-import { useState } from "react";
+import { EventFragment, getSingularEvents } from "@/lib/event";
+import {
+  toLocalTime,
+  formatDate,
+  commonDateFormat,
+  isTodayOrFuture,
+} from "@/lib/date";
+import styles from "./eventContainer.module.scss";
 
 type EventContainerMode = "list" | "calendar";
 
 export const EventContainer = ({ events }: { events: EventFragment[] }) => {
-  const [mode, setMode] = useState<EventContainerMode>("list");
+  const [mode, setMode] = useState<EventContainerMode>("calendar");
 
   return (
     <div className={styles.events}>
@@ -38,10 +43,13 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
 };
 
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
-  const singularEvents = getSingularEvents(events);
+  const singularEvents = getSingularEvents(events).filter((x) =>
+    x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
+  );
+
   return (
     <ul className={styles.eventList}>
-      {events.map((event) => (
+      {singularEvents.map((event) => (
         <EventItem key={event.id} event={event} />
       ))}
     </ul>