From d33c5f5fda86d4e647fc97a7e25db24bd6893e07 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 11 Sep 2025 14:00:58 -0600
Subject: [PATCH] Add timezone input to schedule form on create and edit

---
 .../schedule-day-of-month-view.svelte         |  3 +-
 .../schedule/schedule-day-of-week-view.svelte |  3 +-
 .../schedule/schedule-form-view.svelte        |  3 ++
 .../schedule/schedules-calendar-view.svelte   |  9 +++++-
 .../schedule/schedules-time-view.svelte       | 32 ++++++++++++++-----
 src/lib/i18n/locales/en/schedules.ts          |  4 ++-
 src/lib/pages/schedule-edit.svelte            |  2 ++
 src/lib/pages/schedules-create.svelte         |  2 ++
 src/lib/stores/schedules.ts                   |  3 +-
 src/lib/types/schedule.ts                     |  1 +
 10 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/schedule/schedule-day-of-month-view.svelte b/src/lib/components/schedule/schedule-day-of-month-view.svelte
index cb67092863..802a09dd69 100644
--- a/src/lib/components/schedule/schedule-day-of-month-view.svelte
+++ b/src/lib/components/schedule/schedule-day-of-month-view.svelte
@@ -9,6 +9,7 @@
   export let months: string[];
   export let hour: string;
   export let minute: string;
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -23,5 +24,5 @@
     <DayOfMonthPicker bind:daysOfMonth />
   </div>
   <MonthPicker bind:months />
-  <SchedulesTimeView bind:hour bind:minute />
+  <SchedulesTimeView bind:hour bind:minute bind:timezoneName />
 </div>
diff --git a/src/lib/components/schedule/schedule-day-of-week-view.svelte b/src/lib/components/schedule/schedule-day-of-week-view.svelte
index f16bf13045..70cdad9275 100644
--- a/src/lib/components/schedule/schedule-day-of-week-view.svelte
+++ b/src/lib/components/schedule/schedule-day-of-week-view.svelte
@@ -7,6 +7,7 @@
   export let daysOfWeek: string[];
   export let hour: string;
   export let minute: string;
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -19,5 +20,5 @@
     </p>
     <DayOfWeekPicker bind:daysOfWeek />
   </div>
-  <SchedulesTimeView bind:hour bind:minute />
+  <SchedulesTimeView bind:hour bind:minute bind:timezoneName />
 </div>
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index 887b0dd079..08dc825460 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -83,6 +83,7 @@
   let second = '';
   let phase = '';
   let cronString = '';
