feature: end date time

src/collections/Events.ts

@@ -44,6 +44,29 @@ export const Events: CollectionConfig = {
                 },
               },
             },
+            {
+              name: 'endDateTime',
+              type: 'date',
+              label: {
+                de: 'Enduhrzeit',
+              },
+              admin: {
+                date: {
+                  pickerAppearance: 'dayAndTime',
+                  timeIntervals: 15,
+                  timeFormat: 'HH:mm',
+                },
+              },
+            },
+            {
+              name: 'cancelled',
+              type: 'checkbox',
+              required: true,
+              label: {
+                de: 'Abgesagt',
+              },
+              defaultValue: false,
+            },
             {
               name: 'location',
               type: 'relationship',
@@ -323,15 +346,6 @@ export const Events: CollectionConfig = {
                 description: 'Optional. Nach diesem Datum werden keine weiteren Termine erzeugt.',
               },
             },
-            {
-              name: 'cancelled',
-              type: 'checkbox',
-              required: true,
-              label: {
-                de: 'Abgesagt',
-              },
-              defaultValue: false,
-            },
           ],
         },
         {

src/migrations/20260423_131226_add_event_end_date_time.ts

@@ -0,0 +1,19 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+   ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-04-26T13:12:25.662Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-04-26T13:12:25.946Z';
+  ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-05-23T13:12:26.003Z';
+  ALTER TABLE "event" ADD COLUMN "end_date_time" timestamp(3) with time zone;
+  ALTER TABLE "_event_v" ADD COLUMN "version_end_date_time" timestamp(3) with time zone;`)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+   ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-04-26T11:53:10.432Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-04-26T11:53:10.804Z';
+  ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-05-23T11:53:10.907Z';
+  ALTER TABLE "event" DROP COLUMN "end_date_time";
+  ALTER TABLE "_event_v" DROP COLUMN "version_end_date_time";`)
+}

src/migrations/index.ts

@@ -41,6 +41,7 @@ import * as migration_20260417_075155 from './20260417_075155';
 import * as migration_20260417_111855_event_occurrences from './20260417_111855_event_occurrences';
 import * as migration_20260417_114727_simplify_recurring_events from './20260417_114727_simplify_recurring_events';
 import * as migration_20260423_115311 from './20260423_115311';
+import * as migration_20260423_131226_add_event_end_date_time from './20260423_131226_add_event_end_date_time';
 
 export const migrations = [
   {
@@ -256,6 +257,11 @@ export const migrations = [
   {
     up: migration_20260423_115311.up,
     down: migration_20260423_115311.down,
-    name: '20260423_115311'
+    name: '20260423_115311',
+  },
+  {
+    up: migration_20260423_131226_add_event_end_date_time.up,
+    down: migration_20260423_131226_add_event_end_date_time.down,
+    name: '20260423_131226_add_event_end_date_time'
   },
 ];

src/pageComponents/Event/Event.tsx

@@ -31,6 +31,7 @@ type EventProps = {
   id: string,
   title: string,
   date: string,
+  endDateTime?: string,
   createdAt: string,
   cancelled: boolean,
   recurrenceType?: Event['recurrenceType'],
@@ -52,6 +53,7 @@ export function EventPage(
     id,
     title,
     date,
+    endDateTime,
     createdAt,
     cancelled,
     recurrenceType,
@@ -69,7 +71,7 @@ export function EventPage(
   }: EventProps
 ) {
   const published = useDate(createdAt)
-  const readableDate = readableDateTime(date)
+  const readableDate = readableDateTime(date, endDateTime)
   const where = locationString(location);
   const contactPersonPhoto = typeof contact === "object" ? getPhoto("thumbnail", contact.photo) : undefined;
   const isRecurring = recurrenceType && recurrenceType !== 'none'

src/payload-types.ts

@@ -1064,6 +1064,8 @@ export interface Event {
   id: string;
   title: string;
   date: string;
+  endDateTime?: string | null;
+  cancelled: boolean;
   location: string | Location;
   shortDescription: string;
   description: string;
@@ -1093,7 +1095,6 @@ export interface Event {
    * Optional. Nach diesem Datum werden keine weiteren Termine erzeugt.
    */
   endDate?: string | null;
-  cancelled: boolean;
   updatedAt: string;
   createdAt: string;
   _status?: ('draft' | 'published') | null;
@@ -1825,6 +1826,8 @@ export interface HighlightSelect<T extends boolean = true> {
 export interface EventSelect<T extends boolean = true> {
   title?: T;
   date?: T;
+  endDateTime?: T;
+  cancelled?: T;
   location?: T;
   shortDescription?: T;
   description?: T;
@@ -1845,7 +1848,6 @@ export interface EventSelect<T extends boolean = true> {
         id?: T;
       };
   endDate?: T;
-  cancelled?: T;
   updatedAt?: T;
   createdAt?: T;
   _status?: T;

src/utils/dto/events.ts

@@ -22,6 +22,7 @@ export const eventToPageProps = (
   id: event.id,
   title: event.title,
   date: occurrence?.date ?? event.date,
+  endDateTime: event.endDateTime ?? undefined,
   createdAt: event.createdAt,
   cancelled: Boolean(event.cancelled || occurrence?.cancelled),
   recurrenceType: event.recurrenceType,

src/utils/readableDate.ts

@@ -1,11 +1,15 @@
 /**
  * Return a readable date time
  * e.G. Samstag 13-01-2024, 12:00 Uhr
+ * With endDate: Samstag 13-01-2024, 12:00 Uhr bis 14:00 Uhr
  */
-export const readableDateTime = (date: string) => {
+export const readableDateTime = (date: string, endDate?: string | null) => {
   const dateObj = new Date(date);
   const dayName = dateObj.toLocaleDateString("de-DE", { weekday: "long" });
   const normalDate = dateObj.toLocaleDateString("de-DE", { dateStyle: "medium" });
   const time = dateObj.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" });
-  return `${dayName} ${normalDate}, ${time} Uhr`;
+  const base = `${dayName} ${normalDate}, ${time} Uhr`;
+  if (!endDate) return base;
+  const endTime = new Date(endDate).toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" });
+  return `${base} bis ${endTime} Uhr`;
 }