Added end dates to event description card and mini event card

components/EventDescriptionCard.tsx

@@ -14,6 +14,7 @@ interface Props {
   online: boolean;
   location: string;
   date: Date;
+  endDate?: Date;
   poster?: string;
   registerLink?: string;
   permaLink: string;
@@ -38,6 +39,7 @@ export function EventDescriptionCard({
   online,
   registerLink,
   permaLink,
+  endDate,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -48,7 +50,12 @@ export function EventDescriptionCard({
       <div className={styles.details}>
         <h1 className={styles.name}>{name}</h1>
         <h2 className={styles.setting}>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            date={date}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
         <p className={styles.desc}>{short}</p>
         <Link href={permaLink}>Learn more</Link>

components/EventSetting.tsx

@@ -15,22 +15,25 @@ export function EventSetting(props: Props) {
     month: "long",
     year: "numeric",
   });
-  const time = props.date.toLocaleTimeString("en-US", {
+  let 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", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-  const endTime = props.endDate?.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
-    timeZoneName: "short",
-  });
+  const endDate =
+    props.endDate?.toLocaleDateString("en-US", {
+      day: "numeric",
+      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>;

components/MiniEventCard.tsx

@@ -28,6 +28,7 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   year,
   term,
   slug,
+  endDate,
 }) => {
   return (
     <details className={styles.card}>
@@ -38,7 +39,12 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
             <div className={styles.nameSpacer}></div>
           </h2>
           <div className={styles.info}>
-            <EventSetting date={date} location={location} online={online} />
+            <EventSetting
+              date={date}
+              endDate={endDate}
+              location={location}
+              online={online}
+            />
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>