Retrieve Calendar Events Using Microsoft Graph API

In this article, I have explained how to fetch events from the calendar for a particular user in SharePoint with the help of Microsoft Graph API.

In my previous articles, I have written about site collection, user properties, fetching access tokens, retrieving and sending emails, and lots more. I have added the links below for your reference. Please go through these before following the steps given in this article.
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
 
Retrieve Calendar Events Using Microsoft Graph API 
 
It returns all the properties from the calendar, like Startdate, EndDate, Subject, BodyContent, and Priority, etc. 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/token

Type: POST
  1. var token; // Initialize Globally      
  2. function requestToken() {      
  3.     $.ajax({      
  4.         "async"true,      
  5.         "crossDomain"true,      
  6.         "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      
  7.         "method""POST",      
  8.         "headers": {      
  9.             "content-type""application/x-www-form-urlencoded"      
  10.         },      
  11.         "data": {      
  12.             "grant_type""client_credentials",      
  13.             "client_id ""8baf0301-27df-44b1-b4fe-7911b9a918de"//Provide your app id      
  14.             "client_secret""tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY="//Provide your secret      
  15.             "scope ""https://graph.microsoft.com/.default"      
  16.         },      
  17.         success: function(response) {      
  18.             log(response);      
  19.             token = response.access_token; //Store the token into global variable      
  20.         },      
  21.         error: function(error) {      
  22.             log(JSON.stringify(error));      
  23.         }      
  24.     })      
  25. }      
The successful response is shown below.
 
Retrieve Calendar Events Using Microsoft Graph API
 
EndPoint
 
https://graph.microsoft.com/v1.0/users/{{userid}}/Events

Method

GET

Code 

  1. function RetrieveCalendarEvents() {  
  2.     $.ajax({  
  3.         method: 'GET',  
  4.         url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/events",  
  5.         headers: {  
  6.             'Authorization''Bearer ' + token,  
  7.             'Content-Type''application/json'  
  8.         },  
  9.         success: function(response) {  
  10.             var data = response.value;  
  11.             data.map(function(events) {  
  12.                 $('#display').append('<li>StartDate: ' + events.start.dateTime + ' </br></br> EndDate: ' + events.end.dateTime + ' </br></br> Subject: ' + events.subject + '</li></br></br>');  
  13.             })  
  14.         },  
  15.         error: function(error) {},  
  16.     })  
  17. }  
HTTP "200", success -- it returns the JSON data Below,
 
Retrieve Calendar Events Using Microsoft Graph API 
 
Then, apply .map to iterate over the JSON data and display it on the page.
 
Full Code 
  1. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.     var token;  
  4.     $(document).ready(function() {  
  5.         requestToken();  
  6.     });  
  7.   
  8.     function requestToken() {  
  9.   
  10.         $.ajax({  
  11.             "async"true,  
  12.             "crossDomain"true,  
  13.             "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    
  14.             "method""POST",  
  15.             "headers": {  
  16.                 "content-type""application/x-www-form-urlencoded"  
  17.             },  
  18.             "data": {  
  19.                 "grant_type""client_credentials",  
  20.                 "client_id ""8baf0301-27df-44b1-b4fe-7911b9a918de"//Provide your app id    
  21.                 "client_secret""tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY="//Provide your secret    
  22.                 "scope ""https://graph.microsoft.com/.default"  
  23.             },  
  24.             success: function(response) {  
  25.                 console.log(response);  
  26.                 token = response.access_token;  
  27.                 //     console.log(token);  
  28.                 RetrieveCalendarEvents();  
  29.             },  
  30.             error: function(error) {  
  31.                 console.log(JSON.stringify(error));  
  32.             }  
  33.         })  
  34.     }  
  35.   
  36.   
  37.     function RetrieveCalendarEvents() {  
  38.         $.ajax({  
  39.             method: 'GET',  
  40.             url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/events",  
  41.             headers: {  
  42.                 'Authorization''Bearer ' + token,  
  43.                 'Content-Type''application/json'  
  44.             },  
  45.             success: function(response) {  
  46.   
  47.                 var data = response.value;  
  48.                 console.log(response);  
  49.                 data.map(function(events) {  
  50.                     $('#display').append('<li>StartDate: ' + events.start.dateTime + ' </br></br> EndDate: ' + events.end.dateTime + ' </br></br> Subject: ' + events.subject + '</li></br></br>');  
  51.   
  52.                 })  
  53.   
  54.             },  
  55.             error: function(error) {  
  56.   
  57.             },  
  58.         })  
  59.     }  

The final result is shown on the screen below. I have printed some basic infomation to HTML.

 Retrieve Calendar Events Using Microsoft Graph API
 
So now, we are able to retrieve the events from Office 365 Calendars using Microsoft Graph API.
 
Happy SharePointing!....