Fixed UTC bug and added end time to next event

package.json

@@ -45,6 +45,7 @@
     "express": "^4.21.0",
     "jssha": "^3.3.1",
     "md5": "^2.3.0",
+    "moment-timezone": "^0.5.45",
     "next": "^14.2.12",
     "next-sitemap": "^4.2.3",
     "node-schedule": "^2.1.1",

src/app/_blocks/NextEvent/index.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Inter } from '@next/font/google'
+import moment from 'moment-timezone'
 import { StaticImageData } from 'next/image'
 import Link from 'next/link'
 import qs from 'qs'
@@ -185,14 +186,20 @@ export const NextEventBlock: React.FC<
   if (typeof results.docs[0] === 'object') {
     const result = results.docs[0]
 
-    const date = result.date
+    const date = moment.utc(result.date).tz('Europe/London').format('YYYY-MM-DD HH:mm')
+    const endTime = moment.utc(result.endTime).tz('Europe/London').format('YYYY-MM-DD HH:mm')
+    let concEndTime = null
 
     const dateParts = date.split('-')
     const year = dateParts[0]
     const month = parseInt(dateParts[1], 10)
-    const day = dateParts[2].split('T')[0]
-    const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':')
+    const day = dateParts[2].split(' ')[0]
+    const time = dateParts[2].split(' ')[1].split(':').slice(0, 2).join(':')
     const monthName = getMonthName(month)
+    if (endTime) {
+      const endTimeParts = endTime.split('-')
+      concEndTime = endTimeParts[2].split(' ')[1].split(':').slice(0, 2).join(':')
+    }
 
     return (
       <div style={backgroundStyle} className={classes.background}>
@@ -212,6 +219,8 @@ export const NextEventBlock: React.FC<
                 <div className={classes.start}>
                   <span className={classes.startText}>starts</span>
                   <span className={classes.startTime}>{time}</span>
+                  <span className={classes.startText}>ends</span>
+                  <span className={classes.startTime}>{concEndTime}</span>
                 </div>
               </div>
             </div>

src/app/_components/EventPopUp/index.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { Inter } from '@next/font/google'
+import moment from 'moment'
 import Link from 'next/link'
 
 import { Event } from '../../../payload/payload-types'
@@ -54,16 +55,19 @@ export const EventPopUp: React.FC<PopUpProps> = ({
     return monthNames[monthNumber - 1]
   }
 
-  const dateParts = date.split('-')
+  const localDate = moment.utc(date).tz('Europe/London').format('YYYY-MM-DD HH:mm')
+  const localEndTime = moment.utc(endTime).tz('Europe/London').format('YYYY-MM-DD HH:mm')
+  let concEndTime = null
+
+  const dateParts = localDate.split('-')
   const year = dateParts[0]
   const month = parseInt(dateParts[1], 10)
-  const day = dateParts[2].split('T')[0]
+  const day = dateParts[2].split(' ')[0]
+  const time = dateParts[2].split(' ')[1].split(':').slice(0, 2).join(':')
   const monthName = getMonthName(month)
-  const time = dateParts[2].split('T')[1].split(':').slice(0, 2).join(':')
-  let concEndTime: string | null = null
-  if (endTime) {
-    const endTimeParts = endTime.split('-')
-    concEndTime = endTimeParts[2].split('T')[1].split(':').slice(0, 2).join(':')
+  if (localEndTime) {
+    const endTimeParts = localEndTime.split('-')
+    concEndTime = endTimeParts[2].split(' ')[1].split(':').slice(0, 2).join(':')
   }
   return (
     <>

src/payload/collections/Events.ts

@@ -46,6 +46,7 @@ const Events: CollectionConfig = {
       admin: {
         date: {
           pickerAppearance: 'timeOnly',
+          displayFormat: 'hh:mm',
         },
       },
     },