fix: correctly render date times based on user time and preferred timezone (#1515)

* Change ms value for setHours in agenda date property

* Set hours to 24 and assume the default values of the others

* WIP: add timezone offset

* Use a local ISO 8601 string for dates

* Remove unnecessary console text

* Remove the timezone offsets to use UTC by default

* Change to const for un-reassigned variables

* Change wording of dateToLocalISO return value

* Display the time from the server as it is in the string

* Update packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts

Co-authored-by: Sébastien Levert <[email protected]>

* Fix prettier issues generated from upstream code changes

* fix: set start date hours to 12AM

* fix: remove local ISO time conversion

* fix: retain hours as interpreted from date attribute

* refactor: remove unused code blocks

* fix: stop sending the preferred-timezone header

Instead, use the preferred-timezone value on the client with the toLocale* date api. This localizes the date and time string on the client side. The dates are all by default in UTC

* fix: add a Z in UTC time strings

This fixes the offset issue

* fix: add a Z in UTC time strings

This fixes the offset issue

* refactor: use timeStyle and dateStyle to customize format output

Co-authored-by: Sébastien Levert <[email protected]>
Co-authored-by: Nickii Miaro <[email protected]>

Author: 3 people

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.graph.ts

@@ -18,12 +18,11 @@ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  * @returns {(Promise<Event[]>)}
  * @memberof Graph
  */
-export function getEventsPageIterator(
+export async function getEventsPageIterator(
   graph: IGraph,
   startDateTime: Date,
   endDateTime: Date,
-  groupId?: string,
-  preferredTimezone?: string
+  groupId?: string
 ): Promise<GraphPageIterator<MicrosoftGraph.Event>> {
   const scopes = 'calendars.read';
 
@@ -42,9 +41,5 @@ export function getEventsPageIterator(
 
   let request = graph.api(uri).middlewareOptions(prepScopes(scopes)).orderby('start/dateTime');
 
-  if (preferredTimezone) {
-    request = request.header('Prefer', `outlook.timezone="${preferredTimezone}"`);
-  }
-
   return GraphPageIterator.create<MicrosoftGraph.Event>(graph, request);
 }

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts

@@ -353,7 +353,6 @@ export class MgtAgenda extends MgtTemplatedComponent {
         <div class="event-other-container">${this.renderOther(event)}</div>
       </div>
     `;
-    // <div class="event-duration">${this.getEventDuration(event)}</div>
   }
 
   /**
@@ -460,8 +459,10 @@ export class MgtAgenda extends MgtTemplatedComponent {
     const grouped = {};
 
     events.forEach(event => {
-      var eventDate = new Date(event.start.dateTime);
-      var dateString = eventDate.toISOString().replace('Z', '');
+      let dateString = event?.start?.dateTime;
+      if (event.end.timeZone === 'UTC') {
+        dateString += 'Z';
+      }
 
       const header = this.getDateHeaderFromDateTimeString(dateString);
       grouped[header] = grouped[header] || [];
@@ -574,16 +575,12 @@ export class MgtAgenda extends MgtTemplatedComponent {
             query = this.eventQuery;
           }
 
-          let request = await graph.api(query);
+          let request = graph.api(query);
 
           if (scope) {
             request = request.middlewareOptions(prepScopes(scope));
           }
 
-          if (this.preferredTimezone) {
-            request = request.header('Prefer', `outlook.timezone="${this.preferredTimezone}"`);
-          }
-
           const results = await request.get();
 
           if (results && results.value) {
@@ -593,12 +590,11 @@ export class MgtAgenda extends MgtTemplatedComponent {
         } catch (e) {}
       } else {
         const start = this.date ? new Date(this.date) : new Date();
-        start.setHours(0, 0, 0, 0);
         const end = new Date(start.getTime());
         end.setDate(start.getDate() + this.days);
-        try {
-          const iterator = await getEventsPageIterator(graph, start, end, this.groupId, this.preferredTimezone);
 
+        try {
+          const iterator = await getEventsPageIterator(graph, start, end, this.groupId);
           if (iterator && iterator.value) {
             events = iterator.value;
 
@@ -617,52 +613,17 @@ export class MgtAgenda extends MgtTemplatedComponent {
   }
 
   private prettyPrintTimeFromDateTime(date: Date) {
-    let hours = date.getHours();
-    const minutes = date.getMinutes();
-    const ampm = hours >= 12 ? 'PM' : 'AM';
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    const minutesStr = minutes < 10 ? '0' + minutes : minutes;
-    return `${hours}:${minutesStr} ${ampm}`;
+    return date.toLocaleTimeString(navigator.language, {
+      timeStyle: 'short',
+      timeZone: this.preferredTimezone
+    });
   }
 
   private getDateHeaderFromDateTimeString(dateTimeString: string) {
     const date = new Date(dateTimeString);
-    date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-
-    const dayIndex = date.getDay();
-    const monthIndex = date.getMonth();
-    const day = date.getDate();
-    const year = date.getFullYear();
-
-    return `${getDayOfWeekString(dayIndex)}, ${getMonthString(monthIndex)} ${day}, ${year}`;
-  }
-
-  private getEventDuration(event: MicrosoftGraph.Event) {
-    let dtStart = new Date(event.start.dateTime);
-    const dtEnd = new Date(event.end.dateTime);
-    const dtNow = new Date();
-    let result: string = '';
-
-    if (dtNow > dtStart) {
-      dtStart = dtNow;
-    }
-
-    const diff = dtEnd.getTime() - dtStart.getTime();
-    const durationMinutes = Math.round(diff / 60000);
-
-    if (durationMinutes > 1440 || event.isAllDay) {
-      result = Math.ceil(durationMinutes / 1440) + 'd';
-    } else if (durationMinutes > 60) {
-      result = Math.round(durationMinutes / 60) + 'h';
-      const leftoverMinutes = durationMinutes % 60;
-      if (leftoverMinutes) {
-        result += leftoverMinutes + 'm';
-      }
-    } else {
-      result = durationMinutes + 'm';
-    }
-
-    return result;
+    return date.toLocaleDateString(navigator.language, {
+      dateStyle: 'full',
+      timeZone: this.preferredTimezone
+    });
   }
 }