Load Data Dynamically
Im trying to Load Event Data from my Database, but even if my object has data its not shown on the Scheduler, what am I doing wrong?
Hi
Arturo,
We have validated your reported query about data not being shown on the
Scheduler. We prepared a sample with your shared code snippets. The issue is
that the mapping of ProjectID and TaskID in your schedule
datasource is incorrect, causing the data not to be displayed on the scheduler.
You provided a ProjectID of 2, but the datasource tipoHabGroupDataSource does not contain an ID of 2. Similarly, you provided a TaskID of 2, but the habitacionPorTipoDataSource does not contain an ID of 2. If the IDs in the ProjectID and TaskID fields are correct, the events will be displayed properly. Refer to the shared sample for your reference. Kindly try it out.
[app.component.ts]
|
public resourceDataSource: Record<string, any>[] = [ { Id: 61, Subject: "Decoding", StartTime: new Date(2023, 0, 4, 9, 30), EndTime: new Date(2023, 0, 4, 10, 30), IsAllDay: false, ProjectId: 1, TaskId: 1 }];
public tipoHabGroupDataSource: Record<string, any>[] = [ { text: "Glam Camping", id: 1, color: "#f855b1", }, { color: '#2a7b84', id:11, text: 'Cama' }, { text: "Casa de Verano", id: 21, color: "#2f76e7", }, ]; public habitacionPorTipoDataSource: Record<string, any>[] = [ { text: "Bluey - Bluey1", id: 1, groupId: 1, color: "#2ba855", }, { text: "Bingo - Bingo1", id: 31, groupId: 11, color: "#4c6333", }, { text: "Muffin", id: 71, groupId: 21, color: "#cc85c6" }]; |
Sample:
Jycp7j (forked) - StackBlitz
Output screenshot:
Please get back to us if you need any further assistance.
Regards,
Vijay
Hi Arturo,
Based on your requirements, we suggest using the eventRendered
event to set the color of an event based on the category color you have given
in the schedule data source, as shown in the code snippet below. Refer to the
provided sample for reference. Please give it a try.
eventRendered UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments#using-eventrendered-event
[app.component.html]
|
<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' [eventSettings]="eventSettings" (eventRendered)="onEventRendered($event)" [(currentView)]="currentView">
</ejs-schedule> |
[app.component.ts]
|
public currentView: View = 'TimelineDay';
public onEventRendered(args: EventRenderedArgs): void { const categoryColor: string = args.data.CategoryColor as string; if (!args.element || !categoryColor) { return; } if (this.currentView === 'Agenda') { (args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor; } else { args.element.style.backgroundColor = categoryColor; } } |
Sample link: https://stackblitz.com/edit/angular-t6gznu-cb58qi?file=src%2Fapp.component.ts,src%2Fapp.component.html
Output screenshot:
Please get back to us if you need any further assistance.
Regards,
Vijay
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi Arturo,
Based on your requirements, if you need to push the new event to the Scheduler datasource, the eventSettings datasource can be updated as shown in the code snippet below. Refer to the shared sample for your reference. Kindly try it out.
[app.component.ts]
|
const newEvent = { Id: 63, Subject: "Decoding-three", StartTime: new Date(2023, 0, 4, 13, 0), EndTime: new Date(2023, 0, 4, 14, 0), IsAllDay: false, ProjectId: 1, TaskId: 1, CategoryColor: '#909195' }; this.resourceDataSource = [...this.resourceDataSource, newEvent]; // Update the eventSettings dataSource with the new array this.eventSettings = { dataSource: extend([], this.resourceDataSource, null, true) as Record<string, any>[] }; |
Output screenshot:
Please get back to us if you need any further assistance.
Regards,
Vijay
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
