Skip to main content

Fetch outlook Calendar Events in SharePoint Webpart

Today I came across a requirement to get outlook events to SharePoint custom webpart. Thanks to Graph API to ease the work.

Here are the steps that we need to follow in order to get events.

1. Register a new app in Azure Active Directory. Here is the blog that i referred.

2. Now its time to get access token using generated client id and secret in previous step.

Execute below code to get access token.


$.ajax({
    type: "POST",
    crossDomain: true,
    url:
      "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/token",
    headers: {
      "content-type": "application/x-www-form-urlencoded"
    },
    data: {
      grant_type: "client_credentials",
      client_id: "", //ClientId@TenantId
      client_secret: "",//Client Secret
      scope: "https://graph.microsoft.com/.default"
    },
    success: function(data) {
      console.log(data.access_token);
      getOutlookCalendarEvents(data.access_token);
    },
    error: function(data, errorThrown, status) {}
  });

You can get code access token from console of the browser.

3. Once you have access token, lets get outlook events. Below is the code to get events from outlook using access token generated earlier. 


function getOutlookCalendarEvents(token){
               var today = new Date().toLocaleDateString();
               var loggedInUser = _spPageContextInfo.userEmail;
               var OutlookCalendarURL = "https://graph.microsoft.com/v1.0/users/"+loggedInUser+"/events?&$orderby=start/DateTime&$filter=start/DateTime ge '"+today+"'";
              
               $.ajax({
                   type: "GET",
                   crossDomain: true,
                   url:OutlookCalendarURL,
                   headers: {
                     "authorization": "Bearer " + token
                   },
                   success: function(data) {
                              console.log(data);
                              var OutlookCalendarResults = data.value;                           
                   },
                   error: function(data, errorThrown, status) {}
               });          
}

Above code gets events that are greater than today.
Here is the list of other API end points that could help in further options.

Hope this helps,
Cheers,
Keyur

Comments

Popular posts from this blog

Business Data Connectivity

I came to a requirement wherein I was supposed to get data from an 3 rd party portal using API’s and then bring them to SharePoint server. The first approach that I finalized was just to make BDC solution that will get data from 3 rd party portal and will deploy it to SharePoint. How to Create BDC solution in SharePoint? I found below link that is having really great description about hot to create and deploy the BDC solution to SharePoint. http://www.c-sharpcorner.com/uploadfile/hung123/creating-business-data-connectivity-service-using-visual-studio-2010/ After creating an POC I came to know that BDC model cannot be deployed on Multi tenant farm. So what can be done next? After some amount of googling I came to know that we can create BDC solution using WCF services also. So I created a WCF service solution that acted as a wrapper that used to fetch data from the portal. We can them publish that service to IIS or Server and use the servic...

SharePoint Copilot Apps: What Developers Need to Know in 2026

SharePoint Copilot Apps and SPFx Development Microsoft has been pushing SharePoint beyond being simply a collaboration and document-management platform. SharePoint Copilot Apps introduce an interesting opportunity for developers to build AI-driven experiences. The question is changing from "How do I build an SPFx solution?" to "How do I build an SPFx solution that can participate in AI-driven experiences?" SharePoint Copilot Apps entered public preview in July 2026, with scenarios including approvals, incident triage, onboarding checklists, interactive data grids, forms, charts, and dashboards. 1. What Are SharePoint Copilot Apps? Traditionally, an SPFx solution lives primarily inside SharePoint. Users navigate to a SharePoint page and interact with the application. Traditional SPFx Model User | v...

SharePoint hosted apps with Angularjs

Wow.. I thought i won't be able to manage to write a blog this month. Hey guys today i am here with a something of that i have been planning since a long time. Some time back i tried to implement Angularjs with SharePoint. To be frank Angularjs is just awesome. You can have flawless feel while working with it. I don't know how will i manage to work with Angularjs in huge projects but i found it really really good to work with single page applications. Let's have a look to the classic definition of Angularjs that you find when you google for Angularjs. Angularjs "AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write." SharePoint Apps SharePoint Apps, I personally found it more developer...