room schedule component, sync with google calendar

[KIM Dongsik]

Hi, 

In the Schedule component documentation, it says: "Easy synchronization of events with Google and Outlook calendars."

I can not find any timeline example of sync to Google Calendar.

Could you provide an room schedule timeline example please?

Regards,

Dongsik.

[Hareesh Balasubramanian]

Hi Kim, 

  

Greetings from Syncfusion Support..! 

  

We have validated your shared query “need to sync the Google Calendar events into the Scheduler” at our end. And for that, we have prepared a sample in that, we have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler dataSource. Since the events data retrieved from the Google Calendar will be in its own object format, it needs to be resolved manually within the Scheduler’s dataBinding event. Within this event, the event fields needs to be mapped properly and then assigned to the result. 

  

Sample: https://codesandbox.io/s/vue-template-google-events-are-loaded-into-the-scheduler-4tq0y 

UG link: https://ej2.syncfusion.com/vue/documentation/schedule/data-binding/?#configuring-scheduler-with-google-api-service  

  

dataBinding: function (e) { 

  var items = e.result.items; 

  var scheduleData = []; 

  if (items.length > 0) { 

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

                  var event = items[i]; 

                  var when = event.start.dateTime; 

                  var start = event.start.dateTime; 

                  var end = event.end.dateTime; 

                  if (!when) { 

                                when = event.start.date; 

                                start = event.start.date; 

                                end = event.end.date; 

                  } 

                  scheduleData.push({ 

                                Id: event.id, 

                                Subject: event.summary, 

                                StartTime: new Date(start), 

                                EndTime: new Date(end), 

                                IsAllDay: !event.start.dateTime, 

                                RoomId: i, 

                  }); 

                } 

  } 

  e.result = scheduleData; 

}, 

  

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

  

We will be happy to assist you..! 

  

Regards, 

Hareesh 

[Nurbek]

Hello,I am sorry for bothering you.I just wanted to know if this solution works with Outlook Calendar?

Unfortunately ,I didnt find any example of that,so I am using msGraph to reach every update/create/delete of event.

Is there a better way to make binding with Outlook ?

Thanks in adavance.

[Ruksar Moosa Sait]

Hi Nurbek,

We have prepared a sample to integrate 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://codesandbox.io/s/vue-template-forked-pk8v18?file=/src/App.vue

Let us know if you need any assistance.

For more details check out the below forum.

https://www.syncfusion.com/forums/166329/syncing-outlook-calendar-with-scheduler

Regards,

Ruksar Moosa Sait