From 90a2a422fc8e151454eccac90af32402e4c7352d Mon Sep 17 00:00:00 2001
From: Rumesh <rumesh.lahiru@differential.com>
Date: Wed, 14 Jan 2026 13:39:48 +0530
Subject: [PATCH 1/2] handle multi day event start end time

---
 .../web-shared/components/ContentSingle.js    | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index 2ecc14b9..331c2b0c 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -37,6 +37,12 @@ const infoDivider = (
   </BodyText>
 );
 
+const timeDivider = (
+  <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
+    -
+  </BodyText>
+);
+
 const CalendarIconWrapper = styled.span`
   margin-right: ${({ theme }) => theme.space.xxs};
   display: inline-flex;
@@ -56,7 +62,26 @@ const FlexBodyText = styled(BodyText)`
   align-items: center;
 `;
 
-function CalendarData({ start, end, location }) {
+function CalendarData({ start, end, startTime, endTime, location }) {
+  const [formatEndDateTime, setFormatEndDateTime] = useState(null);
+  const [formatStartDateTime, setFormatStartDateTime] = useState(null);
+
+  useEffect(() => {
+    if (start === end) {
+      setFormatEndDateTime(endTime);
+    } else {
+      setFormatEndDateTime(end + ' | ' + endTime);
+    }
+  }, [start, end, endTime]);
+
+  useEffect(() => {
+    if (startTime) {
+      setFormatStartDateTime(start + ' | ' + startTime);
+    } else {
+      setFormatEndDateTime(start);
+    }
+  }, [start, startTime]);
+
   return (
     <>
       {location ? (
@@ -66,17 +91,17 @@ function CalendarData({ start, end, location }) {
         </FlexBodyText>
       ) : null}
       {start && location ? infoDivider : null}
-      {start ? (
+      {formatStartDateTime ? (
         <FlexBodyText color="text.secondary" mb={'xxs'}>
           <CalendarIcon name="calendar" />
-          {start}
+          {formatStartDateTime}
         </FlexBodyText>
       ) : null}
-      {end && start ? infoDivider : null}
-      {end ? (
+      {formatStartDateTime && formatEndDateTime ? timeDivider : null}
+      {formatEndDateTime ? (
         <FlexBodyText color="text.secondary" mb={'xxs'}>
           <CalendarIcon name="clock" />
-          {end}
+          {formatEndDateTime}
         </FlexBodyText>
       ) : null}
     </>
@@ -184,13 +209,14 @@ function ContentSingle(props = {}) {
   const formattedStartDate = props?.data?.start
     ? format(parseISO(props.data.start), 'eee, MMMM do, yyyy')
     : null;
-  const formattedStartToEnd =
-    props?.data?.start && props?.data?.end
-      ? `${format(parseISO(props.data.start), 'hh:mm a')} — ${format(
-          parseISO(props.data.end),
-          'hh:mm a'
-        )}`
-      : null;
+  const formattedStartTime = props?.data?.start
+    ? format(parseISO(props.data.start), 'hh:mm a')
+    : null;
+  const formattedEndDate = props?.data?.end
+    ? format(parseISO(props.data.end), 'eee, MMMM do, yyyy')
+    : null;
+  const formattedEndTime = props?.data?.end ? format(parseISO(props.data.end), 'hh:mm a') : null;
+
   const handleActionPress = (item) => {
     if (idFromParams !== getURLFromType(item)) {
       navigate({
@@ -283,7 +309,9 @@ function ContentSingle(props = {}) {
 
                 <CalendarData
                   start={formattedStartDate}
-                  end={formattedStartToEnd}
+                  end={formattedEndDate}
+                  startTime={formattedStartTime}
+                  endTime={formattedEndTime}
                   location={props?.data?.location}
                 />
               </Box>

From 4a4426aa2c5f97542de525ca08d3f8da9de12cd2 Mon Sep 17 00:00:00 2001
From: Rumesh <rumesh.lahiru@differential.com>
Date: Wed, 14 Jan 2026 14:52:25 +0530
Subject: [PATCH 2/2] modify design

---
 .../web-shared/components/ContentSingle.js    | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index 331c2b0c..8b2d359e 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -90,19 +90,23 @@ function CalendarData({ start, end, startTime, endTime, location }) {
           {location}
         </FlexBodyText>
       ) : null}
-      {start && location ? infoDivider : null}
-      {formatStartDateTime ? (
-        <FlexBodyText color="text.secondary" mb={'xxs'}>
-          <CalendarIcon name="calendar" />
-          {formatStartDateTime}
-        </FlexBodyText>
-      ) : null}
-      {formatStartDateTime && formatEndDateTime ? timeDivider : null}
-      {formatEndDateTime ? (
-        <FlexBodyText color="text.secondary" mb={'xxs'}>
-          <CalendarIcon name="clock" />
-          {formatEndDateTime}
-        </FlexBodyText>
+      {(formatStartDateTime || formatEndDateTime) && location ? infoDivider : null}
+      {formatStartDateTime || formatEndDateTime ? (
+        <Box display="flex" flexDirection={'row'} alignItems="flex-start" width="100%">
+          {formatStartDateTime ? (
+            <FlexBodyText color="text.secondary" mb={'xxs'}>
+              <CalendarIcon name="calendar" />
+              {formatStartDateTime}
+            </FlexBodyText>
+          ) : null}
+          {formatStartDateTime && formatEndDateTime ? timeDivider : null}
+          {formatEndDateTime ? (
+            <FlexBodyText color="text.secondary" mb={'xxs'}>
+              <CalendarIcon name="clock" />
+              {formatEndDateTime}
+            </FlexBodyText>
+          ) : null}
+        </Box>
       ) : null}
     </>
   );