Update library problem

Question

Hello,

I use 18.1.45 version of ej2.min.js. Few times I try to update this version, but I have some weird errors.

So, on initial opening of Schedule, everything is ok, but when I try to add ne event it triggers actionBegin and on server side I create event but after that it isn't visible on calendar.

Error is:

constants.js:93 Uncaught TypeError: Cannot read property 'result' of undefined

at t.processResponse (constants.js:93)

at e.h.onSuccess (constants.js:93)

at e.successHandler (constants.js:93)

at e.stateChange (constants.js:93)

at XMLHttpRequest.t.httpRequest.onreadystatechange (constants.js:93)

ActionBegin triggers normaly, but either actionError or actionComplete is not triggered.

Also, I notice that drag event is not working whit arg.interval = 5, it uses duration of cell ( for example 15 or 30 min )

KR,
Ivan

Hareesh Balasubramanian · Accepted Answer

Hi Ivan, 

Thanks for the update. 

We have validated your shared “I use resources and grouping. If I remove grouping, then creating works normally” query at our end and we suspect that your reported problem may occur due to the mismatch of the resources “IdField” between the server and client ends. And for that, we have modified our previously updated CURD sample by updating the normal Scheduler with resources fields, which can be downloaded from the following link. 

Service: https://www.syncfusion.com/downloads/support/forum/159432/ze/ScheduleCRUDWithResources392440259 
Sample: https://stackblitz.com/edit/datamanager-url-adaptor-with-resources-umyftb?file=index.js 
UG link: https://ej2.syncfusion.com/javascript/documentation/schedule/resources/ 

