Thanks for the update. Unfortunately, I'm not able to reproduce the problem.
Could you please try to reproduce the problem using the following example? If you were able to modify it so that it reproduces the problem it would help a lot with debugging the issue.
1. Generate a new Angular project using the UI Builder at https://builder.daypilot.org/scheduler
2. Replace the src/app/scheduler/scheduler.component.ts content with the following code:
import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service';
import ResourceData = DayPilot.ResourceData;
@Component({
selector: 'scheduler-component',
template: `
<div class="space"><button (click)="updateResources()">Update resources</button></div>
<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
`,
styles: [``]
})
export class SchedulerComponent implements AfterViewInit {
@ViewChild('scheduler', {static: false})
scheduler: DayPilotSchedulerComponent;
events: any[] = [];
config: DayPilot.SchedulerConfig = {
timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
scale: "Day",
days: DayPilot.Date.today().daysInMonth(),
startDate: DayPilot.Date.today().firstDayOfMonth(),
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: function (args) {
var dp = this;
DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
dp.clearSelection();
if (!modal.result) { return; }
dp.events.add(new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
}));
});
},
treeEnabled: true,
heightSpec: "Max",
height: 200
};
constructor(private ds: DataService) {
}
ngAfterViewInit(): void {
this.ds.getResources().subscribe(result => this.config.resources = result);
const from = this.scheduler.control.visibleStart();
const to = this.scheduler.control.visibleEnd();
this.ds.getEvents(from, to).subscribe(result => {
this.events = result;
});
}
updateResources() {
let resources:ResourceData[] = [
{name: "Frozen 1", id: "frozen", frozen: "top"},
{name: "Resource 1", id: "r1"},
{name: "Resource 2", id: "r2"},
{name: "Resource 3", id: "r3"},
{name: "Resource 4", id: "r4"},
{name: "Resource 5", id: "r5"},
{name: "Resource 6", id: "r6"},
{name: "Resource 7", id: "r7"},
{name: "Resource 8", id: "r8"},
{name: "Resource 9", id: "r9"},
{name: "Resource 10", id: "r10"},
{name: "Resource 11", id: "r11"},
{name: "Resource 12", id: "r12"},
];
this.config.resources = resources;
}
}
This example works fine with the latest sandbox build:
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2020.4.4742.tar.gz --save
I don't see any problem when updating the resources using "Update resources" button but maybe I'm missing something.
Also, your code causes a double update. It doesn't affect this issue but it may affect performance. You should use either:
this.schedulerConfig.resources = this.resources;
This will use the change detection mechanism and Angular will update the Scheduler automatically.
But to improve the performance, I recommend using a direct update without storing resources in the config object:
this.scheduler.control.update({resources: this.resources});
See also:
https://doc.daypilot.org/scheduler/angular-performance/