How to bind Microsoft Graph Events to Scheduler?

Question

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?

Hareesh Balasubramanian · Accepted Answer

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. 

Sample: https://stackblitz.com/edit/angular-customized-scheduler-sample-using-databound?file=app.component.ts  





  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, 
https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#recurrence-options-and-rules 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh

Rachel Gomez · Answer

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-

Configure your Blazor application
Configure Azure AD services
Communicate with Azure AD resources
Get and list events from Office 365 Outlook
Integrate Syncfusion Blazor Scheduler with your application
Perform CRUD operations in Office 365 Outlook calendar events

Greeting,

Rachel Gomez

Vengatesh Maniraj · Answer

Hi Rachel,Thanks for the detailed information.Regards,Vengatesh