ayanova/src/api/locale.js

@@ -76,30 +76,82 @@ export default {
     return window.$gz.store.state.userOptions.hour12;
   },
 
-  // ///////////////////////////////////////////
-  // // Convert timestamp utc epoch value
-  // // to local timestamp epoch value
-  // //
-  // utcEpochToLocalEpoch(value, timeZoneName) {
-  //   if (!value) {
-  //     return null;
-  //   }
-  //   if (!timeZoneName) {
-  //     timeZoneName = this.getResolvedTimeZoneName();
-  //   }
+  ///////////////////////////////////////////
+  // Turn a utc date into a vueitfy calendar
+  // schedule control compatible format
+  // localized:
+  //
+  // "It must be a Date, number of seconds since Epoch, or a string in the format of YYYY-MM-DD or YYYY-MM-DD hh:mm. Zero-padding is optional and seconds are ignored.""
+  //
+  //
+  utcDateToScheduleCompatibleFormatLocalized(
+    value,
+    timeZoneName,
+    languageName,
+    hour12
+  ) {
+    if (!value) {
+      return "";
+    }
+    if (!timeZoneName) {
+      timeZoneName = this.getResolvedTimeZoneName();
+    }
+    if (!languageName) {
+      languageName = this.getResolvedLanguage();
+    }
 
-  //   let parsedDate = new Date(value);
+    if (!hour12) {
+      hour12 = this.getHour12();
+    }
 
-  //   //is it a valid date?
-  //   if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {
-  //     return null;
-  //   }
+    //parse the date which is identified as utc ("2020-02-06T18:18:49.148011Z")
+    let parsedDate = new Date(value);
 
-  //   return parsedDate.toLocaleDateString(languageName, {
-  //     timeZone: timeZoneName,
-  //     dateStyle: "short"
-  //   });
-  // },
+    //is it a valid date?
+    if (!(parsedDate instanceof Date && !isNaN(parsedDate))) {
+      return null;
+    }
+
+    //return this:
+    //YYYY-MM-DD hh:mm
+
+    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+    let formatter = new Intl.DateTimeFormat(languageName, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
+      timeZone: timeZoneName
+    });
+    const parts = formatter.formatToParts(parsedDate);
+    //console.log(parts);
+
+    let p = { year: null, month: null, day: null, hour: null, minute: null };
+    parts.forEach(x => {
+      switch (x.type) {
+        case "year":
+        case "relatedYear":
+          p.year = x.value;
+          break;
+        case "month":
+          p.month = x.value;
+          break;
+        case "day":
+          p.day = x.value;
+          break;
+        case "hour":
+          p.hour = x.value;
+          break;
+        case "minute":
+          p.minute = x.value;
+          break;
+      }
+    });
+
+    return `${p.year}-${p.month}-${p.day} ${p.hour}:${p.minute}`;
+  },
   ///////////////////////////////////////////
   // Turn a utc date into a displayable
   // short date and time

ayanova/src/views/home-schedule.vue

@@ -390,7 +390,30 @@ export default {
           this.formState.serverError = res.error;
           window.$gz.form.setErrorBoxErrors(this);
         } else {
-          this.events = res.data;
+          console.log("fetch raw data:", JSON.stringify(res.data));
+
+          this.events = res.data.map(x => {
+            return {
+              ...x,
+              start: window.$gz.locale.utcDateToScheduleCompatibleFormatLocalized(
+                x.start,
+                this.timeZoneName,
+                this.languageName,
+                this.hour12
+              ),
+              end: window.$gz.locale.utcDateToScheduleCompatibleFormatLocalized(
+                x.end,
+                this.timeZoneName,
+                this.languageName,
+                this.hour12
+              )
+            };
+          });
+
+          console.log(
+            "fetch events data after processing:",
+            JSON.stringify(this.events)
+          );
         }
       } catch (error) {
         window.$gz.errorHandler.handleFormError(error, this);