Display Calendar Events Using Graph API in SharePoint Framework

import { MSGraphClient } from "@microsoft/sp-http";
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { IEvent, IEventColl } from "../models";
export class CalendarService {
    public context: WebPartContext;
    public setup(context: WebPartContext): void {
        this.context = context;
    }
    public getEvents(): Promise<IEvent[]> {
        return new Promise<IEvent[]>((resolve, reject) => {
            try {
                // Prepare the output array
                var events: Array<IEvent> = new Array<IEvent>();

                this.context.msGraphClientFactory
                    .getClient()
                    .then((client: MSGraphClient) => {
                        client
                            .api("/me/events")
                            .select('subject,organizer,start,end')
                            .get((error: any, eventColl: IEventColl, rawResponse: any) => {
                                // Map the response to the output array
                                eventColl.value.map((item: any) => {
                                    events.push({
                                        subject: item.subject,
                                        organizer: item.organizer.emailAddress.name,
                                        start: item.start.dateTime,
                                        end: item.end.dateTime
                                    });
                                });
                                resolve(events);
                            });
                    });
            } catch (error) {
                console.error(error);
            }
        });
    }
}
const calendarService = new CalendarService();
export default calendarService;

Create a new file named index.ts under the services folder. Open “src\webparts\graphListcalendarevents\services\index.ts” file and update the code, as shown below.

import calendarService, { CalendarService } from './services/CalendarService';

Open “src\webparts\graphListcalendarevents\GraphListcalendareventsWebPart.ts” file and update the following.

• Import modules
• Update the OnInit method

Import modules

import calendarService, { CalendarService } from './services/CalendarService';

Update the OnInit method

protected onInit(): Promise<void> {
    return super.onInit().then(() => {
        calendarService.setup(this.context);
    });
}

Open “src\webparts\graphListcalendarevents\components\GraphListcalendarevents.tsx” file and import the modules.

import { IGraphListCalendarEventsState } from './IGraphListcalendareventsState';
import { IEvent, IEventColl } from '../models/IEvent';
import CalendarService from '../services/CalendarService';
import { List } from 'office-ui-fabric-react/lib/List';
import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";

Update the render method, as shown below.

public render(): React.ReactElement<IGraphListcalendareventsProps> {
    const { events = [] } = this.state;
    return (
        <div className={styles.graphListcalendarevents}>
            <h1>My Events:</h1>
            <ListView
                items={this.state.events}
                compact={true}
                selectionMode={SelectionMode.none}
            />
        </div>
    );
}

Call the Calendar Service to retrieve the events.

public _getEvents = (): void => {
    CalendarService.getEvents().then(result => {
        this.setState({
            events: result
        });
    });
}

Updated React component (src\webparts\graphListcalendarevents\components\GraphListcalendarevents.tsx).

import * as React from 'react';
import styles from './GraphListcalendarevents.module.scss';
import { IGraphListcalendareventsProps } from './IGraphListcalendareventsProps';
import { IGraphListCalendarEventsState } from './IGraphListcalendareventsState';
import { escape } from '@microsoft/sp-lodash-subset';
import { IEvent, IEventColl } from '../models/IEvent';
import CalendarService from '../services/CalendarService';
import { List } from 'office-ui-fabric-react/lib/List';
import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";
export default class GraphListcalendarevents extends React.Component<IGraphListcalendareventsProps, IGraphListCalendarEventsState> {
    constructor(props: IGraphListcalendareventsProps) {
        super(props);
        this.state = {
            events: []
        };
    }
    public componentDidMount(): void {
        this._getEvents();
    }
    public render(): React.ReactElement<IGraphListcalendareventsProps> {
        const { events = [] } = this.state;
        return (
            <div className={styles.graphListcalendarevents}>
                <h1>My Events:</h1>
                <ListView
                    items={this.state.events}
                    compact={true}
                    selectionMode={SelectionMode.none}
                />
            </div>
        );
    }
    public _getEvents = (): void => {
        CalendarService.getEvents().then(result => {
            this.setState({
                events: result
            });
        });
    }
}

Deploy the solution

Execute the following commands to bundle and package the solution.

gulp bundle --ship
gulp package-solution --ship

Navigate to tenant app catalog – Example - https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Upload the package file (sharepoint\solution\spfx-graph-api-samples.sppkg). Click Deploy.

Approve Graph API permissions

Navigate to SharePoint Admin center and click API access in the left navigation. Select the permission requested for this web app and click Approve.

Test the webpart

Navigate to the SharePoint site and add the app.

Navigate to the page and add the webpart.

Summary

In this article, you saw how to display calendar events using Graph API in SharePoint Framework.