Replace event calender

Author: google-labs-jules[bot]

app/(web)/verein/veranstaltungen/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BlockTitle } from "#/components/block-title/BlockTitle";
 import { PageBase } from "#/components/page/PageBase";
-import { EventCalendar } from "#/components/calendar/Calendar";
+import { EventList } from "#/components/events/EventList";
 import { Metadata } from "next";
 import { getTitle } from "#/lib/page";
 import { veranstaltungen } from "#/content/sitemap";
@@ -14,8 +14,8 @@ export default function Veranstaltungen() {
   return (
     <PageBase>
       <BlockTitle title={veranstaltungen.name} />
-      <div className="bg-white shadow-2xl p-2 flex flex-col lg:flex-row gap-2">
-        <EventCalendar />
+      <div className="bg-white shadow-2xl p-2">
+        <EventList />
       </div>
     </PageBase>
   );

components/calendar/Calendar.tsx

@@ -0,0 +1,66 @@
+import { Event } from '#/content/events';
+import Link from 'next/link';
+import { GrLocation } from 'react-icons/gr'; // Assuming react-icons is available
+
+// Helper function for formatting date and time (can be basic for now)
+// It should handle allDay events appropriately.
+const formatEventDateTime = (start: Date, end: Date, allDay?: boolean): string => {
+  const options: Intl.DateTimeFormatOptions = {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false, // Use 24-hour format or true for 12-hour
+  };
+
+  if (allDay) {
+    return `${new Date(start).toLocaleDateString('de-DE', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })} (Ganztägig)`;
+  }
+
+  const startDateStr = new Date(start).toLocaleDateString('de-DE', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' });
+  const startTimeStr = new Date(start).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false });
+  const endTimeStr = new Date(end).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false });
+
+  // If start and end are on the same day
+  if (new Date(start).toDateString() === new Date(end).toDateString()) {
+    return `${startDateStr}, ${startTimeStr} - ${endTimeStr}`;
+  } else {
+    // If events span multiple days (less common for cards, but good to handle)
+    const endDateStr = new Date(end).toLocaleDateString('de-DE', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' });
+    return `${startDateStr}, ${startTimeStr} - ${endDateStr}, ${endTimeStr}`;
+  }
+};
+
+type EventCardProps = {
+  event: Event;
+};
+
+export function EventCard({ event }: EventCardProps) {
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-4 mb-4 flex flex-col">
+      <h3 className="text-xl font-semibold text-svw-blue-default mb-2">{event.title}</h3>
+      <p className="text-sm text-gray-600 mb-1">
+        {formatEventDateTime(event.start, event.end, event.allDay)}
+      </p>
+      {event.place && (
+        <div className="flex items-center text-sm text-gray-600 mb-2">
+          <GrLocation className="mr-1 flex-shrink-0" />
+          <span className="font-medium">{event.place.name}</span>
+          {event.place.address && <span className="ml-1">, {event.place.address}</span>}
+        </div>
+      )}
+      {event.url && (
+        <div className="mt-auto pt-2"> {/* Pushes link to the bottom */}
+          <Link
+            href={event.url}
+            className="inline-block bg-svw-orange-default text-white px-4 py-2 rounded hover:bg-svw-orange-darker transition-colors text-sm font-medium"
+          >
+            Details ansehen
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

components/events/EventCard.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { EventMatter, Event } from '#/content/events'; // Adjust import if Event is not directly under #/content/events
+import { EventCard } from './EventCard'; // Assuming EventCard is in the same directory
+import { Spinner } from '#/components/spinner/Spinner'; // Assuming Spinner component path
+
+export function EventList() {
+  const [eventMatters, setEventMatters] = useState<EventMatter[] | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const response = await fetch('/api/events');
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data: EventMatter[] = await response.json();
+        setEventMatters(data);
+      } catch (e) {
+        if (e instanceof Error) {
+          setError(e.message);
+        } else {
+          setError('An unknown error occurred.');
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchEvents();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="w-full text-center py-10">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full text-center py-10 text-red-600">
+        Fehler beim Laden der Veranstaltungen: {error}
+      </div>
+    );
+  }
+
+  if (!eventMatters || eventMatters.length === 0) {
+    return (
+      <div className="w-full text-center py-10 text-gray-700">
+        Zurzeit sind keine Veranstaltungen vorhanden.
+      </div>
+    );
+  }
+
+  // Flatten all calendar entries from all event matters into a single list of events
+  // and sort them by start date, earliest first.
+  const allEvents = eventMatters
+    .flatMap(em => em.calendarEntries.map(entry => ({
+        ...entry,
+        // Ensure start and end are Date objects if they aren't already
+        // The API sends them as strings, EventCard expects Date objects
+        start: new Date(entry.start), 
+        end: new Date(entry.end),
+    })))
+    .sort((a, b) => a.start.getTime() - b.start.getTime());
+
+  if (allEvents.length === 0) {
+    return (
+      <div className="w-full text-center py-10 text-gray-700">
+        Zurzeit sind keine Veranstaltungen vorhanden.
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+      {allEvents.map((eventItem, index) => (
+        // Using slug + index as key if event items within calendarEntries don't have unique IDs
+        // Ideally, each Event object should have a unique ID for the key.
+        // For now, we'll use the title and index as a composite key.
+        // The event object from calendarEntries might not have a slug.
+        // The Event type itself doesn't have a slug.
+        <EventCard key={`${eventItem.title}-${index}`} event={eventItem} />
+      ))}
+    </div>
+  );
+}

components/events/EventList.tsx

@@ -41,7 +41,6 @@
     "node-fetch": "2.7.0",
     "nodemailer": "^6.10.0",
     "react": "19.0.0",
-    "react-big-calendar": "^1.17.1",
     "react-dom": "19.0.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-icons": "^5.0.1",
@@ -69,7 +68,6 @@
     "@types/node-fetch": "^2.6.12",
     "@types/nodemailer": "^6.4.14",
     "@types/react": "19.0.10",
-    "@types/react-big-calendar": "^1.16.1",
     "@types/react-dom": "19.0.4",
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.32.1",