change some event datetime formatting

web/src/app/aktuelt/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { Blocks } from "@/components/blocks/Blocks";
 import Image from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
-import { commonDateFormat, formatDate } from "@/lib/date";
+import { compactDateFormat, formatDate } from "@/lib/date";
 import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
@@ -67,7 +67,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
             )}
           </figure>
         )}
-        <p>{formatDate(news.firstPublishedAt, commonDateFormat)}</p>
+        <p>{formatDate(news.firstPublishedAt, compactDateFormat)}</p>
       </section>
       <section className="pageContent">
         <Blocks blocks={news.body} />

web/src/components/events/DateList.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { formatDate, isTodayOrFuture } from "@/lib/date";
+import {
+  formatDate,
+  formatExtendedDateTime,
+  isTodayOrFuture,
+} from "@/lib/date";
 import { EventFragment, EventOccurrence, compareDates } from "@/lib/event";
 import styles from "./dateList.module.scss";
 import Link from "next/link";
@@ -14,7 +18,7 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
     <li className={styles.date}>
       <div className={styles.time}>
         <span className={styles.day}>
-          {formatDate(occurrence.start, dateFormat)}
+          {formatExtendedDateTime(occurrence.start, true)}
         </span>
         <span className={styles.hour}>
           {formatDate(occurrence.start, timeFormat)}

web/src/components/events/EventHeader.tsx

@@ -1,7 +1,6 @@
-import { EventCategory, EventFragment } from "@/lib/event";
+import { EventFragment } from "@/lib/event";
 import styles from "./eventHeader.module.scss";
 import Image from "@/components/general/Image";
-import { Pig } from "../general/Pig";
 import Link from "next/link";
 import { OrganizerList } from "./OrganizerList";
 

web/src/components/events/EventItem.tsx

@@ -8,7 +8,7 @@ import {
   EventFragment,
   getClosestOccurrence,
 } from "@/lib/event";
-import { toLocalTime, formatDate, commonDateTimeFormat } from "@/lib/date";
+import { formatDate, formatExtendedDateTime } from "@/lib/date";
 
 export const EventItem = ({
   event,
@@ -43,14 +43,12 @@ export const EventItem = ({
       <div className={styles.time}>
         {mode === "list" && nextOccurrence && (
           <div className={styles.dates}>
-            {numOccurrences === 1 &&
+            {numOccurrences === 1 && nextOccurrence?.start && (
-              nextOccurrence?.start &&
+              <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-              formatDate(nextOccurrence.start, commonDateTimeFormat)}
+            )}
             {numOccurrences > 1 && nextOccurrence?.start && (
               <>
-                <span>
+                <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-                  {formatDate(nextOccurrence.start, commonDateTimeFormat)}
-                </span>
                 <p className={styles.moreDates}>
                   Flere datoer ({numOccurrences})
                 </p>
@@ -62,7 +60,7 @@ export const EventItem = ({
           "occurrence" in event &&
           event.occurrence?.start && (
             <p className={styles.dates}>
-              {formatDate(event.occurrence?.start, commonDateTimeFormat)}
+              {formatExtendedDateTime(nextOccurrence.start)}
             </p>
           )}
         {mode === "calendar" &&

web/src/components/news/NewsItem.tsx

@@ -1,7 +1,7 @@
 import styles from "./newsItem.module.scss";
 import Image from "../general/Image";
 import { NewsFragment } from "@/lib/news";
-import { formatDate, commonDateFormat } from "@/lib/date";
+import { formatDate, compactDateFormat } from "@/lib/date";
 import Link from "next/link";
 
 export const NewsItem = ({ news }: { news: NewsFragment }) => {
@@ -22,7 +22,7 @@ export const NewsItem = ({ news }: { news: NewsFragment }) => {
       </div>
       <div className={styles.text}>
         <p className={styles.date}>
-          {formatDate(news.firstPublishedAt, commonDateFormat)}
+          {formatDate(news.firstPublishedAt, compactDateFormat)}
         </p>
         <h2 className={styles.title}>{news.title}</h2>
         <p className={styles.lead}>{news.excerpt}</p>

web/src/lib/date.ts

@@ -4,8 +4,8 @@ import { toZonedTime, format } from "date-fns-tz";
 
 const timeZone = "Europe/Oslo";
 
-export const commonDateTimeFormat = "dd.MM.yyyy 'kl.' HH:mm";
+export const compactDateTimeFormat = "dd.MM.yyyy 'kl.' HH:mm";
-export const commonDateFormat = "dd.MM.yyyy";
+export const compactDateFormat = "dd.MM.yyyy";
 
 export function toLocalTime(date: Date | string | number) {
   return toZonedTime(date, timeZone);
@@ -24,6 +24,17 @@ export function formatYearMonth(yearMonth: string) {
   return formatDate(parsed, "MMMM yyyy");
 }
 
+export function formatExtendedDateTime(date: Date | string | number, dateOnly: boolean = false) {
+  // wide date with weekday and month name
+  // year included if not current year
+  const parsed = toLocalTime(date);
+  const timePart = dateOnly ? "" : " 'kl.' HH:mm";
+  if (parsed.getFullYear === new Date().getFullYear) {
+    return formatDate(parsed, `EEEE d. MMMM${timePart}`);
+  }
+  return formatDate(parsed, `EEEE d. MMMM yyyy${timePart}`);
+}
+
 export function isTodayOrFuture(
   date: Date | string | number,
   timeZone = "UTC"