Update event handling to support multi-day events

[sjoerdbeentjes]

Description

• Update EventCard and EventList components to use startDate and endDate instead of date.
• Modify queries and filters to order and filter events by startDate.
• Refactor date formatting to handle ranges for multi-day events.
• Add EventDate component for consistent rendering of event dates.

Changes

• Adds end_date field to DatoCMS Event model via migration.
• Updates all frontend components and queries to use startDate and endDate.
• Introduces new utility function in lib/date.ts for date range formatting.
• Replaces all instances of date usage in queries, components, and pages.
• Adds and exports new EventDate component.

Associated issue

https://trello.com/c/vnXxpvkU/104-events-van-meerdere-dagen

How to test

1. Run the project with datocmsEnvironment set to multi-day-events.
2. Visit the homepage and the events overview page.
3. Verify that:
   • Upcoming events are ordered by startDate.
   • Event cards and lists display a date range when endDate is present.
   • Single-day events still show correctly.
4. Open a specific event detail page and check that startDate/endDate and location render as expected.

Checklist

• I have performed a self-review of my own code
• I have made sure that my PR is easy to review (not too big, includes comments)
• I have updated relevant documentation files (in project README, docs/, etc)
• I have added a decision log entry if the change affects the architecture or changes a significant technology
• I have notified a reviewer

---

Remember, contributions to this repository should follow its contributing guidelines.

[cloudflare-workers-and-pages]

Deploying dda-website with    Cloudflare Pages

Latest commit:	15b5efb
Status:	✅  Deploy successful!
Preview URL:	https://298858d7.dda-website.pages.dev
Branch Preview URL:	https://multi-day-event.dda-website.pages.dev

View logs

[Copilot]

Pull Request Overview

Adds support for multi-day events by replacing the single date field with startDate/endDate, updating all queries and UI components to use the new fields, and introducing a shared date‐range formatter and EventDate component.

• Switch query filters and sort orders from date to startDate
• Refactor formatDate util for date ranges and wrap it in a new EventDate component
• Add DatoCMS migration to introduce end_date and rename start_date

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/pages/events/index.astro	Updated upcoming/past event filters and ordering to use startDate
src/pages/events/[slug]/index.astro	Replaced raw date formatting with EventDate in event detail header
src/pages/events/[slug]/_eventPage.query.graphql	Query now fetches startDate and endDate instead of date
src/pages/_index.query.graphql	Updated home page event query to filter/sort by startDate
src/lib/date.ts	Expanded formatDate util to handle optional end dates and ranges
src/components/EventDate/EventDate.tsx	New component rendering single or range dates consistently
src/blocks/EventList/components/List.tsx	Switched list items to use EventDate instead of formatDate
src/blocks/EventCard/EventCard.tsx	Updated event cards to use EventDate and removed date references
config/datocms/migrations/1747817814_mutiDayEvent.ts	Migration adding end_date field and renaming start_date
datocms-environment.ts	Changed CMS environment to multi-day-events for testing

Comments suppressed due to low confidence (2)

config/datocms/migrations/1747817814_mutiDayEvent.ts:1

• The migration filename is misspelled as 'mutiDayEvent.ts'; consider renaming it to 'multiDayEvent.ts' for clarity.

config/datocms/migrations/1747817814_mutiDayEvent.ts

src/components/EventDate/EventDate.tsx:1

• The new EventDate component lacks unit tests; adding tests for single-day and multi-day rendering would improve confidence.

import { formatDate } from '@lib/date';

[Copilot]

For multi-day events, consider using a element (possibly with two datetime attributes) instead of a plain to preserve semantic date semantics.

Suggested change

	return <span>{formatDate(startDate, endDate)}</span>;
	return (
	<time dateTime={`${startDate}/${endDate}`}>
	{formatDate(startDate, endDate)}
	</time>
	);