Adds support for preferred timezone in mgt-agenda. (#737)

Closes #681

Author: waldekmastykarz

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

@@ -16,14 +16,16 @@ import { GraphPageIterator } from '../../utils/GraphPageIterator';
  * @param {Date} startDateTime
  * @param {Date} endDateTime
  * @param {string} [groupId]
+ * @param {string} preferredTimezone
  * @returns {(Promise<Event[]>)}
  * @memberof Graph
  */
 export function getEventsPageIterator(
   graph: IGraph,
   startDateTime: Date,
   endDateTime: Date,
-  groupId?: string
+  groupId?: string,
+  preferredTimezone?: string
 ): Promise<GraphPageIterator<MicrosoftGraph.Event>> {
   const scopes = 'calendars.read';
 
@@ -40,10 +42,14 @@ export function getEventsPageIterator(
 
   uri += `/calendarview?${sdt}&${edt}`;
 
-  const request = graph
+  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/src/components/mgt-agenda/mgt-agenda.ts

@@ -159,6 +159,29 @@ export class MgtAgenda extends MgtTemplatedComponent {
   })
   public groupByDay: boolean;
 
+  /**
+   * allows developer to specify preferred timezone that should be used for
+   * retrieving events from Graph, eg. `Pacific Standard Time`. The preferred timezone for
+   * the current user can be retrieved by calling `me/mailboxSettings` and
+   * retrieving the value of the `timeZone` property.
+   * @type {string}
+   */
+  @property({
+    attribute: 'preferred-timezone',
+    type: String
+  })
+  public get preferredTimezone(): string {
+    return this._preferredTimezone;
+  }
+  public set preferredTimezone(value) {
+    if (this._preferredTimezone === value) {
+      return;
+    }
+
+    this._preferredTimezone = value;
+    this.reloadState();
+  }
+
   /**
    * determines width available for agenda component.
    * @type {boolean}
@@ -169,6 +192,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
   private _days: number = 3;
   private _groupId: string;
   private _date: string;
+  private _preferredTimezone: string;
 
   constructor() {
     super();
@@ -494,6 +518,10 @@ export class MgtAgenda extends MgtTemplatedComponent {
             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) {
@@ -507,7 +535,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
         const end = new Date(start.getTime());
         end.setDate(start.getDate() + this.days);
         try {
-          const iterator = await getEventsPageIterator(graph, start, end, this.groupId);
+          const iterator = await getEventsPageIterator(graph, start, end, this.groupId, this.preferredTimezone);
 
           if (iterator && iterator.value) {
             this.events = iterator.value;