diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 1adae453de..be2ac00f1c 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -1,9 +1,8 @@
import { FC, useEffect, useState } from "react";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
import Switch from "@calcom/ui/Switch";
-import { useLocale } from "@lib/hooks/useLocale";
-
import TimezoneSelect, { ITimezoneOption } from "@components/ui/form/TimezoneSelect";
import { is24h, timeZone } from "../../lib/clock";
@@ -11,11 +10,12 @@ import { is24h, timeZone } from "../../lib/clock";
type Props = {
onSelectTimeZone: (selectedTimeZone: string) => void;
onToggle24hClock: (is24hClock: boolean) => void;
+ timeFormat: string;
};
-const TimeOptions: FC = ({ onToggle24hClock, onSelectTimeZone }) => {
+const TimeOptions: FC = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
const [selectedTimeZone, setSelectedTimeZone] = useState("");
- const [is24hClock, setIs24hClock] = useState(false);
+ const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
const { t } = useLocale();
useEffect(() => {
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index e3815fc3f5..74c4c9a8cf 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -241,15 +241,18 @@ function TimezoneDropdown({
onChangeTimeFormat,
onChangeTimeZone,
timeZone,
+ timeFormat,
}: {
onChangeTimeFormat: (newTimeFormat: string) => void;
onChangeTimeZone: (newTimeZone: string) => void;
timeZone?: string;
+ timeFormat: string;
}) {
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
useEffect(() => {
handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
+
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -277,7 +280,11 @@ function TimezoneDropdown({
-
+
);
@@ -363,6 +370,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
const timezoneDropdown = useMemo(
() => (
{
+ const localStorageTimeFormat = localStorage.getItem("timeOption.is24hClock");
+ // If time format is already stored in the browser then retrieve and return early
+ if (localStorageTimeFormat === "true") {
+ return true;
+ } else if (localStorageTimeFormat === "false") {
+ return false;
+ }
+
let locale = "en-US";
- if (typeof window !== "undefined" && navigator) locale = navigator?.language;
- return !new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/AM/);
+ if (typeof window !== "undefined" && navigator) locale = window.navigator?.language;
+
+ if (!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/)) {
+ localStorage.setItem("timeOption.is24hClock", "false");
+ return false;
+ } else {
+ localStorage.setItem("timeOption.is24hClock", "true");
+ return true;
+ }
};
+
export const detectBrowserTimeFormat = isBrowserLocale24h() ? "H:mm" : "h:mma";
diff --git a/apps/web/pages/api/user/[id].ts b/apps/web/pages/api/user/[id].ts
index 1b3b03afd8..80e8f58628 100644
--- a/apps/web/pages/api/user/[id].ts
+++ b/apps/web/pages/api/user/[id].ts
@@ -52,6 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
"name",
"avatar",
"timeZone",
+ "timeFormat",
"weekStart",
"hideBranding",
"theme",
@@ -68,6 +69,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
bio: true,
avatar: true,
timeZone: true,
+ timeFormat: true,
weekStart: true,
startTime: true,
endTime: true,
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index 06947fb8e9..13e0e88af9 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -27,6 +27,7 @@ import { DEFAULT_SCHEDULE } from "@lib/availability";
import { useLocale } from "@lib/hooks/useLocale";
import prisma from "@lib/prisma";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
+import { isBrowserLocale24h } from "@lib/timeFormat";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { Schedule as ScheduleType } from "@lib/types/schedule";
@@ -214,8 +215,12 @@ export default function Onboarding(props: inferSSRProps & { localeProp: str
const enteredLanguage = selectedLanguage.value;
const enteredTimeFormat = selectedTimeFormat.value;
+ // Write time format to localStorage if available
+ window.localStorage.setItem("timeOption.is24hClock", selectedTimeFormat.value === 12 ? "false" : "true");
+
// TODO: Add validation
mutation.mutate({
diff --git a/packages/app-store/office365video/api/callback.ts b/packages/app-store/office365video/api/callback.ts
index 52cc927611..81992e4ddd 100644
--- a/packages/app-store/office365video/api/callback.ts
+++ b/packages/app-store/office365video/api/callback.ts
@@ -14,7 +14,6 @@ let client_secret = "";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { code } = req.query;
- console.log("🚀 ~ file: callback.ts ~ line 14 ~ handler ~ code", req.query);
if (typeof code !== "string") {
res.status(400).json({ message: "No code returned" });