Data is not getting populated to Angular scheduler
Hi,
Whenever we try to populate data in scheduler it is throwing error and data is not loading. But i could see the data in console.
Html Code:
Ts Code:
import { Component, OnInit, Inject, ViewEncapsulation,ViewChild } from '@angular/core';
import {
TimelineViewsService, AgendaService, GroupModel, EventSettingsModel,
ResizeService, DragAndDropService, EventRenderedArgs, ScheduleComponent
} from '@syncfusion/ej2-angular-schedule';
import { extend } from '@syncfusion/ej2-base';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-view-calendar',
templateUrl: './view-calendar.component.html',
styleUrls: ['./view-calendar.component.css'],
styles: [`
.timeline-resource-grouping.e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
width: 90px;
}
.timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {
width: 100px;
}
`],
encapsulation: ViewEncapsulation.None,
providers: [TimelineViewsService, AgendaService, ResizeService, DragAndDropService]
})
export class ViewCalendarComponent implements OnInit {
@ViewChild(ScheduleComponent, { static: true }) scheduleObj: ScheduleComponent;
public data: Record
public eventSettings: EventSettingsModel = { dataSource: this.data };
public scheduleData: Object[] = [];
public allMembersData: Object[] = [];
private _baseUrl: string;
public trackId : string ;
private index : number = 0;
private colorCodeId : number = 0;
public workDays: number[] = [1, 2, 3, 4, 5];
public color: string[] = ['#df5286', '#7fa900', '#ea7a57', '#5978ee', '#b30086','#00bdae'];
public group: GroupModel = {
resources: ['Members']
};
public allowMultiple = true;
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this._baseUrl = baseUrl;
}
ngOnInit() {
this.MapDataToScheduler();
}
GetAssignedTaskData() {
this.trackId = "TR100001";
var promise = new Promise((resolve, reject) => {
this.http.get(this._baseUrl + 'api/Task/GetViewCalendarData?trackId=' + this.trackId).subscribe((data: any) => {
console.log(data);
resolve(data);
}, error => reject(error));
});
return promise;
}
MapDataToScheduler() {
this.scheduleData = [];
this.GetAssignedTaskData().then((data: any) => {
data.forEach((element: any) => {
if (this.allMembersData.find(item => item["MemberId"] === parseInt(element.userId.substring(2, 8))) == null) {
this.allMembersData.push({
MemberId: parseInt(element.userId.substring(2, 8)),
MemberName: element.userName,
color: this.getColor()
});
}
this.scheduleData.push({
Id: parseInt(element.assignedTaskId.substring(2, 8)),
Subject: element.taskName,
StartTime: element.startDate,
EndTime: element.endDate,
MemberId: parseInt(element.userId.substring(2, 8)),
});
})
this.data = extend([], null, null, true) as Record
this.data = extend([], this.scheduleData, null, true) as Record
this.scheduleObj.eventSettings = {
allowAdding: false,
allowEditing: false,
allowDeleting: false,
dataSource: this.data,
fields: {
id: 'MemberId',
subject: {
name: 'Subject'
},
startTime: {
name: 'StartTime'
},
endTime: {
name: 'EndTime'
},
}
};
console.log(this.scheduleObj.eventSettings.dataSource);
console.log(this.allMembersData);
});
}
// Method to get color codes for tasks
getColor()
{
if(this.index > 5)
{
this.colorCodeId = (this.index % 5);
}
else
{
this.colorCodeId = this.index;
}
this.index = this.index + 1;
return this.color[this.colorCodeId];
}
}
