[#268] changed timezone offset calculation (#306)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.tsx

@@ -407,6 +407,7 @@ export default function CalendarApp({
                 </div>
                 <TimezoneSelector
                   value={timezone}
+                  referenceDate={calendarRef.current?.getDate() ?? new Date()}
                   onChange={(newTimezone: string) =>
                     dispatch(setTimeZone(newTimezone))
                   }

src/components/Calendar/TimezoneSelector.tsx

@@ -1,5 +1,6 @@
 import { Button, Popover } from "@mui/material";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import moment from "moment";
 import { MouseEvent, useMemo, useState } from "react";
 import { TIMEZONES } from "../../utils/timezone-data";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
@@ -7,9 +8,14 @@ import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
 interface TimezoneSelectProps {
   value: string;
   onChange: (value: string) => void;
+  referenceDate: Date;
 }
 
-export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
+export function TimezoneSelector({
+  value,
+  onChange,
+  referenceDate,
+}: TimezoneSelectProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const timezoneList = useMemo(() => {
@@ -24,7 +30,7 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
   const effectiveTimezone = value
     ? resolveTimezone(value)
     : timezoneList.browserTz;
-  const selectedOffset = getTimezoneOffset(effectiveTimezone);
+  const selectedOffset = getTimezoneOffset(effectiveTimezone, referenceDate);
 
   const handleOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -76,7 +82,9 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
           value={effectiveTimezone}
           onChange={onChange}
           zones={timezoneList.zones}
-          getTimezoneOffset={getTimezoneOffset}
+          getTimezoneOffset={(tzName: string) =>
+            getTimezoneOffset(tzName, referenceDate)
+          }
           autoFocus={true}
           showIcon={true}
           inputFontSize="14px"
@@ -99,20 +107,17 @@ export function resolveTimezone(tzName: string): string {
   return tzName;
 }
 
-export function getTimezoneOffset(tzName: string): string {
-  const resolvedTz = resolveTimezone(tzName);
-  const tzData = TIMEZONES.zones[resolvedTz];
-  if (!tzData) return "";
+export function getTimezoneOffset(
+  tzName: string,
+  date: Date = new Date()
+): string {
+  const fmt = new Intl.DateTimeFormat(undefined, {
+    timeZone: tzName,
+    timeZoneName: "shortOffset",
+  });
 
-  const icsMatch = tzData.ics.match(/TZOFFSETTO:([+-]\d{4})/);
-  if (!icsMatch) return "";
-
-  const offset = icsMatch[1];
-  const hours = parseInt(offset.slice(0, 3));
-  const minutes = parseInt(offset.slice(3));
-
-  if (minutes === 0) {
-    return `UTC${hours >= 0 ? "+" : ""}${hours}`;
-  }
-  return `UTC${hours >= 0 ? "+" : ""}${hours}:${Math.abs(minutes).toString().padStart(2, "0")}`;
+  const currentDate = moment(date).isValid() ? date : new Date();
+  const parts = fmt.formatToParts(currentDate);
+  const offsetPart = parts.find((p) => p.type === "timeZoneName");
+  return offsetPart?.value.replace("GMT", "UTC") ?? "";
 }

src/components/Event/EventFormFields.tsx

@@ -90,7 +90,7 @@ interface EventFormFieldsProps {
   timezoneList: {
     zones: string[];
     browserTz: string;
-    getTimezoneOffset: (tzName: string) => string;
+    getTimezoneOffset: (tzName: string, date: Date) => string;
   };
 
   // Event handlers
@@ -534,7 +534,9 @@ export default function EventFormFields({
             value={timezone}
             onChange={setTimezone}
             zones={timezoneList.zones}
-            getTimezoneOffset={timezoneList.getTimezoneOffset}
+            getTimezoneOffset={(tzName: string) =>
+              timezoneList.getTimezoneOffset(tzName, new Date(start))
+            }
             showIcon={true}
             width={240}
             size="small"