Completed get calendar view step

Author: jasonjoh

demo/graph-tutorial/.env.example

@@ -1,5 +1,5 @@
 OAUTH_APP_ID=YOUR_APP_ID_HERE
 OAUTH_APP_SECRET=YOUR_APP_SECRET_HERE
 OAUTH_REDIRECT_URI=http://localhost:3000/auth/callback
-OAUTH_SCOPES='user.read,calendars.read'
+OAUTH_SCOPES='user.read,calendars.readwrite,mailboxsettings.read'
 OAUTH_AUTHORITY=https://login.microsoftonline.com/common/

demo/graph-tutorial/app.js

@@ -14,6 +14,7 @@ require('dotenv').config();
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
 var authRouter = require('./routes/auth');
+var calendarRouter = require('./routes/calendar');
 
 var app = express();
 
@@ -86,6 +87,15 @@ app.use(function(req, res, next) {
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'hbs');
 
+// <FormatDateSnippet>
+var hbs = require('hbs');
+var moment = require('moment');
+// Helper to format date/time sent by Graph
+hbs.registerHelper('eventDateTime', function(dateTime){
+  return moment(dateTime).format('M/D/YY h:mm A');
+});
+// </FormatDateSnippet>
+
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
@@ -94,6 +104,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
 app.use('/auth', authRouter);
+app.use('/calendar', calendarRouter);
 app.use('/users', usersRouter);
 
 // catch 404 and forward to error handler

demo/graph-tutorial/graph.js

@@ -10,10 +10,32 @@ module.exports = {
 
     const user = await client
       .api('/me')
-      .select('displayName,mail,userPrincipalName')
+      .select('displayName,mail,mailboxSettings,userPrincipalName')
       .get();
     return user;
-  }
+  },
+
+  // <GetCalendarViewSnippet>
+  getCalendarView: async function(accessToken, start, end, timeZone) {
+    const client = getAuthenticatedClient(accessToken);
+
+    const events = await client
+      .api('/me/calendarview')
+      // Add Prefer header to get back times in user's timezone
+      .header("Prefer", `outlook.timezone="${timeZone}"`)
+      // Add the begin and end of the calendar window
+      .query({ startDateTime: start, endDateTime: end })
+      // Get just the properties used by the app
+      .select('subject,organizer,start,end')
+      // Order by start time
+      .orderby('start/dateTime')
+      // Get at most 50 results
+      .top(50)
+      .get();
+
+    return events;
+  },
+  // </GetCalendarViewSnippet>
 };
 
 function getAuthenticatedClient(accessToken) {

demo/graph-tutorial/package-lock.json

@@ -19,7 +19,9 @@
     "http-errors": "^1.8.0",
     "isomorphic-fetch": "^2.2.1",
     "moment": "^2.28.0",
+    "moment-timezone": "^0.5.31",
     "morgan": "^1.10.0",
-    "uuid": "^8.3.0"
+    "uuid": "^8.3.0",
+    "windows-iana": "^4.2.1"
   }
 }

demo/graph-tutorial/package.json

@@ -21,7 +21,7 @@ router.get('/signin',
       console.log(`Error: ${error}`);
       req.flash('error_msg', {
         message: 'Error getting auth URL',
-        debug: JSON.stringify(error)
+        debug: JSON.stringify(error, Object.getOwnPropertyNames(error))
       });
       res.redirect('/');
     }
@@ -49,12 +49,13 @@ router.get('/callback',
       // Add the user to user storage
       req.app.locals.users[req.session.userId] = {
         displayName: user.displayName,
-        email: user.mail || user.userPrincipalName
+        email: user.mail || user.userPrincipalName,
+        timeZone: user.mailboxSettings.timeZone
       };
     } catch(error) {
       req.flash('error_msg', {
         message: 'Error completing authentication',
-        debug: JSON.stringify(error)
+        debug: JSON.stringify(error, Object.getOwnPropertyNames(error))
       });
     }
 

demo/graph-tutorial/routes/auth.js

