components/EventSetting.tsx

@@ -15,12 +15,11 @@ export function EventSetting(props: Props) {
     month: "long",
     year: "numeric",
   });
-  let time = props.date.toLocaleTimeString("en-US", {
+  const time = props.date.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
     timeZoneName: "short",
   });
-  time = time.substring(0, time.length - 3); // remove the time zone tag (eg PDT) from the start date
 
   const endDate =
     props.endDate?.toLocaleDateString("en-US", {
@@ -28,53 +27,27 @@ export function EventSetting(props: Props) {
       month: "long",
       year: "numeric",
     }) ?? "";
-  const endTime =
-    props.endDate?.toLocaleTimeString("en-US", {
-      hour: "numeric",
-      minute: "numeric",
-      timeZoneName: "short",
-    }) ?? "";
 
   const location = props.online ? `Online - ${props.location}` : props.location;
   const separator = <span className={styles.separator}> | </span>;
-  let dateDisplay;
-
-  if (!endDate) {
-    dateDisplay = (
-      <>
-        <time dateTime={props.date.toISOString()}>{date}</time>
-        {separator}
-        <span>{time}</span>
-      </>
-    );
-  } else {
-    if (date != endDate) {
-      // multiday event
-      dateDisplay = (
-        <span>
-          <time dateTime={props.date.toISOString()}>{date}</time>
-          <span> - {time} to </span>
-          <time dateTime={props.date.toISOString()}>{endDate}</time>
-          <span> - {endTime}</span>
-        </span>
-      );
-    } else {
-      // same day event
-      dateDisplay = (
-        <>
-          <time dateTime={props.date.toISOString()}>{date}</time>
-          {separator}
-          <span>
-            {time} - {endTime}
-          </span>
-        </>
-      );
-    }
-  }
 
   return (
     <div className={styles.container}>
-      {dateDisplay}
+      {!props.endDate || date == endDate ? (
+        // Single day event
+        <>
+          <time dateTime={props.date.toISOString()}>{date}</time>
+          {separator}
+          <span>{time}</span>
+        </>
+      ) : (
+        // Multi day event
+        <span>
+          <time dateTime={props.date.toISOString()}>{date}</time>
+          <span> - </span>
+          <time dateTime={props.date.toISOString()}>{endDate}</time>
+        </span>
+      )}
       {separator}
       {location}
     </div>