SharePoint  

Display Outlook Calendar with Time Zone in SPFx using Graph

Introduction

Modern SharePoint and intranet solutions increasingly rely on Microsoft Graph to personalize user experiences. One of the most useful integrations is pulling Outlook calendar events, including recurring meetings, directly into a SharePoint Framework (SPFx) web part.

This article explains how to,

  • Configure Microsoft Graph in an SPFx solution
  • Retrieve user calendar events (including recurring ones)
  • Handle and display start and end times in the user's Outlook time zone

Graph API Setup in SPFx

Step 1. Add Permissions in package-solution.json

To access calendar data, you must declare permissions in your SPFx solution.

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

📌 After deployment, navigate to SharePoint Admin Center → API Access to approve the permission request.

Step 2. Get MS Graph Client

SPFx provides the msGraphClientFactory for authenticated access to Microsoft Graph.

const client = await context.msGraphClientFactory.getClient("3");

Retrieve Calendar Events with Recurrence & Time Zone

Here’s the complete code to retrieve upcoming events (including recurring ones) with correct start and end times in the user’s Outlook time zone.

const client = await context.msGraphClientFactory.getClient("3");

// Step 1: Get user's Outlook time zone from mailboxSettings
const settings = await client
  .api("/me/mailboxSettings")
  .version("v1.0")
  .select("timeZone")
  .get();

const userTimeZone =
  settings?.timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone;

console.log("Detected Outlook Time Zone:", userTimeZone);

// Step 2: Define time range (e.g., today to 7 days ahead)
const now = new Date();
const end = new Date();
end.setDate(now.getDate() + 7);

const startDateTime = now.toISOString();
const endDateTime = end.toISOString();

// Step 3: Use /calendarView to get events including recurrence
const response = await client
  .api("/me/calendarView")
  .header("Prefer", `outlook.timezone="${userTimeZone}"`)
  .query({
    startDateTime,
    endDateTime,
    $select: "subject,start,end,location",
    $orderby: "start/dateTime",
  })
  .version("v1.0")
  .get();

const events = response.value;

Handling Start and End Time with Time Zone

Thanks to this line.

.header("Prefer", `outlook.timezone="${userTimeZone}"`)

The start.dateTime and end.dateTime values are returned in the user's Outlook-configured time zone, not in UTC.

Example Event Output

{
  "subject": "Team Sync Meeting",
  "start": {
    "dateTime": "2025-07-30T10:00:00",
    "timeZone": "India Standard Time"
  },
  "end": {
    "dateTime": "2025-07-30T11:00:00",
    "timeZone": "India Standard Time"
  },
  "location": {
    "displayName": "Conference Room A"
  }
}

This ensures users see their events in their local time, whether they’re in IST, EST, PST, or any other zone.

Why use /calendarView instead of /events?

Endpoint Behavior
/me/events Shows only base events and recurring series masters
/me/calendarView Expands recurring events into actual instances for a date range

Thus, to show real scheduled meetings, including repeated ones, /calendarView is the correct and recommended choice.

Use Cases

  • Show daily or weekly meetings on a dashboard
  • Notify users of their next appointment
  • Embed personalized calendar widgets in intranet pages

Conclusion

Incorporating user calendar data, especially recurring events from Microsoft Graph, into SPFx applications gives users both personalization and productivity potential. Specifically:

  • Retrieving from /me/calendarView
  • Utilizing Prefer: outlook.timezone
  • Honoring the user's Outlook configured timezone

Makes for a strong user experience on those applications.

Whether you have developed a staff portal or student dashboard, this model provides for accurate, timezone-aware events with a lot less effort to implement.

Membership not found