I am working on a way to pre-populate the arrays of stores listed in my scheduler.
When the scheduler goes to render the items, I get "Uncaught TypeError: cannot read property 'name' of undefined."
In my code, I pull down a list of events from my server which contain event data, as well as a list of employees on that event and jobs that event is for.
Here you can see the promise handler after my ajax code comes back:
.then(
(em) => {
for (let item of em) {
let emps = [];
emps.push({ id: 640, name: 'Some Name', image: "https://landpoint.bamboohr.com/employees/photos/?h=c64fff6051590ed16c1d00cb74257765"});
let jobs = [];
jobs.push({ id: 640, name: 'Some Name', image: "https://landpoint.bamboohr.com/employees/photos/?h=c64fff6051590ed16c1d00cb74257765"});
this.events.push({ id: item.PKID, resourceId: item.FK, name: item.Event_Name, startDate: item.Start_Date, endDate: item.End_Date, equipment: jobs, employee: emps });
}
this.schedule.events = this.events;
this.schedule.trigger('load', { data: this.events });
}
)
eventBodyTemplate: data => `
<div class="b-sch-event-header">${data.date} - ${data.name}</div>
<ul class="b-sch-event-footer">
${(data.equipment || []).map((item) => `<li title="${item.name}" class="${item.iconCls}">${item.name}</li>`).join('')}
</ul>
<ul class="b-sch-event-footer" style ="list-style-type: none;">
${(data.employee || []).map((item) => `<li title="${item.name}"> <img height="24px" src=${item.image} class="img-circle" alt=""></li>`).join('')}
</ul>
`