Retrieve Calendar Events Using Microsoft Graph API

In this article, i have explained how to retrieve events from office 365 calendar using Microsoft Graph API.

Retrieve Events From The Calendar:

  • EndPoint – https://graph.microsoft.com/v1.0/users/{{userid}}/events
  • Usage – It retrieves all events of the user from office 365 calendar

Tested in the Graph Explorer, it returns the JSON data like below. In this article, we are going to retrieve events from office 365 calendar. 

https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/events

It returns all the properties from the calendar like. Startdate, EndDate, Subject, BodyContent, Priority and lot more. 

So let’s see how to retrieve this programmatically using JavaScript.

Please follow my previous article, How to fetch access token, to authenticate your web application to fetch the access token and authenticate.

Step 1 – Fetch Access Token

AuthUrl: https://login.microsoftonline.com/{{tenant}}/oauth2/v2.0/toke

Type: POST

script type="text/javascript">
    var token;
    $(document).ready(function() {
        requestToken();
    });
    function requestToken() {
        $.ajax({
            "async": true,
            "crossDomain": true,
            "url": "https://howling-crypt-47129.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie  
            "method": "POST",
            "headers": {
                "content-type": "application/x-www-form-urlencoded"
            },
            "data": {
                "grant_type": "client_credentials",
                "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id  
                "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret  
                "scope ": "https://graph.microsoft.com/.default"
            },
            success: function(response) {
                console.log(response);
                token = response.access_token;
                //     console.log(token);
                RetrieveCalendarEvents();
            },
            error: function(error) {
                console.log(JSON.stringify(error));
            }
        })
    }
</script>

  The successful response is below,  

Read Email From Mailbox Folders Using Microsoft Graph API

EndPoint:https://graph.microsoft.com/v1.0/users/{{userid}}/Events

Method:GET

 function RetrieveCalendarEvents() {
        $.ajax({
            method: 'GET',
            url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/events",
            headers: {
                'Authorization': 'Bearer ' + token,
                'Content-Type': 'application/json'
            },
            success: function(response) {

                var data = response.value;
                console.log(response);
                data.map(function(events) {
                    $('#display').append('<li>StartDate: ' + events.start.dateTime + ' </br></br> EndDate: ' + events.end.dateTime + ' </br></br>                               Subject: ' + events.subject + '</li></br></br>');
}) },
            error: function(error) {

            },
        })
    }

  HTTP “200”, success — it returns the JSON data Below,  

Then apply .map to iterate over the JSON data and display it on the page  

Full Code:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var token;
    $(document).ready(function() {
        requestToken();
    });

    function requestToken() {

        $.ajax({
            "async": true,
            "crossDomain": true,
            "url": "https://howling-crypt-47129.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie  
            "method": "POST",
            "headers": {
                "content-type": "application/x-www-form-urlencoded"
            },
            "data": {
                "grant_type": "client_credentials",
                "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de", //Provide your app id  
                "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret  
                "scope ": "https://graph.microsoft.com/.default"
            },
            success: function(response) {
                console.log(response);
                token = response.access_token;
                //     console.log(token);
                RetrieveCalendarEvents();
            },
            error: function(error) {
                console.log(JSON.stringify(error));
            }
        })
    }


    function RetrieveCalendarEvents() {
        $.ajax({
            method: 'GET',
            url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/events",
            headers: {
                'Authorization': 'Bearer ' + token,
                'Content-Type': 'application/json'
            },
            success: function(response) {

                var data = response.value;
                console.log(response);
                data.map(function(events) {
                    $('#display').append('<li>StartDate: ' + events.start.dateTime + ' </br></br> EndDate: ' + events.end.dateTime + ' </br></br>                               Subject: ' + events.subject + '</li></br></br>');

                })

            },
            error: function(error) {

            },
        })
    }

The final result is on the screen below, I have  print some basic info to HTML   

So now, we are able to retrieve the events from office 365 calendars using Microsoft Graph API.   

Happy Sharepointing!…. 

Author Profile

Vinodh
Vinodh is a Microsoft MVP for SharePoint (Office Apps and Services) having 5+ years of experience in Microsoft Technologies.

His interest and expertise includes SharePoint Online Development, PowerApps Development, Flows for SharePoint and PowerApps. Single Page Apps/Add ins for SharePoint using React, Angular. SharePoint Farm Management, 2, 3 and upto 6 tier SharePoint Farm Installation and Configuration.

Awards :
Microsoft Most Valuable Professional for SharePoint and Office 365 awarded for the year 2016, 2017 and 2018.
C# Corner Most Valuable Professional for SharePoint and Office 365 awarded for the year 2016, 2017 and 2018.
Technology Expertise :
SharePoint Online, SharePoint 2013, SharePoint 2016 and SharePoint 2019 Preview.
Intranets both Modern and Classic, SharePoint Frameworks Customisation, SharePoint Add-ins, SharePoint single page apps.
Angular 5 with Bootstrap single page apps.
Typescript, JQuery and Javascript.
Micrsoft Flow and Powerapps.
Utilised :
Microsoft Graph API, SharePoint REST, SharePoint PnP JS.
Out of Box :
Consume Content search web parts for internet publishing sites using custom display templates.
Having knowledge on SharePoint workflows and SharePoint Designer workflows.
List customisation using JS Link, JSON Formatting.
Having knowledge in Active directory management services.
Create and configure service applications in SharePoint (MMS, UPSA, SSA).
Configure Outgoing email settings using SMTP Services.

Add a Comment

Your email address will not be published. Required fields are marked *