Modern workplaces thrive on collaboration, scheduling, and seamless integration across platforms. In Microsoft 365, Microsoft Graph serves as the gateway to access a wide range of services, including Outlook, Teams, and SharePoint.
One common business requirement is event management, creating calendar events in a user’s mailbox or a Microsoft 365 Group calendar. In this blog, we’ll explore how to implement event creation in SharePoint Framework (SPFx) solutions using Microsoft Graph.
Why Microsoft Graph for Event Creation?
Microsoft Graph provides a unified API endpoint (https://graph.microsoft.com) for interacting with Microsoft 365 services. Instead of juggling multiple APIs, you can use Graph to,
Create, update, and delete user calendar events.
Manage group calendar events.
Access scheduling details in Outlook.
Integrate events seamlessly into SPFx web parts or extensions.
By leveraging Graph, developers can ensure secure, consistent, and future-ready integrations.
Scenarios: User vs Group Events
User Mailbox Event: Events created directly in a user’s Outlook calendar. Ideal for personal scheduling or workflows where each user manages their own appointments.
Group Calendar Event: Events created in a Microsoft 365 Group calendar, visible to all group members. Perfect for team meetings, department events, or organization-wide schedules.
Setting Up in SPFx
Before writing any code, ensure.
Your SPFx project has the necessary Graph permissions defined in the package-solution.json. Example for events,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.ReadWrite"
},
{
"resource": "Microsoft Graph",
"scope": "Group.ReadWrite.All"
}
]
The app has admin consent for these permissions in the tenant.
You’re using the MSGraphClientFactory (built into SPFx) to acquire a Graph client.
Example: Creating a Group Event
Let’s walk through an example of creating a Group Calendar Event in SPFx.
const groupId: string = "12345-abcd-6789-efgh"; // Example Group ID
const client = await props.context.msGraphClientFactory.getClient("3");
await client.api(`/groups/${groupId}/events`).post({
subject: "Q3 Marketing Review",
body: {
contentType: "HTML",
content: "Let’s discuss campaign performance and next quarter planning. 📊",
},
start: {
dateTime: "2025-09-15T10:00:00",
timeZone: "UTC",
},
end: {
dateTime: "2025-09-15T11:30:00",
timeZone: "UTC",
},
location: {
displayName: "Microsoft Teams Meeting",
},
isAllDay: false,
});
console.log(`✅ Group event successfully created for group ${groupId}`);
Key Highlights
/groups/{groupId}/events: Endpoint to target the group calendar.
Subject: Event title.
Body.content: Description in HTML.
Start and end: ISO 8601 datetime format with timezone.
isAllDay: Boolean for all-day events.
Example: Creating a User Mailbox Event
For user-specific events, the Graph API endpoint changes slightly.
const client = await props.context.msGraphClientFactory.getClient("3");
await client.api("/me/events").post({
subject: "Project Kickoff Meeting",
body: {
contentType: "HTML",
content: "This is the official kickoff for Project Phoenix. 🎯",
},
start: {
dateTime: "2025-09-10T14:00:00",
timeZone: "UTC",
},
end: {
dateTime: "2025-09-10T15:00:00",
timeZone: "UTC",
},
location: {
displayName: "Room 201, HQ Office",
},
isAllDay: false,
attendees: [
{
emailAddress: {
address: "[email protected]",
name: "Alice Johnson"
},
type: "required"
},
{
emailAddress: {
address: "[email protected]",
name: "Bob Smith"
},
type: "optional"
}
]
});
console.log("✅ Event successfully created in John Doe’s mailbox");
Here, the "/me/events" endpoint ensures the event is created in the logged-in user’s mailbox calendar.
Best Practices
Permissions: Always request the minimum required Graph scopes—for example, Calendars.ReadWrite is enough for user events, while group events need Group.ReadWrite.All.
Error Handling: Wrap Graph calls in try/catch blocks and handle cases where permissions are missing.
Time Zones: Always specify the correct timeZone property to avoid confusion across regions.
UI Feedback: Inform users when events are successfully created (or if they fail).
Conclusion
With SPFx and Microsoft Graph, developers can easily integrate event management into modern intranets and business applications. Whether scheduling for individuals or teams, leveraging /me/events and /groups/{id}/events ensures flexibility and collaboration at scale.
By embedding event creation directly into SharePoint web parts or workflows, organizations can empower users with seamless scheduling experiences —all within the Microsoft 365 ecosystem.