Server side snippets: 




        public JsonResult LoadData(Params param)  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler 
        { 
            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value. 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
        public class Params 
        { 
            public DateTime StartDate { get; set; } 
            public DateTime EndDate { get; set; } 
        } 

        [HttpPost] 
        public JsonResult UpdateData(EditParams param) 
        { 
            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments 
            { 
                var value = (param.action == "insert") ? param.value : param.added[0]; 
                int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1; 
                DateTime startTime = Convert.ToDateTime(value.StartTime); 
                DateTime endTime = Convert.ToDateTime(value.EndTime); 
                ScheduleEventData appointment = new ScheduleEventData() 
                { 
                    Id = intMax + 1, 
                    StartTime = startTime, 
                    EndTime = endTime, 
                    Subject = value.Subject, 
                    Location = value.Location, 
                    Description = value.Description, 
                    IsAllDay = value.IsAllDay, 
                    StartTimezone = value.StartTimezone, 
                    EndTimezone = value.EndTimezone, 
                    RecurrenceRule = value.RecurrenceRule, 
                    RecurrenceID = value.RecurrenceID, 
                    RecurrenceException = value.RecurrenceException, 
                    GroupID = value.GroupID 
                }; 
                db.ScheduleEventDatas.InsertOnSubmit(appointment); 
                db.SubmitChanges(); 
            } 
            if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment 
            { 
                var value = (param.action == "update") ? param.value : param.changed[0]; 
                var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
                if (filterData.Count() > 0) 
                { 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                    appointment.StartTime = startTime; 
                    appointment.EndTime = endTime; 
                    appointment.StartTimezone = value.StartTimezone; 
                    appointment.EndTimezone = value.EndTimezone; 
                    appointment.Subject = value.Subject; 
                    appointment.Location = value.Location; 
                    appointment.Description = value.Description; 
                    appointment.IsAllDay = value.IsAllDay; 
                    appointment.RecurrenceRule = value.RecurrenceRule; 
                    appointment.RecurrenceID = value.RecurrenceID; 
                    appointment.RecurrenceException = value.RecurrenceException; 
                    appointment.GroupID = value.GroupID; 
                } 
                db.SubmitChanges(); 
            } 
            if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment 
            { 
                if (param.action == "remove") 
                { 
                    int key = Convert.ToInt32(param.key); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault(); 
                    if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                } 
                else 
                { 
                    foreach (var apps in param.deleted) 
                    { 
                        ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                        if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                    } 
                } 
                db.SubmitChanges(); 
            } 
            var data = db.ScheduleEventDatas.ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 

Client side snippets: 




var dataManger = new ej.data.DataManager({ 
  url: "http://localhost:54738/Home/LoadData", 
  crudUrl: "http://localhost:54738/Home/UpdateData", 
  crossDomain: true, 
  adaptor: new ej.data.UrlAdaptor() 
}); 
var scheduleObj = new ej.schedule.Schedule({ 
  width: "100%", 
  height: "650px", 
  selectedDate: new Date(2017, 5, 7), 
  group: { 
    resources: ["Owners"] 
  }, 
  resources: [ 
    { 
      field: "GroupID", 
      title: "Assignee", 
      name: "Owners", 
      allowMultiple: false, 
      dataSource: [ 
        { text: "Alice", id: 1, color: "#1aaa55" }, 
        { text: "Smith", id: 2, color: "#7fa900" }, 
        { text: "Nancy", id: 3, color: "#357cd2" }, 
        { text: "Steve", id: 4, color: "#EA7A57" }, 
        { text: "John", id: 5, color: "#1aaa55" }, 
        { text: "Austin", id: 6, color: "#7fa900" } 
      ], 
      textField: "text", 
      idField: "id", 
      colorField: "color" 
    } 
  ], 
  eventSettings: { dataSource: dataManger } 
}); 
scheduleObj.appendTo("#Schedule"); 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 
Hareesh

Hareesh Balasubramanian · Answer

Hi Ivan, 

Greetings form Syncfusion Support..! 

Q1: So, on initial opening of Schedule, everything is ok, but when I try to add ne event it triggers actionBegin and on server side I create event but after that it isn't visible on calendar. 
 
For this query, we have prepared a CRUD sample using UrlAdaptor and the CRUD actions are properly working which can be downloaded from the following link. 

Service: https://www.syncfusion.com/downloads/support/forum/159432/ze/Service565832411  
Sample: https://stackblitz.com/edit/crud-sample?file=index.js  
UG: https://ej2.syncfusion.com/javascript/documentation/schedule/data-binding/#scheduler-crud-actions  

Q2: Also, I notice that drag event is not working whit arg.interval = 5, it uses duration of cell ( for example 15 or 30 min ) 

We can able to reproduce the reported issue at our end and logged the below bug report. And kindly track the below feedback link for further updates. 
Feedback: https://www.syncfusion.com/feedback/19598/issue-in-customizing-the-dragging-interval-time-of-the-events  

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Ivan · Answer

I'll try first solution later, I need to remove all customizations and enable one by one tu see where problem lies.

I have one more question about drag event.

How can I achieve next behaviour. One event has different durations based on employees ( resources ) When I drag & drop event from one employee to another I would like to have different height of event that I drag.

ex.

Employee 1 has duration of 1hour, employee 2 has duration of 30min.

if even is assigned to EMployee1 and I start Drag event, when I hit second employee, height of event should change to 30min ( visually ).

This is what I try ( with new hard coded duration of 15 min ):

drag: function (args) {
   // todo update duration
   if (_dragStartEmployee != _resourcesData[args.groupIndex].id) {
      console.log('change employee', args);
      _dragStartEmployee = _resourcesData[args.groupIndex].id;
      args.data.EndTime = moment(_dragStartTime).add(15, 'm').toDate();
      args.endTime = moment(args.startTime).add(15, 'm').toDate();
   }
},

Hareesh Balasubramanian · Answer

Hi Ivan, 

Thanks for the update. 

We have checked your requirement “change the time of the shadow events” at our end, but regret to let you know this is not feasible with our Scheduler’s current architecture to modify the time of shadow events when performing dragging . 

Please get back to us if you have any further queries. 

Regards, 
Hareesh

Ivan · Answer

hello, this is how I solve this requirement. It has small business logic, but I think is understandable. drag: function (args) {   let dragElements = $('.e-appointment.e-lib.e-draggable.e-schedule-event-clone.e-drag-clone');   // trigger only when resource is changed
   if (_dragStartGroupIndex != _resourcesData[args.groupIndex].id) {      _dragStartGroupIndex = _resourcesData[args.groupIndex].id;      
      let serviceItem = availableServices.find(service => service.id === args.data.ServiceId);      if (serviceItem !== undefined ) {         _dragEndDuration = _getServiceEmployeeDuration(serviceItem, _dragStartGroupIndex);      }      if (_dragStartGroupIndex === args.data.EmployeeId) {         _dragEndDuration = args.data.Duration;      }
      // calculate new height      let timeInSlot = _calendarSettings.timeScale.interval / _calendarSettings.timeScale.slot;      _dragHeight = _dragEndDuration / timeInSlot * 36;      
      // change background      if (dragElements !== undefined) {         let dragElem = dragElements[0];         dragElem.style.backgroundColor = _resourcesData[args.groupIndex].calendarColor;      }   }

   // change height   dragElements.height(_dragHeight + 'px');},

Nevitha Ravi · Answer

Hi Ivan, 

Thanks for your update. 

We have checked your code which is fine to achieve your requirement to change the height of the shadow events instead of changing the start and end time. Please get back to us if you need any assistance. 

Regards, 
Nevitha.

Ivan · Answer

Hello,

I try first solution, and it is not working for me.

Can you direct me in right direction based on bellow description.

with my current version 18.1.45. when I add new event, ActionBegin is triggered, after that update request is send to a backend and some internaly functionality trigers reading datasource ( url on datasource ).

When I update lib, it stops on update event ( with 200 OK response ) and with next error.

console.log output

actionBegin DONE {requestType: "eventChange", cancel: false, addedRecords: Array(0), changedRecords: Array(1), deletedRecords: Array(0), …}

Error:

constants.js:93 Uncaught TypeError: Cannot read property 'result' of undefined

at t.processResponse (constants.js:93)

at e.h.onSuccess (constants.js:93)

at e.successHandler (constants.js:93)

at e.stateChange (constants.js:93)

at XMLHttpRequest.t.httpRequest.onreadystatechange (constants.js:93)

neither actionComplete or actionFailure is not triggered.

my datasource is configured:

_scheduleDatasource = new ej.data.DataManager({
   url: contextPath + '/b/api/schedules/data',
   crudUrl: contextPath + '/b/api/schedules/update',
   adaptor: new ej.data.UrlAdaptor(),
   crossDomain: true,
   headers: [{ "X-Requested-With": "XMLHttpRequest" }]
});

and Event settings:

eventSettings: {
   dataSource: _scheduleDatasource,
   query: new ej.data.Query().requiresCount()
},

So, my question is, what can cause that error between actionBegin and actionComplete/Failure

Thanks in advance!

KR,
Ivan

Hareesh Balasubramanian · Answer

Hi Ivan, 
  
Thanks for the update. 
  
We have prepared a CRUD sample using UrlAdaptor based on your shared code snippets and in that the CRUD actions are properly working at our end, which can be downloaded from the following link. 
  
Service: https://www.syncfusion.com/downloads/support/forum/159432/ze/Service565832411    
Sample: https://stackblitz.com/edit/crud-sample?file=index.js     
UG: https://ej2.syncfusion.com/javascript/documentation/schedule/data-binding/#scheduler-crud-actions  
  
Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better?   
   

Kindly share the client side rendering code snippets and also server side snippets. 
Replicate the issue in the above sample.
Share the issue replicating sample (if possible)
  
We will happy to assist you. 
  
Regards, 
Hareesh

Ivan · Answer

Yes,

your clean example works. As I have a lot of customization on schedule component is hard for me to recreate everything from beginning.

I made research, so if you can take a look.

In my version of library - 18.1.45

t.prototype.processResponse = function(e, t, i, n, r, o) {

if (n && n.getResponseHeader("Content-Type") && -1 !== n.getResponseHeader("Content-Type").indexOf("application/json")) {

var s = Lj.timeZoneHandling;

t && !t.timeZoneHandling && (Lj.timeZoneHandling = !1),

e = Lj.parse.parseJson(e),

Lj.timeZoneHandling = s

}

var a = r

, l = a.pvtData || {}

, h = e ? e.groupDs : [];

if (n && n.getResponseHeader("Content-Type") && -1 !== n.getResponseHeader("Content-Type").indexOf("xml"))

return i.isCountRequired ? {

result: [],

} : [];

var d = JSON.parse(a.data);

if (d && "batch" === d.action && e && e.addedRecords)

return o.addedRecords = e.addedRecords,

o;

e && e.d && (e = e.d);

var c = {};

return e && "count"in e && (c.count = e.count),

c.result = e && e.result ? e.result : e,

this.getAggregateResult(l, e, c, h, i),

Lj.isNull(c.count) ? c.result : {

result: c.result,

aggregates: c.aggregates

}

current version:

t.prototype.processResponse = function(e, t, i, n, r, o) {

if (n && n.getResponseHeader("Content-Type") && -1 !== n.getResponseHeader("Content-Type").indexOf("application/json")) {

var s = qN.timeZoneHandling;

t && !t.timeZoneHandling && (qN.timeZoneHandling = !1),

e = qN.parse.parseJson(e),

qN.timeZoneHandling = s

}

var a = r

, l = a.pvtData || {}

, h = e ? e.groupDs : [];

if (n && n.getResponseHeader("Content-Type") && -1 !== n.getResponseHeader("Content-Type").indexOf("xml"))

return i.isCountRequired ? {

result: [],

} : [];

var c = JSON.parse(a.data);

if (c && "batch" === c.action && e && e.addedRecords)

return o.addedRecords = e.addedRecords,

o;

e && e.d && (e = e.d);

var p = {};

e && "count"in e && (p.count = e.count),

p.result = e && e.result ? e.result : e;

var u = !1;

if (Array.isArray(e.result) && e.result.length) {

if (d(e.result[0].key) || (p.result = this.formRemoteGroupedData(p.result, 1, l.groups.length - 1)),

i && i.lazyLoad.length && l.groups.length)

for (var g = 0; g < i.lazyLoad.length; g++)

if ("onDemandGroupInfo" === i.lazyLoad[g].key) {

var m = i.lazyLoad[g].value.level;

l.groups.length === m && (u = !0)

}

return u || this.getAggregateResult(l, e, p, h, i),

qN.isNull(p.count) ? p.result : {

result: p.result,

aggregates: p.aggregates

}

So, difference is this part with red background, and I get an error:

ej2.min.js:formatted:53683 Uncaught TypeError: Cannot read property 'result' of undefined

at t.processResponse (ej2.min.js:formatted:53683)

at e.h.onSuccess (ej2.min.js:formatted:54937)

at e.successHandler (ej2.min.js:formatted:24446)

at e.stateChange (ej2.min.js:formatted:24464)

at XMLHttpRequest.t.httpRequest.onreadystatechange (ej2.min.js:formatted:24428)

Array.isArray(e.result) e is from some reason undefined.

Can you lead me when this code executes or which config can make impact on this part?

EDIT:

I add condition e !== undefined in front Array.isArray and inside getAggregateResult, now half of functions works, half doesn't.

For Example:
With additional condition: drag, resize, update event works, without it doesn't works.

But now I have problem with create event.
After I create new event error shows: TypeError: Cannot read property 'groupIndex' of undefined.

I use resources and grouping. If I remove grouping, then creating works normally.

Here is my configuration;

resources: [{
   field: 'EmployeeId',
   title: 'Employee',
   name: _resourcesGroupId,
   allowMultiple: false,
   dataSource: _resourcesData,
   textField: 'name',
   idField: 'id',
   colorField: 'calendarColor'
}],
group: {
   resources: [_resourcesGroupId],
   enableCompactView: false
},

KR;
Ivan

Ivan · Answer

Hello,

now I know where the problem lies.

Currently in server response I return "field" in response from server, so there is no problem with "connecting".

On create request, I manipulate with data and I have field Services, which is a list of services that are bound to an event. Every service can have different employee, and on create request I don have data in EmployeeId field, because it isn't unique value.

After server processing and saving event I return multiple events if I have multiple services on create.

Example:

event1
services: [{employee1, service1},{employee2, service2}]

services is something like "add new service" where I duplicate service form and I can have unlimited number of services.

on save this is returned from an server like:

event1, employee1, service1;
event1, employee2, service2.

That everything explains why only create doesn't work.

I don't know now what is good solution for my case. Currently after saving I have load data request to server for fetch all events for selected period ( refresh datasource ).

Do you have some advice?

KR,
Ivan

Hareesh Balasubramanian · Answer

Hi Ivan, 
  
Thanks for the update. 
  
Yes, we need to call the load data request to fetch the all the events for the selected period after performing CRUD actions and the same can be viewed in our previously shared CRUD sample and in that, LoadData function will triggers every time to fetch the current view events of the Schedule, after while the events has been created/updated/deleted from the DB. 
  
Please revert if you have any concern. 
  
Regard, 
Hareesh

Ivan · Answer

Yes,

but the old library don't have that problem or I use something in wrong way.

For me, there is error between create response and load data request - because Library tries to match event data and shows in calendar. I don't understand why is this step required if You trigger load data and render everything again?

In short,

when I create event I don't have GroupID but when I fetch data I have GroupID.

What is meaning of "onDemandGroupInfo" in added code between my version and latest?

KR,
Ivan

Vengatesh Maniraj · Answer

Hi Ivan, 

Thanks for the update. 

We have to let you know the behavior of the scheduler when we use the resource based events in it. Accordingly, when we render the events in the resource scheduler, the event object should maintain the “field” property. Then only the events will be rendered in the respective resources. So if we use the database to perform the CRUD actions, we need to map the resource field property in the event object.  

And, in our scheduler, we have used the overlapping concepts for the events. So in every CRUD actions, we have triggered the load data and render all the events again to cover the overlapping functionality. 

And, the “OnDemandGroupInfo” is to send the additional details that are level, skip, filter and take to handle the lazy load grouping along with the default server request. For more reference, please visit the below link. 

https://ej2.syncfusion.com/documentation/grid/grouping/#handling-the-lazy-load-grouping-at-server-side 

Note: In our Scheduler, we don’t handle the OnDemandGrouping parameter at the source level. 

Regards, 
Vengatesh

Ivan · Answer

Hello,

I tried quick fix and added EmployeeId field in record that I'm saving, and that works fine, but only for case when I add only One service assigned to that employee. If I mix employees it shows only last event. ( on moving one day forward and back, it shows everything correctly).

Secondly, this quick fix is not working if I don't have check if e is not undefined in bellow if statement inside your lib.

var u = !1;

if (Array.isArray(e.result) && e.result.length) {

From your explanation:

"And, in our scheduler, we have used the overlapping concepts for the events. So in every CRUD actions, we have triggered the load data and render all the events again to cover the overlapping functionality. "

it seems that you firstly try to show events and after that call load data, at this point I have an error that prevents loading data. Isn't that redundant move if I return all events from server for selected period?

Currently, there are few problems that are stopping me to update library:

e is undefined that produces error and stops execution ( loading data )
creating multiple events in one appointment ( something with groupId ) - do you have some advice how to achieve this?

Here is short video of actions that I'm doing:
https://www.dropbox.com/s/0qo444xkb8yv44q/Screencast%202021-02-08%2017%3A03%3A45.mp4?dl=0

KR;
Ivan

Hareesh Balasubramanian · Answer

Hi Ivan, 

Thanks for the update. 

We have validated your shared video demo at our end and suspect that your requirement is to render more that one events to the Scheduler and for that, we have prepared a CRUD sample and in that when we click on the Button Component to add existing ten events in the DB at a single click and the sample can be downloaded from the following link. 
 
Code snippet: 

Server-side: 




public JsonResult UpdateData(EditParams param) 
        { 
            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments 
            { 
                for (var i = 0; i < param.added.Count; i++) 
                { 
                    var value = (param.action == "insert") ? param.value : param.added[i]; 
                    int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1; 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    ScheduleEventData appointment = new ScheduleEventData() 
                    { 
                        Id = intMax + 1, 
                        StartTime = startTime, 
                        EndTime = endTime, 
                        Subject = value.Subject, 
                        Location = value.Location, 
                        Description = value.Description, 
                        IsAllDay = value.IsAllDay, 
                        StartTimezone = value.StartTimezone, 
                        EndTimezone = value.EndTimezone, 
                        RecurrenceRule = value.RecurrenceRule, 
                        RecurrenceID = value.RecurrenceID, 
                        RecurrenceException = value.RecurrenceException 
                    }; 
                    db.ScheduleEventDatas.InsertOnSubmit(appointment); 
                    db.SubmitChanges(); 
                } 
            } 
            if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment 
            { 
                var value = (param.action == "update") ? param.value : param.changed[0]; 
                var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
                if (filterData.Count() > 0) 
                { 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                    appointment.StartTime = startTime; 
                    appointment.EndTime = endTime; 
                    appointment.StartTimezone = value.StartTimezone; 
                    appointment.EndTimezone = value.EndTimezone; 
                    appointment.Subject = value.Subject; 
                    appointment.Location = value.Location; 
                    appointment.Description = value.Description; 
                    appointment.IsAllDay = value.IsAllDay; 
                    appointment.RecurrenceRule = value.RecurrenceRule; 
                    appointment.RecurrenceID = value.RecurrenceID; 
                    appointment.RecurrenceException = value.RecurrenceException; 
                } 
                db.SubmitChanges(); 
            } 
            if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment 
            { 
                if (param.action == "remove") 
                { 
                    int key = Convert.ToInt32(param.key); 
                    ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault(); 
                    if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                } 
                else 
                { 
                    foreach (var apps in param.deleted) 
                    { 
                        ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                        if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
                    } 
                } 
                db.SubmitChanges(); 
            } 
            var data = db.ScheduleEventDatas.ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 

Client-side: 




btnELe.element.onclick = function () { 
  var schObj = document.querySelector('.e-schedule').ej2_instances[0]; 
  var schData = [{ 
    Id: 1, 
    Subject: 'Explosion of Betelgeuse Star', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 6, 9, 30), 
    EndTime: new Date(2019, 0, 6, 11, 0) 
  }, { 
    Id: 2, 
    Subject: 'Thule Air Crash Report', 
    Location: 'Newyork City', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 7, 12, 0), 
    EndTime: new Date(2019, 0, 7, 14, 0) 
  }, { 
    Id: 3, 
    Subject: 'Blue Moon Eclipse', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 8, 9, 30), 
    EndTime: new Date(2019, 0, 8, 11, 0) 
  }, { 
    Id: 4, 
    Subject: 'Meteor Showers in 2018', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 9, 13, 0), 
    EndTime: new Date(2019, 0, 9, 14, 30) 
  }, { 
    Id: 5, 
    Subject: 'Milky Way as Melting pot', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
   StartTime: new Date(2019, 0, 10, 12, 0), 
    EndTime: new Date(2019, 0, 10, 14, 0) 
  }, { 
    Id: 6, 
    Subject: 'Mysteries of Bermuda Triangle', 
    Location: 'Bermuda', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 10, 9, 30), 
    EndTime: new Date(2019, 0, 10, 11, 0) 
  }, { 
    Id: 7, 
    Subject: 'Glaciers and Snowflakes', 
    Location: 'Himalayas', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 11, 11, 0), 
    EndTime: new Date(2019, 0, 11, 12, 30) 
  }, { 
    Id: 8, 
    Subject: 'Life on Mars', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 12, 9, 0), 
    EndTime: new Date(2019, 0, 12, 10, 0) 
  }, { 
    Id: 9, 
    Subject: 'Alien Civilization', 
    Location: 'Space Centre USA', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 14, 11, 0), 
    EndTime: new Date(2019, 0, 14, 13, 0) 
  }, { 
    Id: 10, 
    Subject: 'Wildlife Galleries', 
    Location: 'Africa', 
    IsAllDay: false, 
    StartTime: new Date(2019, 0, 16, 11, 0), 
    EndTime: new Date(2019, 0, 16, 13, 0) 
  }]; 
  schObj.addEvent(schData); 
}; 

Service: https://www.syncfusion.com/downloads/support/forum/162343/ze/Service-1546037037  
Sample: https://stackblitz.com/edit/wf4tbn?file=index.js  

Kindly try the above solution with your backend data and if the solution does not meet your requirement share with us more details like data format that has been received from your API call that will be more helpful to provide a prompt solution at earliest. 

Regards, 
Hareesh

Ivan · Answer

Hello,I can't do that, because I need to have one appointment and multiple services, in that way I send request on server and return multiple services for render, but for same appointment Id. If I do in way that you suggest, I need update server side logic and I loose connection between multiple services inside same appointment. for example: Hair appointment - it can consist of hair wash, hair coloring, haircut and drying. It's silly if you need 4 times add an "event" and selects same client over and over. Also, besides that problem/challenge, I also have blocker with e=undefined and error, no matter of this case above.

Hareesh Balasubramanian · Answer

Hi Ivan, 

Thanks for the update. 

We have updated our last response based on your shared video demo and in that, you are trying to bound more than one event for the Scheduler and also in that demo the events are properly loaded without any reported error (e-undefined). 

Q1: Hair appointment - it can consist of hair wash, hair coloring, haircut and drying. It's silly if you need 4 times add an "event" and selects same client over and over. 

For this query, kindly share more details like, 


whether you are adding custom fields for the existing event or you are maintaining additional events for those above scenario ?
Kindly share where you are updating the CRUD actions for the Scheduler ?

Q2: Also, besides that problem/challenge, I also have blocker with e=undefined and error, no matter of this case above 
We have ensured the above reported problem at our side but unfortunately, we are not able to replicate your reported problem. 

If the issue still persists at your end kindly share the below details to serve you better? 

Replicate the issue in the previously shared sample.
Share the issue replicating sample (if possible) with the issue replicating steps.
  
Regards, 
Hareesh