+  let timezoneName = schedule?.spec?.timezoneName ?? '';
 
   const decodedSearchAttributes = decodePayloadAttributes({ searchAttributes });
   const decodedWorkflowSearchAttributes = decodePayloadAttributes({
@@ -132,6 +133,7 @@
       months,
       searchAttributes: searchAttributesInput,
       workflowSearchAttributes: workflowSearchAttributesInput,
+      timezoneName: timezoneName.trim(),
     };
 
     onConfirm(preset, args, schedule);
@@ -256,6 +258,7 @@
           bind:second
           bind:phase
           bind:cronString
+          bind:timezoneName
         >
           <SchedulesSearchAttributesInputs
             bind:searchAttributesInput
diff --git a/src/lib/components/schedule/schedules-calendar-view.svelte b/src/lib/components/schedule/schedules-calendar-view.svelte
index 7829122c06..c8c172248d 100644
--- a/src/lib/components/schedule/schedules-calendar-view.svelte
+++ b/src/lib/components/schedule/schedules-calendar-view.svelte
@@ -29,6 +29,7 @@
   export let second: string;
   export let phase: string;
   export let cronString: string;
+  export let timezoneName: string;
 
   const clearSchedule = () => {
     daysOfWeek = [];
@@ -106,7 +107,12 @@
       />
     </TabPanel>
     <TabPanel id="daily-panel" tabId="daily-tab">
-      <ScheduleDayOfWeekView bind:daysOfWeek bind:hour bind:minute />
+      <ScheduleDayOfWeekView
+        bind:daysOfWeek
+        bind:hour
+        bind:minute
+        bind:timezoneName
+      />
     </TabPanel>
     <TabPanel id="monthly-panel" tabId="monthly-tab">
       <ScheduleDayOfMonthView
@@ -114,6 +120,7 @@
         bind:months
         bind:hour
         bind:minute
+        bind:timezoneName
       />
     </TabPanel>
     <TabPanel
diff --git a/src/lib/components/schedule/schedules-time-view.svelte b/src/lib/components/schedule/schedules-time-view.svelte
index a2d88f2c1b..e4bfaeab69 100644
--- a/src/lib/components/schedule/schedules-time-view.svelte
+++ b/src/lib/components/schedule/schedules-time-view.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import TimePicker from '$lib/holocene/time-picker.svelte';
   import { translate } from '$lib/i18n/translate';
 
   export let hour = '';
   export let minute = '';
+  export let timezoneName: string;
 </script>
 
 <div class="flex flex-col gap-4">
@@ -16,18 +19,31 @@
       {translate('schedules.time-view-description')}
     </p>
 
-    <TimePicker
-      bind:hour
-      bind:minute
-      twelveHourClock={false}
-      includeSeconds={false}
-    />
+    <div class="flex w-fit flex-col gap-2">
+      <TimePicker
+        bind:hour
+        bind:minute
+        twelveHourClock={false}
+        includeSeconds={false}
+      />
+      <Input
+        placeholder="UTC"
+        id="timezone-name"
+        bind:value={timezoneName}
+        label={translate('common.timezone', { timezone: '' })}
+        labelHidden
+        suffix={translate('common.timezone', { timezone: '' })}
+      />
+    </div>
   </div>
 
   <div class="flex w-full flex-row items-center gap-2">
     <Icon name="clock" aria-hidden="true" />
-    <span class="text-xs font-normal text-slate-500"
-      >{translate('common.based-on-time-preface')} Universal Standard Time (UTC)
+    <span class="text-xs text-secondary"
+      >{translate('schedules.iana-timezones-link-preface')}
+      <Link newTab href="https://www.iana.org/time-zones"
+        >{translate('schedules.iana-timezones-link')}</Link
+      >
     </span>
   </div>
 </div>
diff --git a/src/lib/i18n/locales/en/schedules.ts b/src/lib/i18n/locales/en/schedules.ts
index d7c3423b46..b6f5787e32 100644
--- a/src/lib/i18n/locales/en/schedules.ts
+++ b/src/lib/i18n/locales/en/schedules.ts
@@ -74,7 +74,7 @@ export const Strings = {
     'Select the day(s) of the week this schedule will always run on.',
   'time-view-heading': 'Time',
   'time-view-description':
-    'Specify the time (UTC) for this schedule to run. By default, the schedule will run at 00:00 UTC if left blank.',
+    'Specify the time for this schedule to run. By default, the schedule will run at 00:00 UTC if left blank.',
   'interval-view-heading': 'Recurring Time',
   'interval-view-description':
     'Specify the time interval for this schedule to run (for example every 5 minutes).',
@@ -97,4 +97,6 @@ export const Strings = {
   'getting-started-cli-link-preface': 'or get started with',
   'add-schedule-attr': 'Schedule Attributes',
   'add-workflow-attr': 'Workflow Attributes',
+  'iana-timezones-link-preface': 'Based on names in the',
+  'iana-timezones-link': 'IANA time zone database',
 } as const;
diff --git a/src/lib/pages/schedule-edit.svelte b/src/lib/pages/schedule-edit.svelte
index d9fa2fa3a8..8b8715374f 100644
--- a/src/lib/pages/schedule-edit.svelte
+++ b/src/lib/pages/schedule-edit.svelte
@@ -51,6 +51,7 @@
       months,
       searchAttributes,
       workflowSearchAttributes,
+      timezoneName,
     } = args;
     const action: ScheduleActionParameters = {
       identity,
@@ -71,6 +72,7 @@
       second,
       phase,
       cronString,
+      timezoneName,
     };
     const presets: SchedulePresetsParameters = {
       preset,
diff --git a/src/lib/pages/schedules-create.svelte b/src/lib/pages/schedules-create.svelte
index 0b9044ba4e..3f6c8e100e 100644
--- a/src/lib/pages/schedules-create.svelte
+++ b/src/lib/pages/schedules-create.svelte
@@ -39,6 +39,7 @@
       months,
       searchAttributes,
       workflowSearchAttributes,
+      timezoneName,
     } = args;
 
     const action: ScheduleActionParameters = {
@@ -60,6 +61,7 @@
       second,
       phase,
       cronString,
+      timezoneName,
     };
     const presets: SchedulePresetsParameters = {
       preset,
diff --git a/src/lib/stores/schedules.ts b/src/lib/stores/schedules.ts
index a24cc58769..4b1bf0bf82 100644
--- a/src/lib/stores/schedules.ts
+++ b/src/lib/stores/schedules.ts
@@ -47,7 +47,7 @@ const setBodySpec = (
   spec: Partial<ScheduleSpecParameters>,
   presets: SchedulePresetsParameters,
 ) => {
-  const { hour, minute, second, phase, cronString } = spec;
+  const { hour, minute, second, phase, cronString, timezoneName } = spec;
   const { preset, months, days, daysOfMonth, daysOfWeek } = presets;
   if (preset === 'string') {
     // Add the cronString as a comment to the cronString to view it for frequency
@@ -82,6 +82,7 @@ const setBodySpec = (
     ];
     body.schedule.spec.interval = [];
     body.schedule.spec.cronString = [];
+    body.schedule.spec.timezoneName = timezoneName || 'UTC';
   }
 };
 
diff --git a/src/lib/types/schedule.ts b/src/lib/types/schedule.ts
index 583f20a3b3..58c1527616 100644
--- a/src/lib/types/schedule.ts
+++ b/src/lib/types/schedule.ts
@@ -57,6 +57,7 @@ export type ScheduleSpecParameters = {
   cronString: string;
   searchAttributes: SearchAttributeInput[];
   workflowSearchAttributes?: SearchAttributeInput[];
+  timezoneName: string;
 };
 
 // For UI Only