1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to bind Microsoft Graph Events to Scheduler?

How to bind Microsoft Graph Events to Scheduler?

How to bind values from Microsoft Graph API to scheduler especially the recurrence rule?
Let the response json looks like

{
"@odata.etag": "W/\"iFCWI0qHtUOuGpAABsBxYBA==\"",
"id": "AAMkADc1MDk0YjI2LTVhMzEtNGE0ZC1iNjNSIT8cS4813LPNmgpfBwCIUJYjSoe1Q65G_dsrfUakAAAAAAENAACIUJYjSoe1Q65G_dsrfUakAAGwLNVJAAA=",
"createdDateTime": "2021-03-18T07:50:43.7465417Z",
"lastModifiedDateTime": "2021-03-18T07:51:16.7592813Z",
"changeKey": "iFCWI0qHtUO31GpAABsBxYBA==",
"categories": [],
"transactionId": "6317ea2a-75e1-496416cc95bd",
"originalStartTimeZone": "Pacific Standard Time",
"originalEndTimeZone": "Pacific Standard Time",
"iCalUId": "040000008200E00074C5B7066CB1BD701000000000000000010000000BE0785C2AA67134BAE6BBD38783FA537",
"reminderMinutesBeforeStart": 15,
"isReminderOn": true,
"hasAttachments": false,
"subject": "Test Graph API",
"bodyPreview": "",
"importance": "normal",
"sensitivity": "normal",
"isAllDay": false,
"isCancelled": false,
"isOrganizer": true,
"responseRequested": true,
"seriesMasterId": null,
"showAs": "busy",
"type": "seriesMaster",
"webLink": "https://outlook.office365.com/owa/?itemid=AAMkAWRiYWNiNABGAAAAAAD8uWMSIT8cS4813LPNmgpfBwCIUJYjSoe1Q65G%2BdsrfUakAAAAAAENAACIUJYjSoe1Q65G%2BdsrfUakAAGwLNVJAAA%3D&exvsurl=1&path=/calendar/item",
"onlineMeetingUrl": null,
"isOnlineMeeting": false,
"onlineMeetingProvider": "unknown",
"allowNewTimeProposals": true,
"isDraft": false,
"hideAttendees": false,
"onlineMeeting": null,
"responseStatus": {
"response": "organizer",
"time": "0001-01-01T00:00:00Z"
},
"body": {
"contentType": "html",
"content": ""
},
"start": {
"dateTime": "2021-03-14T15:00:00.0000000",
"timeZone": "UTC"
},
"end": {
"dateTime": "2021-03-14T15:30:00.0000000",
"timeZone": "UTC"
},
"location": {
"displayName": "",
"locationType": "default",
"uniqueIdType": "unknown",
"address": {},
"coordinates": {}
},
"locations": [],
"recurrence": {
"pattern": {
"type": "weekly",
"interval": 1,
"month": 0,
"dayOfMonth": 0,
"daysOfWeek": [
"monday",
"tuesday",
"wednesday",
"thursday",
"sunday"
],
"firstDayOfWeek": "sunday",
"index": "first"
},
"range": {
"type": "noEnd",
"startDate": "2021-03-14",
"endDate": "0001-01-01",
"recurrenceTimeZone": "Pacific Standard Time",
"numberOfOccurrences": 0
}
},
"attendees": [],
"organizer": {
"emailAddress": {
"name": "Steve",
"address": "[email protected]"
}
}
}

This is one of a recurrence case. How these types of recurrence rules to be binded in scheduler?

3 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team March 22, 2021 11:16 AM UTC

Hi Richy, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “need to bind the Microsoft Graph API data to the Scheduler” using dataBound event of the Scheduler, which can be viewed from the following link. 


  public onDataBound(): void { 
    if (this.flag) { 
      let events = []; 
      for (let i = 0; i < this.data.length; i++) { 
        let data = { 
          Subject: this.data[i].subject, 
          StartTime: this.data[i].start.dateTime, 
          EndTime: this.data[i].end.dateTime, 
          RecurrenceRule: undefined 
        }; 
        if (!isNullOrUndefined(this.data[i].recurrence)) { 
          data.RecurrenceRule = 
            "FREQ=" + 
            this.data[i].recurrence.pattern.type + 
            ";BYDAY=" + 
            this.data[i].recurrence.pattern.daysOfWeek[0] + 
            ";INTERVAL=" + 
            this.data[i].recurrence.pattern.interval; 
        } 
        events.push(data); 
      } 
      this.scheduleObj.eventSettings.dataSource = events; 
      this.flag = false; 
    } 
  } 

Note: We have followed the RecurrenceRule format as a string as per the iCalendar standards, so you need to convert the recurrence as per our string format and the same format is followed in both Google and Outlook Calendars. And for further reference, kindly refer to the below UG link, 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh 


Marked as answer
RG Rachel Gomez February 28, 2022 04:34 PM UTC

The present and future of software development is based on cloud computing.Microsoft Graph is a platform for integrating different applications and services with Microsoft’s cloud services, such as Azure Active Directory (AD), by providing access to the data in them. For example, we can easily create, read, update, and delete (CRUD) an Office 365 Calendar event through its APIs.

This  explains the steps to access calendar events in Office 365 Outlook, display them in Syncfusion Blazor Scheduler using Microsoft Graph APIs and Azure AD programmatically, and then perform CRUD operations in the Scheduler.

Before getting started, make sure you have an Azure AD tenant account. If not, create an Azure AD tenant by joining the Microsoft 365 Developer Program or creating a free Azure trial account.

Follow this steps-

  1. Configure your Blazor application
  2. Configure Azure AD services
  3. Communicate with Azure AD resources
  4. Get and list events from Office 365 Outlook
  5. Integrate Syncfusion Blazor Scheduler with your application
  6. Perform CRUD operations in Office 365 Outlook calendar events
Greeting,
Rachel Gomez

VM Vengatesh Maniraj Syncfusion Team March 1, 2022 03:03 PM UTC

Hi Rachel,


Thanks for the detailed information.


Regards,

Vengatesh 


Loader.
Up arrow icon