Display time range in session details

Author: hasparus

src/app/conf/2025/schedule/[id]/page.tsx

@@ -22,6 +22,7 @@ import { CtaCardSection } from "../../components/cta-card-section"
 import { Button } from "@/app/conf/_design-system/button"
 import { SessionTags } from "../../components/session-tags"
 import { formatDescription } from "./format-description"
+import { formatBlockTime } from "../_components/format-block-time"
 
 type SessionProps = { params: { id: string } }
 
@@ -194,10 +195,15 @@ function SessionHeader({
           <div className="flex items-center gap-2">
             <CalendarIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
             <time dateTime={event.event_start}>
-              {new Date(event.event_start).toLocaleDateString("en-US", {
+              {new Date(event.event_start).toLocaleString("en-US", {
                 day: "numeric",
                 month: "long",
               })}
+              {", "}
+              {formatBlockTime(
+                event.event_start,
+                event.event_end ? new Date(event.event_end) : undefined,
+              )}
             </time>
           </div>
           <div className="flex items-center gap-2">

src/app/conf/2025/schedule/_components/format-block-time.tsx

@@ -0,0 +1,13 @@
+import { parseISO } from "date-fns"
+
+const timeFormat = new Intl.DateTimeFormat(undefined, {
+  hour: "2-digit",
+  minute: "2-digit",
+})
+export const formatBlockTime = (start: string, end?: Date) => {
+  const startDate = parseISO(start)
+  if (end) {
+    return timeFormat.formatRange(startDate, end)
+  }
+  return timeFormat.format(startDate)
+}

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -16,6 +16,7 @@ import {
   FilterStates,
   ResetFiltersButton,
 } from "./filters"
+import { formatBlockTime } from "./format-block-time"
 
 export interface FiltersConfig
   extends Partial<
@@ -101,19 +102,6 @@ function getSessionsByDay(
   }
 }
 
-const timeFormat = new Intl.DateTimeFormat(undefined, {
-  hour: "2-digit",
-  minute: "2-digit",
-})
-const formatBlockTime = (start: string, end?: string) => {
-  const startDate = parseISO(start)
-  if (end) {
-    const endDate = parseISO(end)
-    return timeFormat.formatRange(startDate, endDate)
-  }
-  return timeFormat.format(startDate)
-}
-
 export interface ScheduleListProps {
   showFilter?: boolean
   scheduleData: ScheduleSession[]
@@ -205,8 +193,18 @@ export function ScheduleList({
                 </h3>
                 {Object.entries(concurrentSessionsGroup).map(
                   ([sessionDate, sessions], i, blocks) => {
-                    const blockEnd = sessions[0]?.event_end
-                    const nextBlockStart = blocks[i + 1]?.[0]
+                    const blockEnd = new Date(
+                      Math.max(
+                        ...sessions.map(session =>
+                          new Date(session.event_end).getTime(),
+                        ),
+                      ),
+                    )
+
+                    const nextBlock = blocks[i + 1]
+                    const nextBlockStart = nextBlock?.[0]
+                      ? new Date(nextBlock[0])
+                      : undefined
 
                     const isBreak =
                       sessions[0]?.event_type