From 22ea307e2c64e0c89a35488489af5b8e761c118c Mon Sep 17 00:00:00 2001
From: Rahul Kumar Rai <rahulkumarrai2711@gmail.com>
Date: Fri, 27 Feb 2026 20:33:24 +0530
Subject: [PATCH 1/2] feat: display community event times in user local
 timezone (#2283)

---
 components/LocalizedTime.tsx   | 44 ++++++++++++++++++++++++++++++++++
 pages/community/index.page.tsx |  6 ++++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 components/LocalizedTime.tsx

diff --git a/components/LocalizedTime.tsx b/components/LocalizedTime.tsx
new file mode 100644
index 000000000..10c96d308
--- /dev/null
+++ b/components/LocalizedTime.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+
+interface LocalizedTimeProps {
+  utcTime: string;
+  utcDate: string;
+}
+
+const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
+  const [localized, setLocalized] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      // Convert "YYYY-MM-DD HH:mm:ss" to ISO "YYYY-MM-DDTHH:mm:ssZ"
+      const dateStr = utcDate.replace(' ', 'T') + 'Z';
+      const date = new Date(dateStr);
+
+      if (isNaN(date.getTime())) return;
+
+      const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+      // Don't show if user is already in UTC to avoid redundancy
+      if (userTimeZone === 'UTC' || userTimeZone === 'Etc/UTC') return;
+
+      const formatted = new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZoneName: 'short',
+      }).format(date);
+
+      setLocalized(formatted);
+    } catch (err) {
+      console.error('Error localizing time:', err);
+    }
+  }, [utcDate]);
+
+  return (
+    <>
+      {utcTime} UTC
+      {localized && <span> ({localized})</span>}
+    </>
+  );
+};
+
+export default LocalizedTime;
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index c93b25461..ef0995238 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -15,6 +15,7 @@ import {
   fetchRemoteICalFile,
   printEventsForNextWeeks,
 } from '../../lib/calendarUtils';
+import LocalizedTime from '~/components/LocalizedTime';
 
 export const getStaticProps: GetStaticProps = async () => {
   const PATH = 'pages/blog/posts';
@@ -286,7 +287,10 @@ export default function CommunityPages(props: any) {
                         <b className='text-blue-700'>{event.title}</b>
                         <br />
                         <span>
-                          {event.time}({event.timezone})
+                          <LocalizedTime
+                            utcTime={event.time}
+                            utcDate={event.parsedStartDate}
+                          />
                         </span>
                       </p>
                     </div>

From ef5463abf5b1c19716a479952b40ca8414060c2c Mon Sep 17 00:00:00 2001
From: Rahul Kumar Rai <rahulkumarrai2711@gmail.com>
Date: Fri, 27 Feb 2026 23:27:32 +0530
Subject: [PATCH 2/2] feat: localize community event times and fix
 serialization bug (#2283)

- Implemented LocalizedTime component using Intl API\n- Handled Next.js hydration for client-side timezone detection\n- Fixed serialization error in getStaticProps when calendar fetch fails
---
 components/LocalizedTime.tsx   | 23 ++++++++++++++++-------
 lib/calendarUtils.ts           |  2 +-
 pages/community/index.page.tsx |  2 +-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/components/LocalizedTime.tsx b/components/LocalizedTime.tsx
index 10c96d308..4aa078594 100644
--- a/components/LocalizedTime.tsx
+++ b/components/LocalizedTime.tsx
@@ -10,23 +10,28 @@ const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
 
   useEffect(() => {
     try {
-      // Convert "YYYY-MM-DD HH:mm:ss" to ISO "YYYY-MM-DDTHH:mm:ssZ"
       const dateStr = utcDate.replace(' ', 'T') + 'Z';
       const date = new Date(dateStr);
-
       if (isNaN(date.getTime())) return;
 
       const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-      // Don't show if user is already in UTC to avoid redundancy
       if (userTimeZone === 'UTC' || userTimeZone === 'Etc/UTC') return;
 
-      const formatted = new Intl.DateTimeFormat(undefined, {
+      const options: Intl.DateTimeFormatOptions = {
         hour: '2-digit',
         minute: '2-digit',
         timeZoneName: 'short',
-      }).format(date);
+      };
+
+      // Check if the date changed locally (e.g., event is 11 PM UTC, but 4 AM next day local)
+      if (new Date(dateStr).getUTCDate() !== date.getDate()) {
+        options.month = 'short';
+        options.day = 'numeric';
+      }
 
+      const formatted = new Intl.DateTimeFormat(undefined, options).format(
+        date,
+      );
       setLocalized(formatted);
     } catch (err) {
       console.error('Error localizing time:', err);
@@ -36,7 +41,11 @@ const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
   return (
     <>
       {utcTime} UTC
-      {localized && <span> ({localized})</span>}
+      {localized && (
+        <span className='text-blue-600 dark:text-blue-400 font-semibold ml-1'>
+          ({localized})
+        </span>
+      )}
     </>
   );
 };
diff --git a/lib/calendarUtils.ts b/lib/calendarUtils.ts
index 269b7bd0a..be369fa22 100644
--- a/lib/calendarUtils.ts
+++ b/lib/calendarUtils.ts
@@ -17,7 +17,7 @@ export function printEventsForNextWeeks(icalData: { [x: string]: any }) {
   const arrayDates = [];
   if (!icalData) {
     console.error('iCal data is empty or invalid.');
-    return;
+    return [];
   }
 
   // Calculate the range of dates for the next 12 weeks from today
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index ef0995238..63201ec01 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       blogPosts,
-      datesInfo,
+      datesInfo: datesInfo ?? [],
       fallback: false,
     },
   };