How to Adjust Time Zones for Microsoft Graph API Outlook Connections

When you display Outlook calendar events in SharePoint using Microsoft Graph API connections, the time zone is based on the mailbox settings. By default, mailboxes—including shared mailboxes—use the time zone configured at the Microsoft 365 tenant level. Calendar owners can also change this in their own mailbox settings. If you need to show events in a different time zone on your SharePoint page, you can change this setting directly in ShortPoint. 

This article will show you how to modify the time zone displayed in SharePoint so you can set a custom time zone for your audience.

Original Time Zone	Adjusted Time Zone

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Guide to modifying Time Zones in Graph API connections
  • Step 2: Switch to Grid Mode
  • Step 3: Open the ShortPoint Design Element settings
  • Step 4: Disconnect
  • Step 5: Add custom headers
  • Step 6: Connect, save, and republish

Prerequisites

• You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
• You must have the ShortPoint Graph API connection enabled on your SharePoint site.
• You must be a ShortPoint Designer with an active license.

Step-by-step Guide to modifying Time Zones in Graph API connections

Follow these steps to display Outlook calendar events in a different time zone:

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page where you display your Outlook events.
• Click Edit.

• Select the ShortPoint web part.
• Hit the Edit properties button.

Step 2: Switch to Grid Mode

ShortPoint Connect is currently only available in Grid Mode.

• Navigate to the ShortPoint Toolbar.
• Press the Switch to Grid Mode icon.

Step 3: Open the ShortPoint Design Element settings

• Navigate to the Design Element that displays your Outlook events.
• Click on the cogwheel icon to open its settings.

Note: If you do not have an existing connected Design Element, go to the space where you want it added, click on the plus icon, and select from the Design Element library. You can then configure the Microsoft Graph API connection according to your needs.

Step 4: Disconnect

• Hit the Disconnect button to reconfigure your connection.

Step 5: Add custom headers

• Scroll down and expand the Advanced Settings section.

• Slide the Enable Advanced Settings toggle on.

• Copy this code.

  return {     "Prefer": 'outlook.timezone="Eastern Standard Time"' }; 

You can replace the time zone name according to your preference.

• Paste the code in the Custom Headers field.

Step 6: Connect, save, and republish

• Once done, hit Connect to reestablish your connection.
• (Optional) Preview your result to check if the data and time now appear in the new time zone.
• When satisfied, save your changes and republish.

Note: If you inserted a new Design Element, remember to map the properties you want to display on your page to the fields available in the Items tab before saving and publishing the page.

We are done. That is how easy it is to modify the time zones in your connected Outlook events.

Related articles:

• How to Add an HTTP Header to ShortPoint Connections
• Connection Type: Microsoft Graph API
• How to Enable Microsoft Graph Integration for MS Graph API Connections
• Getting Started With Microsoft Graph API Use Cases