@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+const router = require('express-promise-router')();
+const graph = require('../graph.js');
+const moment = require('moment-timezone');
+const iana = require('windows-iana');
+
+/* GET /calendar */
+// <GetRouteSnippet>
+router.get('/',
+  async function(req, res) {
+    if (!req.session.userId) {
+      // Redirect unauthenticated requests to home page
+      res.redirect('/')
+    } else {
+      const params = {
+        active: { calendar: true }
+      };
+
+      // Get the user
+      const user = req.app.locals.users[req.session.userId];
+      // Convert user's Windows time zone ("Pacific Standard Time")
+      // to IANA format ("America/Los_Angeles")
+      // Moment needs IANA format
+      const timeZoneId = iana.findOneIana(user.timeZone);
+      console.log(`Time zone: ${timeZoneId.valueOf()}`);
+
+      // Calculate the start and end of the current week
+      // 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(timeZoneId.valueOf()).startOf('week').utc();
+      var endOfWeek = moment(startOfWeek).add(7, 'day');
+      console.log(`Start: ${startOfWeek.format()}`);
+
+      // Get the access token
+      var accessToken;
+      try {
+        accessToken = await getAccessToken(req.session.userId, req.app.locals.msalClient);
+      } catch (err) {
+        req.flash('error_msg', {
+          message: 'Could not get access token. Try signing out and signing in again.',
+          debug: JSON.stringify(err, Object.getOwnPropertyNames(err))
+        });
+        return;
+      }
+
+      if (accessToken && accessToken.length > 0) {
+        try {
+          // Get the events
+          const events = await graph.getCalendarView(
+            accessToken,
+            startOfWeek.format(),
+            endOfWeek.format(),
+            user.timeZone);
+
+          params.events = events.value;
+        } catch (err) {
+          req.flash('error_msg', {
+            message: 'Could not fetch events',
+            debug: JSON.stringify(err, Object.getOwnPropertyNames(err))
+          });
+        }
+      }
+      else {
+        req.flash('error_msg', 'Could not get an access token');
+      }
+
+      res.render('calendar', params);
+    }
+  }
+);
+// </GetRouteSnippet>
+
+async function getAccessToken(userId, msalClient) {
+  // Look up the user's account in the cache
+  const accounts = msalClient
+    .getTokenCache()
+    .getAllAccounts();
+
+  const userAccount = accounts.find(a => a.homeAccountId === userId);
+
+  // Get the token silently
+  const response = await msalClient.acquireTokenSilent({
+    scopes: process.env.OAUTH_SCOPES.split(','),
+    redirectUri: process.env.OAUTH_REDIRECT_URI,
+    account: userAccount
+  });
+
+  return response.accessToken;
+}
+
+module.exports = router;

demo/graph-tutorial/routes/calendar.js

@@ -0,0 +1,26 @@
+<!-- Copyright (c) Microsoft Corporation.
+     Licensed under the MIT License. -->
+
+<!-- <LayoutSnippet> -->
+<h1>Calendar</h1>
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">Organizer</th>
+      <th scope="col">Subject</th>
+      <th scope="col">Start</th>
+      <th scope="col">End</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each events}}
+      <tr>
+        <td>{{this.organizer.emailAddress.name}}</td>
+        <td>{{this.subject}}</td>
+        <td>{{eventDateTime this.start.dateTime}}</td>
+        <td>{{eventDateTime this.end.dateTime}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
+<!-- </LayoutSnippet> -->

demo/graph-tutorial/views/calendar.hbs

@@ -42,6 +42,7 @@ Before moving on, install some additional packages that you will use later:
 
 - [dotenv](https://github.com/motdotla/dotenv) for loading values from a .env file.
 - [moment](https://github.com/moment/moment/) for formatting date/time values.
+- [windows-iana](https://github.com/rubenillodo/windows-iana) for translating Windows time zone names to IANA time zone IDs.
 - [connect-flash](https://github.com/jaredhanson/connect-flash) to flash error messages in the app.
 - [express-session](https://github.com/expressjs/session) to store values in an in-memory server-side session.
 - [express-promise-router](https://github.com/express-promise-router/express-promise-router) to allow route handlers to return a Promise.
@@ -53,8 +54,8 @@ Before moving on, install some additional packages that you will use later:
 1. Run the following command in your CLI.
 
     ```Shell
-    npm install dotenv@8.2.0 moment@2.28.0 connect-flash@0.1.1 express-session@1.17.1 isomorphic-fetch@2.2.1
-    npm install @azure/msal-node@1.0.0-alpha.5 @microsoft/microsoft-graph-client@2.0.0
+    npm install dotenv@8.2.0 moment@2.28.0 moment-timezone@0.5.31 connect-flash@0.1.1 express-session@1.17.1 isomorphic-fetch@2.2.1
+    npm install @azure/msal-node@1.0.0-alpha.5 @microsoft/microsoft-graph-client@2.0.0 windows-iana@4.2.1
     ```
 
     > [!TIP]

tutorial/02-create-app.md

@@ -47,7 +47,7 @@ In this exercise you will extend the application from the previous exercise to s
           console.log(`Error: ${error}`);
           req.flash('error_msg', {
             message: 'Error getting auth URL',
-            debug: JSON.stringify(error)
+            debug: JSON.stringify(error, Object.getOwnPropertyNames(error))
           });
           res.redirect('/');
         }
@@ -75,7 +75,7 @@ In this exercise you will extend the application from the previous exercise to s
         } catch (error) {
           req.flash('error_msg', {
             message: 'Error completing authentication',
-            debug: JSON.stringify(error)
+            debug: JSON.stringify(error, Object.getOwnPropertyNames(error))
           });
         }
 
@@ -148,10 +148,10 @@ Start the server and browse to `https://localhost:3000`. Click the sign-in butto
 
         const user = await client
           .api('/me')
-          .select('displayName,mail,userPrincipalName')
+          .select('displayName,mail,mailboxSettings,userPrincipalName')
           .get();
         return user;
-      }
+      },
     };
 
     function getAuthenticatedClient(accessToken) {