In this exercise you will incorporate the Microsoft Graph into the application. For this application, you will use the Microsoft Graph JavaScript Client Library library to make calls to Microsoft Graph.

Get calendar events from Outlook

In this section, you'll use the Microsoft Graph client library to get calendar events for the user.

  1. Create a new file in the root of the project named timezones.js and add the following code.

    // Basic lookup for mapping Windows time zone identifiers to
    // IANA identifiers
    // Mappings taken from
    // https://github.com/unicode-org/cldr/blob/master/common/supplemental/windowsZones.xml
    const zoneMappings = {
      "Dateline Standard Time": "Etc/GMT+12",
      "UTC-11": "Etc/GMT+11",
      "Aleutian Standard Time": "America/Adak",
      "Hawaiian Standard Time": "Pacific/Honolulu",
      "Marquesas Standard Time": "Pacific/Marquesas",
      "Alaskan Standard Time": "America/Anchorage",
      "UTC-09": "Etc/GMT+9",
      "Pacific Standard Time (Mexico)": "America/Tijuana",
      "UTC-08": "Etc/GMT+8",
      "Pacific Standard Time": "America/Los_Angeles",
      "US Mountain Standard Time": "America/Phoenix",
      "Mountain Standard Time (Mexico)": "America/Chihuahua",
      "Mountain Standard Time": "America/Denver",
      "Central America Standard Time": "America/Guatemala",
      "Central Standard Time": "America/Chicago",
      "Easter Island Standard Time": "Pacific/Easter",
      "Central Standard Time (Mexico)": "America/Mexico_City",
      "Canada Central Standard Time": "America/Regina",
      "SA Pacific Standard Time": "America/Bogota",
      "Eastern Standard Time (Mexico)": "America/Cancun",
      "Eastern Standard Time": "America/New_York",
      "Haiti Standard Time": "America/Port-au-Prince",
      "Cuba Standard Time": "America/Havana",
      "US Eastern Standard Time": "America/Indianapolis",
      "Turks And Caicos Standard Time": "America/Grand_Turk",
      "Paraguay Standard Time": "America/Asuncion",
      "Atlantic Standard Time": "America/Halifax",
      "Venezuela Standard Time": "America/Caracas",
      "Central Brazilian Standard Time": "America/Cuiaba",
      "SA Western Standard Time": "America/La_Paz",
      "Pacific SA Standard Time": "America/Santiago",
      "Newfoundland Standard Time": "America/St_Johns",
      "Tocantins Standard Time": "America/Araguaina",
      "E. South America Standard Time": "America/Sao_Paulo",
      "SA Eastern Standard Time": "America/Cayenne",
      "Argentina Standard Time": "America/Buenos_Aires",
      "Greenland Standard Time": "America/Godthab",
      "Montevideo Standard Time": "America/Montevideo",
      "Magallanes Standard Time": "America/Punta_Arenas",
      "Saint Pierre Standard Time": "America/Miquelon",
      "Bahia Standard Time": "America/Bahia",
      "UTC-02": "Etc/GMT+2",
      "Azores Standard Time": "Atlantic/Azores",
      "Cape Verde Standard Time": "Atlantic/Cape_Verde",
      "UTC": "Etc/GMT",
      "GMT Standard Time": "Europe/London",
      "Greenwich Standard Time": "Atlantic/Reykjavik",
      "Sao Tome Standard Time": "Africa/Sao_Tome",
      "Morocco Standard Time": "Africa/Casablanca",
      "W. Europe Standard Time": "Europe/Berlin",
      "Central Europe Standard Time": "Europe/Budapest",
      "Romance Standard Time": "Europe/Paris",
      "Central European Standard Time": "Europe/Warsaw",
      "W. Central Africa Standard Time": "Africa/Lagos",
      "Jordan Standard Time": "Asia/Amman",
      "GTB Standard Time": "Europe/Bucharest",
      "Middle East Standard Time": "Asia/Beirut",
      "Egypt Standard Time": "Africa/Cairo",
      "E. Europe Standard Time": "Europe/Chisinau",
      "Syria Standard Time": "Asia/Damascus",
      "West Bank Standard Time": "Asia/Hebron",
      "South Africa Standard Time": "Africa/Johannesburg",
      "FLE Standard Time": "Europe/Kiev",
      "Israel Standard Time": "Asia/Jerusalem",
      "Kaliningrad Standard Time": "Europe/Kaliningrad",
      "Sudan Standard Time": "Africa/Khartoum",
      "Libya Standard Time": "Africa/Tripoli",
      "Namibia Standard Time": "Africa/Windhoek",
      "Arabic Standard Time": "Asia/Baghdad",
      "Turkey Standard Time": "Europe/Istanbul",
      "Arab Standard Time": "Asia/Riyadh",
      "Belarus Standard Time": "Europe/Minsk",
      "Russian Standard Time": "Europe/Moscow",
      "E. Africa Standard Time": "Africa/Nairobi",
      "Iran Standard Time": "Asia/Tehran",
      "Arabian Standard Time": "Asia/Dubai",
      "Astrakhan Standard Time": "Europe/Astrakhan",
      "Azerbaijan Standard Time": "Asia/Baku",
      "Russia Time Zone 3": "Europe/Samara",
      "Mauritius Standard Time": "Indian/Mauritius",
      "Saratov Standard Time": "Europe/Saratov",
      "Georgian Standard Time": "Asia/Tbilisi",
      "Volgograd Standard Time": "Europe/Volgograd",
      "Caucasus Standard Time": "Asia/Yerevan",
      "Afghanistan Standard Time": "Asia/Kabul",
      "West Asia Standard Time": "Asia/Tashkent",
      "Ekaterinburg Standard Time": "Asia/Yekaterinburg",
      "Pakistan Standard Time": "Asia/Karachi",
      "Qyzylorda Standard Time": "Asia/Qyzylorda",
      "India Standard Time": "Asia/Calcutta",
      "Sri Lanka Standard Time": "Asia/Colombo",
      "Nepal Standard Time": "Asia/Katmandu",
      "Central Asia Standard Time": "Asia/Almaty",
      "Bangladesh Standard Time": "Asia/Dhaka",
      "Omsk Standard Time": "Asia/Omsk",
      "Myanmar Standard Time": "Asia/Rangoon",
      "SE Asia Standard Time": "Asia/Bangkok",
      "Altai Standard Time": "Asia/Barnaul",
      "W. Mongolia Standard Time": "Asia/Hovd",
      "North Asia Standard Time": "Asia/Krasnoyarsk",
      "N. Central Asia Standard Time": "Asia/Novosibirsk",
      "Tomsk Standard Time": "Asia/Tomsk",
      "China Standard Time": "Asia/Shanghai",
      "North Asia East Standard Time": "Asia/Irkutsk",
      "Singapore Standard Time": "Asia/Singapore",
      "W. Australia Standard Time": "Australia/Perth",
      "Taipei Standard Time": "Asia/Taipei",
      "Ulaanbaatar Standard Time": "Asia/Ulaanbaatar",
      "Aus Central W. Standard Time": "Australia/Eucla",
      "Transbaikal Standard Time": "Asia/Chita",
      "Tokyo Standard Time": "Asia/Tokyo",
      "North Korea Standard Time": "Asia/Pyongyang",
      "Korea Standard Time": "Asia/Seoul",
      "Yakutsk Standard Time": "Asia/Yakutsk",
      "Cen. Australia Standard Time": "Australia/Adelaide",
      "AUS Central Standard Time": "Australia/Darwin",
      "E. Australia Standard Time": "Australia/Brisbane",
      "AUS Eastern Standard Time": "Australia/Sydney",
      "West Pacific Standard Time": "Pacific/Port_Moresby",
      "Tasmania Standard Time": "Australia/Hobart",
      "Vladivostok Standard Time": "Asia/Vladivostok",
      "Lord Howe Standard Time": "Australia/Lord_Howe",
      "Bougainville Standard Time": "Pacific/Bougainville",
      "Russia Time Zone 10": "Asia/Srednekolymsk",
      "Magadan Standard Time": "Asia/Magadan",
      "Norfolk Standard Time": "Pacific/Norfolk",
      "Sakhalin Standard Time": "Asia/Sakhalin",
      "Central Pacific Standard Time": "Pacific/Guadalcanal",
      "Russia Time Zone 11": "Asia/Kamchatka",
      "New Zealand Standard Time": "Pacific/Auckland",
      "UTC+12": "Etc/GMT-12",
      "Fiji Standard Time": "Pacific/Fiji",
      "Chatham Islands Standard Time": "Pacific/Chatham",
      "UTC+13": "Etc/GMT-13",
      "Tonga Standard Time": "Pacific/Tongatapu",
      "Samoa Standard Time": "Pacific/Apia",
      "Line Islands Standard Time": "Pacific/Kiritimati"
    };
    
    function getIanaFromWindows(windowsZoneName) {
      return zoneMappings[windowsZoneName] || "Etc/GMT";
    }
    

    This code maps Windows time zone identifiers to IANA time zone identifiers for compatibility with moment.js.

  2. Add the following function to graph.js.

    async function getEvents() {
      const user = JSON.parse(sessionStorage.getItem('graphUser'));
    
      // Convert user's Windows time zone ("Pacific Standard Time")
      // to IANA format ("America/Los_Angeles")
      // Moment needs IANA format
      let ianaTimeZone = getIanaFromWindows(user.mailboxSettings.timeZone);
      console.log(`Converted: ${ianaTimeZone}`);
    
      // Configure a calendar view for 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
      let startOfWeek = moment.tz('America/Los_Angeles').startOf('week').utc();
      // Set end of the view to 7 days after start of week
      let endOfWeek = moment(startOfWeek).add(7, 'day');
    
      try {
        // GET /me/calendarview?startDateTime=''&endDateTime=''
        // &$select=subject,organizer,start,end
        // &$orderby=start/dateTime
        // &$top=50
        let response = await graphClient
          .api('/me/calendarview')
          // Set the Prefer=outlook.timezone header so date/times are in
          // user's preferred time zone
          .header("Prefer", `outlook.timezone="${user.mailboxSettings.timeZone}"`)
          // Add the startDateTime and endDateTime query parameters
          .query({ startDateTime: startOfWeek.format(), endDateTime: endOfWeek.format() })
          // Select just the fields we are interested in
          .select('subject,organizer,start,end')
          // Sort the results by start, earliest first
          .orderby('start/dateTime')
          // Maximum 50 events in response
          .top(50)
          .get();
    
        updatePage(Views.calendar, response.value);
      } catch (error) {
        updatePage(Views.error, {
          message: 'Error getting events',
          debug: error
        });
      }
    }
    

    Consider what this code is doing.

    • The URL that will be called is /me/calendarview.
    • The header method adds a Prefer header specifying the user's preferred time zone.
    • The query method adds the start and end times for the calendar view.
    • The select method limits the fields returned for each events to just those the view will actually use.
    • The orderby method sorts the results by the start time, with the earliest event being first.
    • The top method requests up to 50 events in the response.
  3. Open ui.js and add the following function.

    function showCalendar(events) {
      // TEMPORARY
      // Render the results as JSON
      var alert = createElement('div', 'alert alert-success');
    
      var pre = createElement('pre', 'alert-pre border bg-light p-2');
      alert.appendChild(pre);
    
      var code = createElement('code', 'text-break',
        JSON.stringify(events, null, 2));
      pre.appendChild(code);
    
      mainContainer.innerHTML = '';
      mainContainer.appendChild(alert);
    }
    
  4. Update the switch statement in the updatePage function to call showCalendar when the view is Views.calendar.

    function updatePage(view, data) {
      if (!view) {
        view = Views.home;
      }
    
      const user = JSON.parse(sessionStorage.getItem('graphUser'));
    
      showAccountNav(user);
      showAuthenticatedNav(user, view);
    
      switch (view) {
        case Views.error:
          showError(data);
          break;
        case Views.home:
          showWelcomeMessage(user);
          break;
        case Views.calendar:
          showCalendar(data);
          break;
      }
    }
    
  5. Save your changes and refresh the app. Sign in and click the Calendar link in the nav bar. If everything works, you should see a JSON dump of events on the user's calendar.

