added timeZone dropdown in right panel

Author: MenamAfzal

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -79,6 +79,7 @@ import {
   resourceTimeGridHeaderToolbar,
 } from "./calendarConstants";
 import { EventOptionControl } from "./eventOptionsControl";
+import { timeZoneOptions } from "./timeZone";
 
 function fixOldData(oldData: any) {
   if(!Boolean(oldData)) return;
@@ -150,6 +151,7 @@ let childrenMap: any = {
   currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
   currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
 };
 
 // this should ensure backwards compatibility with older versions of the SDK
@@ -187,7 +189,8 @@ let CalendarBasicComp = (function () {
     currentFreeView?: string; 
     currentPremiumView?: string; 
     animationStyle?:any;
-    modalStyle?:any
+    modalStyle?:any;
+    timeZone?: string; 
   }) => {
     const comp = useContext(EditorContext)?.getUICompByName(
       useContext(CompNameContext)
@@ -315,6 +318,7 @@ let CalendarBasicComp = (function () {
       licenseKey,
       resourceName,
       modalStyle,
+      timeZone
     } = props;
 
     const handleEventDataChange = useCallback((data: Array<Record<string,any>>) => {
@@ -890,6 +894,7 @@ let CalendarBasicComp = (function () {
       animationStyle:  { getPropertyView: () => any; };
       modalStyle: { getPropertyView: () => any; };
       licenseKey: { getView: () => any; propertyView: (arg0: { label: string; tooltip: string; }) => any; };
+      timeZone: { propertyView: (arg0: { label: string; }) => any; }; 
     }) => {
       const license = children.licenseKey.getView();
 
@@ -904,6 +909,9 @@ let CalendarBasicComp = (function () {
               title: "Events",
               newOptionLabel: "Event",
             })}
+            {children.timeZone.propertyView({
+            label: trans("calendar.timeZone")
+             })}
           </Section>
           { license != "" && 
             <Section name={trans("calendar.resources")}>

client/packages/lowcoder-comps/src/comps/calendarComp/timeZone.ts

@@ -0,0 +1,35 @@
+import { trans } from "../../i18n/comps";
+
+export const timeZoneOptions = [
+    { label: trans("timeZone.UserChoice"), value: "UserChoice" },
+    { label: trans("timeZone.UTC-12:00"), value: "Pacific/Baker" },
+    { label: trans("timeZone.UTC-11:00"), value: "Pacific/Niue" },
+    { label: trans("timeZone.UTC-10:00"), value: "Pacific/Honolulu" },
+    { label: trans("timeZone.UTC-09:00"), value: "America/Anchorage" },
+    { label: trans("timeZone.UTC-08:00"), value: "America/Tijuana" },
+    { label: trans("timeZone.UTC-07:00"), value: "America/Los_Angeles" },
+    { label: trans("timeZone.UTC-06:00"), value: "America/Chicago" },
+    { label: trans("timeZone.UTC-05:00"), value: "America/New_York" },
+    { label: trans("timeZone.UTC-04:00"), value: "America/Halifax" },
+    { label: trans("timeZone.UTC-03:00"), value: "America/Argentina/Buenos_Aires" },
+    { label: trans("timeZone.UTC-02:00"), value: "Atlantic/South_Georgia" },
+    { label: trans("timeZone.UTC-01:00"), value: "Atlantic/Cape_Verde" },
+    { label: trans("timeZone.UTC+00:00"), value: "Etc/UTC" },
+    { label: trans("timeZone.UTC+01:00"), value: "Europe/Berlin" },
+    { label: trans("timeZone.UTC+02:00"), value: "Europe/Bucharest" },
+    { label: trans("timeZone.UTC+03:00"), value: "Europe/Moscow" },
+    { label: trans("timeZone.UTC+04:00"), value: "Asia/Dubai" },
+    { label: trans("timeZone.UTC+05:00"), value: "Asia/Karachi" },
+    { label: trans("timeZone.UTC+05:30"), value: "Asia/Kolkata" },
+    { label: trans("timeZone.UTC+05:45"), value: "Asia/Kathmandu" }, 
+    { label: trans("timeZone.UTC+06:00"), value: "Asia/Dhaka" },
+    { label: trans("timeZone.UTC+06:30"), value: "Asia/Rangoon" },
+    { label: trans("timeZone.UTC+07:00"), value: "Asia/Bangkok" },
+    { label: trans("timeZone.UTC+08:00"), value: "Asia/Shanghai" },
+    { label: trans("timeZone.UTC+09:00"), value: "Asia/Tokyo" },
+    { label: trans("timeZone.UTC+09:30"), value: "Australia/Darwin" },
+    { label: trans("timeZone.UTC+10:00"), value: "Australia/Sydney" },
+    { label: trans("timeZone.UTC+11:00"), value: "Pacific/Guadalcanal" }, 
+    { label: trans("timeZone.UTC+12:00"), value: "Pacific/Auckland" }, 
+    { label: trans("timeZone.UTC+13:00"), value: "Pacific/Tongatapu" }, 
+];

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -350,5 +350,38 @@ export const en = {
     timeZone:"Time Zone",
     timeRange:"Time Range",
   },
+  timeZone: {
+  "UTC-12:00": "(UTC-12:00) Int'l Date Line W",
+  "UTC-11:00": "(UTC-11:00) UTC-11",
+  "UTC-10:00": "(UTC-10:00) Hawaii",
+  "UTC-09:00": "(UTC-09:00) Alaska",
+  "UTC-08:00": "(UTC-08:00) Baja CA",
+  "UTC-07:00": "(UTC-07:00) Pacific Time (US)",
+  "UTC-06:00": "(UTC-06:00) Central Time (US)",
+  "UTC-05:00": "(UTC-05:00) Eastern Time (US)",
+  "UTC-04:00": "(UTC-04:00) Atlantic Time",
+  "UTC-03:00": "(UTC-03:00) Buenos Aires",
+  "UTC-02:00": "(UTC-02:00) UTC-02",
+  "UTC-01:00": "(UTC-01:00) Cape Verde",
+  "UTC+00:00": "(UTC 00:00) UTC",
+  "UTC+01:00": "(UTC+01:00) Berlin, Rome",
+  "UTC+02:00": "(UTC+02:00) Athens, Bucharest",
+  "UTC+03:00": "(UTC+03:00) Moscow",
+  "UTC+04:00": "(UTC+04:00) Dubai, Muscat",
+  "UTC+05:00": "(UTC+05:00) Karachi",
+  "UTC+05:30": "(UTC+05:30) New Delhi",
+  "UTC+05:45": "(UTC+05:45) Kathmandu",
+  "UTC+06:00": "(UTC+06:00) Dhaka",
+  "UTC+06:30": "(UTC+06:30) Yangon",
+  "UTC+07:00": "(UTC+07:00) Bangkok",
+  "UTC+08:00": "(UTC+08:00) Beijing, HK",
+  "UTC+09:00": "(UTC+09:00) Tokyo, Seoul",
+  "UTC+09:30": "(UTC+09:30) Adelaide, Darwin",
+  "UTC+10:00": "(UTC+10:00) Sydney",
+  "UTC+11:00": "(UTC+11:00) Solomon Islands, New Caledonia",
+  "UTC+12:00": "(UTC+12:00) Auckland, Fiji",
+  "UTC+13:00": "(UTC+13:00) Nuku'alofa, Samoa",
+  "UserChoice": "UserChoice"
+},
 };