fix: adjust start & end of event when system timezone is using DST

apps/calendar/src/hooks/timezone/useEventsWithTimezone.ts

@@ -5,6 +5,8 @@ import { createEventCollection } from '@src/controller/base';
 import { useTZConverter } from '@src/hooks/timezone/useTZConverter';
 import type EventModel from '@src/model/eventModel';
 import { primaryTimezoneSelector } from '@src/selectors/timezone';
+import TZDate from '@src/time/date';
+import { isUsingDST } from '@src/time/timezone';
 import type Collection from '@src/utils/collection';
 import { clone } from '@src/utils/object';
 
@@ -17,6 +19,7 @@ export function useEventsWithTimezone(events: Collection<EventModel>) {
       return events;
     }
 
+    const isSystemUsingDST = isUsingDST(new TZDate());
     const {
       timedEvents = createEventCollection(),
       totalEvents = createEventCollection(),
@@ -26,8 +29,30 @@ export function useEventsWithTimezone(events: Collection<EventModel>) {
 
     timedEvents.each((eventModel) => {
       const clonedEventModel = clone(eventModel);
-      clonedEventModel.start = tzConverter(primaryTimezoneName, clonedEventModel.start);
-      clonedEventModel.end = tzConverter(primaryTimezoneName, clonedEventModel.end);
+
+      let zonedStart = tzConverter(primaryTimezoneName, clonedEventModel.start);
+      let zonedEnd = tzConverter(primaryTimezoneName, clonedEventModel.end);
+
+      // Adjust the start and end time to the system timezone.
+      if (isSystemUsingDST) {
+        if (!isUsingDST(zonedStart)) {
+          zonedStart = zonedStart.addHours(1);
+        }
+        if (!isUsingDST(zonedEnd)) {
+          zonedEnd = zonedEnd.addHours(1);
+        }
+      } else {
+        if (isUsingDST(zonedStart)) {
+          zonedStart = zonedStart.addHours(-1);
+        }
+        if (isUsingDST(zonedEnd)) {
+          zonedEnd = zonedEnd.addHours(-1);
+        }
+      }
+
+      clonedEventModel.start = zonedStart;
+      clonedEventModel.end = zonedEnd;
+
       totalEvents.add(clonedEventModel);
     });
 

apps/calendar/src/time/timezone.ts

@@ -32,7 +32,7 @@ export function calculateTimezoneOffset(timezoneName: string, targetDate: TZDate
       'Intl.DateTimeFormat is not fully supported. So It will return the local timezone offset only.\nYou can use a polyfill to fix this issue.'
     );
 
-    return -targetDate.getTimezoneOffset();
+    return -targetDate.toDate().getTimezoneOffset();
   }
 
   validateIANATimezoneName(timezoneName);
@@ -63,7 +63,8 @@ export function isUsingDST(targetDate: TZDate, timezoneName?: string) {
   }
 
   return (
-    Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()) !== targetDate.getTimezoneOffset()
+    Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()) !==
+    targetDate.toDate().getTimezoneOffset()
   );
 }
 

apps/calendar/stories/e2e/week.stories.tsx

@@ -1,9 +1,13 @@
 import { h } from 'preact';
 
+import moment from 'moment-timezone';
+
 import { mockWeekViewEvents } from '@stories/mocks/mockWeekViewEvents';
 import type { CalendarExampleStory } from '@stories/util/calendarExample';
 import { CalendarExample } from '@stories/util/calendarExample';
 
+import type { EventObject } from '@t/events';
+
 export default { title: 'E2E/Week View' };
 
 const Template: CalendarExampleStory = (args) => <CalendarExample {...args} />;
@@ -170,6 +174,86 @@ DaylightSavingTimeTransitionSouthern.args = {
   },
 };
 
+// NOTE: For manual testing purposes
+const timezoneNameForSystemTimezoneTest = 'US/Pacific';
+// const timezoneNameForSystemTimezoneTest = 'Asia/Seoul';
+export const SystemTimezoneTest = Template.bind({});
+SystemTimezoneTest.args = {
+  ...Template.args,
+  options: {
+    ...Template.args.options,
+    useFormPopup: false,
+    timezone: {
+      zones: [
+        {
+          timezoneName: timezoneNameForSystemTimezoneTest,
+        },
+      ],
+    },
+  },
+  onInit: (cal) => {
+    const convert = (d: Date) =>
+      moment
+        .tz(
+          moment([
+            d.getFullYear(),
+            d.getMonth(),
+            d.getDate(),
+            d.getHours(),
+            d.getMinutes(),
+            d.getSeconds(),
+          ]).format('YYYY-MM-DD HH:mm:ss'),
+          timezoneNameForSystemTimezoneTest
+        )
+        .toISOString();
+
+    cal.setDate('2022-03-09T00:00:00Z');
+
+    cal.createEvents([
+      {
+        id: 'pst',
+        title: 'PST',
+        start: '2022-03-09T09:00:00Z', // 01:00 UTC-08, 18:00 UTC+09
+        end: '2022-03-09T10:00:00Z', // 02:00 UTC-08, 19:00 UTC+09
+      },
+      {
+        id: 'pdt',
+        title: 'PDT',
+        start: '2022-03-16T08:00:00Z', // 01:00 UTC-07, 17:00 UTC+09
+        end: '2022-03-16T09:00:00Z', // 02:00 UTC-07, 18:00 UTC+09
+      },
+    ]);
+
+    cal.on('selectDateTime', (info) => {
+      const startDate = info.start;
+      const endDate = info.end;
+
+      cal.createEvents([
+        {
+          id: Date.now().toString(32).slice(0, 8),
+          title: 'New Event',
+          start: convert(startDate),
+          end: convert(endDate),
+          category: 'time',
+        },
+      ]);
+
+      cal.clearGridSelections();
+    });
+
+    cal.on('beforeUpdateEvent', ({ event, changes }) => {
+      const zonedChanges = Object.keys(changes).reduce<EventObject>((acc, _k) => {
+        const key = _k as keyof EventObject;
+        acc[key] = convert(changes[key]);
+
+        return acc;
+      }, {});
+
+      cal.updateEvent(event.id, event.calendarId, zonedChanges);
+    });
+  },
+};
+
 export const CustomTemplate = Template.bind({});
 CustomTemplate.args = {
   ...Template.args,