Display the results

In this section you will update the showCalendar function to display the events in a more user-friendly manner.

  1. Replace the existing showCalendar function with the following.

    function showCalendar(events) {
      let div = document.createElement('div');
    
      div.appendChild(createElement('h1', 'mb-3', 'Calendar'));
    
      let newEventButton = createElement('button', 'btn btn-light btn-sm mb-3', 'New event');
      newEventButton.setAttribute('onclick', 'showNewEventForm();');
      div.appendChild(newEventButton);
    
      let table = createElement('table', 'table');
      div.appendChild(table);
    
      let thead = document.createElement('thead');
      table.appendChild(thead);
    
      let headerrow = document.createElement('tr');
      thead.appendChild(headerrow);
    
      let organizer = createElement('th', null, 'Organizer');
      organizer.setAttribute('scope', 'col');
      headerrow.appendChild(organizer);
    
      let subject = createElement('th', null, 'Subject');
      subject.setAttribute('scope', 'col');
      headerrow.appendChild(subject);
    
      let start = createElement('th', null, 'Start');
      start.setAttribute('scope', 'col');
      headerrow.appendChild(start);
    
      let end = createElement('th', null, 'End');
      end.setAttribute('scope', 'col');
      headerrow.appendChild(end);
    
      let tbody = document.createElement('tbody');
      table.appendChild(tbody);
    
      for (const event of events) {
        let eventrow = document.createElement('tr');
        eventrow.setAttribute('key', event.id);
        tbody.appendChild(eventrow);
    
        let organizercell = createElement('td', null, event.organizer.emailAddress.name);
        eventrow.appendChild(organizercell);
    
        let subjectcell = createElement('td', null, event.subject);
        eventrow.appendChild(subjectcell);
    
        // Use moment.utc() here because times are already in the user's
        // preferred timezone, and we don't want moment to try to change them to the
        // browser's timezone
        let startcell = createElement('td', null,
          moment.utc(event.start.dateTime).format('M/D/YY h:mm A'));
        eventrow.appendChild(startcell);
    
        let endcell = createElement('td', null,
          moment.utc(event.end.dateTime).format('M/D/YY h:mm A'));
        eventrow.appendChild(endcell);
      }
    
      mainContainer.innerHTML = '';
      mainContainer.appendChild(div);
    }
    

    This loops through the collection of events and adds a table row for each one.

  2. Save the changes and refresh the app. Click on the Calendar link and the app should now render a table of events for the current week.

    A screenshot of the table of events