Changed Graph code to get a calendar view instead of list of events

Author: jasonjoh

demo/graph-tutorial/package-lock.json

@@ -17,13 +17,15 @@
     "@types/reactstrap": "^8.5.0",
     "bootstrap": "^4.5.0",
     "moment": "^2.27.0",
+    "moment-timezone": "^0.5.31",
     "msal": "^1.3.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "reactstrap": "^8.5.1",
-    "typescript": "~3.7.2"
+    "typescript": "~3.7.2",
+    "windows-iana": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

demo/graph-tutorial/package.json

@@ -2,43 +2,66 @@
 // Licensed under the MIT License.
 import React from 'react';
 import { Table } from 'reactstrap';
-import moment from 'moment';
+import moment from 'moment-timezone';
+import { findOneIana } from "windows-iana";
 import { Event } from 'microsoft-graph';
 import { config } from './Config';
-import { getEvents } from './GraphService';
+import { getUserWeekCalendar } from './GraphService';
 import withAuthProvider, { AuthComponentProps } from './AuthProvider';
 
 interface CalendarState {
+  eventsLoaded: boolean;
   events: Event[];
 }
 
+export interface CalendarProps extends AuthComponentProps {
+  timeZone: any;
+  timeFormat: any;
+}
+
 // Helper function to format Graph date/time
 function formatDateTime(dateTime: string | undefined) {
   if (dateTime !== undefined) {
-    return moment.utc(dateTime).local().format('M/D/YY h:mm A');
+    return moment(dateTime).format('M/D/YY h:mm A');
   }
 }
 
 class Calendar extends React.Component<AuthComponentProps, CalendarState> {
   constructor(props: any) {
     super(props);
-
+    console.log('Constructor: ' + JSON.stringify(props.user));
     this.state = {
+      eventsLoaded: false,
       events: []
     };
   }
 
-  async componentDidMount() {
-    try {
-      // Get the user's access token
-      var accessToken = await this.props.getAccessToken(config.scopes);
-      // Get the user's events
-      var events = await getEvents(accessToken);
-      // Update the array of events in state
-      this.setState({ events: events.value });
-    }
-    catch (err) {
-      this.props.setError('ERROR', JSON.stringify(err));
+  async componentDidUpdate()
+  {
+    if (this.props.user && !this.state.eventsLoaded)
+    {
+      try {
+        // Get the user's access token
+        var accessToken = await this.props.getAccessToken(config.scopes);
+
+        // Convert user's Windows time zone ("Pacific Standard Time")
+        // to IANA format ("America/Los_Angeles")
+        // Moment needs IANA format
+        var ianaTimeZone = findOneIana(this.props.user.timeZone);
+
+        // Get midnight on the start of the current week in the user's timezone,
+        // but in UTC. For example, for Pacific Standard Time, the time value would be
+        // 07:00:00Z
+        var startOfWeek = moment.tz(ianaTimeZone!.valueOf()).startOf('week').utc();
+        console.log(`Start of week: ${startOfWeek}`);
+        // Get the user's events
+        var events = await getUserWeekCalendar(accessToken, this.props.user.timeZone, startOfWeek);
+        // Update the array of events in state
+        this.setState({ eventsLoaded: true, events: events.value });
+      }
+      catch (err) {
+        this.props.setError('ERROR', JSON.stringify(err));
+      }
     }
   }
 

demo/graph-tutorial/src/Calendar.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { Moment } from "moment";
+
 // <graphServiceSnippet1>
 var graph = require('@microsoft/microsoft-graph-client');
 
@@ -25,21 +27,28 @@ export async function getUserDetails(accessToken: string) {
     .select('displayName,mail,mailboxSettings,userPrincipalName')
     .get();
 
-  console.log(JSON.stringify(user));
   return user;
 }
 // </graphServiceSnippet1>
 
-// <getEventsSnippet>
-export async function getEvents(accessToken: string) {
+// <getUserWeekCalendarSnippet>
+export async function getUserWeekCalendar(accessToken: string, timeZone: string, startDate: Moment) {
   const client = getAuthenticatedClient(accessToken);
 
+  // Generate startDateTime and endDateTime query params
+  // to display a 7-day window
+  var startDateTime = startDate.format();
+  var endDateTime = startDate.add(7, 'day').format();
+
   const events = await client
-    .api('/me/events')
+    .api('/me/calendarview')
+    .header("Prefer", `outlook.timezone="${timeZone}"`)
+    .query({ startDateTime: startDateTime, endDateTime: endDateTime })
     .select('subject,organizer,start,end')
-    .orderby('createdDateTime DESC')
+    .orderby('start/dateTime')
+    .top(50)
     .get();
 
   return events;
 }
-// </getEventsSnippet>
+// </getUserWeekCalendarSnippet>

demo/graph-tutorial/src/GraphService.ts

@@ -25,14 +25,15 @@ Before moving on, install some additional packages that you will use later:
 - [reactstrap](https://github.com/reactstrap/reactstrap) for React components based on Bootstrap.
 - [fontawesome-free](https://github.com/FortAwesome/Font-Awesome) for icons.
 - [moment](https://github.com/moment/moment) for formatting dates and times.
+- [windows-iana](https://github.com/rubenillodo/windows-iana) for translating Windows time zones to IANA format.
 - [msal](https://github.com/AzureAD/microsoft-authentication-library-for-js) for authenticating to Azure Active Directory and retrieving access tokens.
 - [microsoft-graph-client](https://github.com/microsoftgraph/msgraph-sdk-javascript) for making calls to Microsoft Graph.
 
 Run the following command in your CLI.
 
 ```Shell
-npm install react-router-dom@5.2.0 @types/react-router-dom@5.1.5 bootstrap@4.5.0 reactstrap@8.5.1 @types/reactstrap@8.5.0
-npm install @fortawesome/fontawesome-free@5.13.1 moment@2.27.0 msal@1.3.2 @microsoft/microsoft-graph-client@2.0.0 @types/microsoft-graph@1.13.0
+npm install react-router-dom@5.2.0 @types/react-router-dom@5.1.5 bootstrap@4.5.0 reactstrap@8.5.1 @types/reactstrap@8.5.0 @fortawesome/fontawesome-free@5.13.1
+npm install moment@2.27.0 moment-timezone@0.5.31 windows-iana@4.2.0 msal@1.3.2 @microsoft/microsoft-graph-client@2.0.0 @types/microsoft-graph@1.13.0
 ```
 
 ## Design the app

tutorial/02-create-app.md

@@ -6,7 +6,7 @@ In this exercise you will incorporate the Microsoft Graph into the application.
 
 1. Open `./src/GraphService.ts` and add the following function.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/GraphService.ts" id="getEventsSnippet":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/GraphService.ts" id="getUserWeekCalendarSnippet":::
 
     Consider what this code is doing.