Syncing Outlook Calendar with Scheduler

[Mansi Sharma]

I am using React javaScript functional components for my project. And my project structure is such that, I want the user who logs in being able to see a calendar that is linked with their Outlook Calendar. I can't find any documentation or any example for this setup or to be more precise I don't know how to sync my Outlook Calendar with syncfusion SchedulerComponent. If you can provide me with an example or demo code about how to do this that would be really appreciable.

Second thing is, I was looking at how to sync my syncfusion scheduler with a mongodb database, and I am not able to do that. I can't seem to figure in what format I have to send and retrieve data for appointments from my mongodb server and what should be the schema for that document according to syncfusion scheduler.

[Hareesh Balasubramanian]

Hi Mansi, 

Greetings from Syncfusion Support..! 

  

Q1: Outlook events need to be integrated into the Scheduler. 

 We have integrated the outlook events into the scheduler, please refer to the following sample and code snippets. 

  

        public List GetData() // function to return the outlook appointments 

        { 

            Microsoft.Office.Interop.Outlook.Application oApp = new Microsoft.Office.Interop.Outlook.Application(); 

            Microsoft.Office.Interop.Outlook.NameSpace mapiNamespace = oApp.GetNamespace("MAPI"); 

            Microsoft.Office.Interop.Outlook.MAPIFolder CalendarFolder = mapiNamespace.GetDefaultFolder(Microsoft.Office.Interop.Outlook.OlDefaultFolders.olFolderCalendar); 

            Microsoft.Office.Interop.Outlook.Items outlookCalendarItems = CalendarFolder.Items; 

            List lst = new List(); 

  

            foreach (Microsoft.Office.Interop.Outlook.AppointmentItem item in outlookCalendarItems) 

            { 

                lst.Add(item); 

            } 

  

            List newApp = new List(); 

            // converting COM object into IEnumerable object 

            for (var i = 0; i < lst.Count; i++) 

            { 

                ScheduleEventData app = new ScheduleEventData(); 

                app.Id = i; 

                app.Subject = lst[i].Subject; 

                app.IsAllDay = lst[i].AllDayEvent; 

                app.StartTime = Convert.ToDateTime(lst[i].Start.ToString()); 

                string endTime = lst[i].End.ToString(); 

                DateTime appEndDate = Convert.ToDateTime(endTime); 

                if (endTime.Contains("12:00:00 AM") && app.IsAllDay == true) 

                    app.EndTime = appEndDate.AddMinutes(-1); 

                else 

                    app.EndTime = appEndDate; 

                // app.Recurrence = false; 

                app.RecurrenceRule = null; 

                newApp.Add(app); 

            } 

            return newApp; 

        } 

        public JsonResult LoadData()  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler 

        { 

            var data = GetData().ToList(); // get outlook appointments 

            return Json(data, JsonRequestBehavior.AllowGet); 

        } 

 

Service: https://www.syncfusion.com/downloads/support/forum/166329/ze/Service-1714598190 

Sample: https://stackblitz.com/edit/react-outlook-integration-sample?file=index.js 

Q2: Need to connect the Scheduler with MongoDB as Backend. 

  

We have prepared a CRUD sample with MongoDB as a service which can be downloaded from the below link. 

  

Sample with MongoDB service: https://www.syncfusion.com/downloads/support/forum/166329/ze/SampleWithMongoDB1741955926 

  

In the above sample, we have added CRUD actions code snippet in server.js. 

var MongoClient = require('mongodb').MongoClient; 

const express = require('express'); 

const bodyParser = require('body-parser'); 

const app = express(); 

var url = "mongodb://localhost:27017/"; 

app.use(bodyParser.json()); 

app.use(bodyParser.urlencoded({ extended: false })) 

app.listen(5000, function () { 

    console.log('listening on 5000') 

}) 

app.use(express.static(__dirname)) 

  

MongoClient.connect(url, function (err, db) { 

    if (err) throw err; 

    var dbo = db.db("mydb"); 

    app.use(function (req, res, next) { 

        res.header("Access-Control-Allow-Origin", "*"); 

        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

        next(); 

    }); 

    app.post("/GetData", (req, res) => { 

        dbo.collection('ScheduleData').find({}).toArray((err, cus) => { 

            res.send(cus); 

        }); 

    }); 

    app.post("/BatchData", (req, res) => { 

        var eventData = []; 

        if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) { 

            (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added; 

            for (var i = 0; i < eventData.length; i++) { 

                var sdate = new Date(eventData[i].StartTime); 

                var edate = new Date(eventData[i].EndTime); 

                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000))); 

                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000))); 

                dbo.collection('ScheduleData').insertOne(eventData[i]); 

            } 

        } 

        if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) { 

            (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed; 

            for (var i = 0; i < eventData.length; i++) { 

                delete eventData[i]._id; 

                var sdate = new Date(eventData[i].StartTime); 

                var edate = new Date(eventData[i].EndTime); 

                eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000))); 

                eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000))); 

                dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, eventData[i]); 

            } 

        } 

        if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) { 

            (req.body.action == "remove") ? eventData.push(req.body.value) : eventData = req.body.deleted; 

            for (var i = 0; i < eventData.length; i++) { 

                dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id }, eventData[i]); 

            } 

        } 

        res.send(req.body); 

    }); 

}); 

  

Note: We have removed the local offset time before inserting and updating the events in the database collection to render the appointments without considering system UTC in the scheduler. 

  

In the below code we have given the GetData and BatchData url path to initial fetching and for performing CRUD actions using UrlAdaptor and assigned it to the scheduler datasource. 

  

let data = new DataManager({ url: 'http://localhost:5000/GetData', crudUrl: 'http://localhost:5000/BatchData', adaptor: new UrlAdaptor, crossDomain: true }); 

  

export default class App extends React.Component<{}, {}> { 

  

  public render() { 

    return ( 

       

         

           

           

           

           

           

           

         

         

       

    ); 

  } 

} 

  

Steps to run the sample:  

1. Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.
2. Run the below comments.

npm install cid 

npm run server  

npm start  

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

Regards, 

Hareesh 

[Mansi Sharma]

Thank you for such an elaborate answer! I really appreciate it a lot. I was able to sync my outlook calendar with syncfusion calendar without any difficulty! Thanks a lot!

[Nevitha Ravi]

Hi Mansi, 

You are most welcome..! we are glad that our solution helped you, please get back to us if you need any further assistance. 

Regards, 

Nevitha