Is there a way to load events into jqxScheduler from an HTTP API in Angular? I’d

[sandeParticipant]

Hi everyone, I am working on a CRM-like back-office app with Scheduler.

I am currently trying to solve this: Is there a way to load events into jqxScheduler from an HTTP API in Angular? I’d like to dynamically pull appointments based on the selected date range.

So far, I tried a couple of approaches from forum threads, but the component updates only after a manual refresh.

What would be the cleanest way to implement this?

[adminKeymaster]

For jqxScheduler, the common pattern is to use a jqx.dataAdapter and replace its local data when the range changes.

Example:

export class SchedulerComponent {
  appointments: any[] = [];

  source = {
    dataType: 'array',
    dataFields: [
      { name: 'id', type: 'number' },
      { name: 'subject', type: 'string' },
      { name: 'start', type: 'date' },
      { name: 'end', type: 'date' }
    ],
    localData: this.appointments
  };

  dataAdapter = new jqx.dataAdapter(this.source);

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadAppointments(new Date(), new Date());
  }

  onViewChange(event: any) {
    const from = event.args.date;
    const to = new Date(from);

    // Calculate visible range depending on view type
    to.setDate(to.getDate() + 30);

    this.loadAppointments(from, to);
  }

  loadAppointments(from: Date, to: Date) {
    this.http.get<any[]>('/api/appointments', {
      params: {
        from: from.toISOString(),
        to: to.toISOString()
      }
    })
    .subscribe(items => {
      this.source.localData = items;
      this.dataAdapter.dataBind();

      // refresh scheduler binding
      this.scheduler.source = this.dataAdapter;
    });
  }
}

Template:

<jqxScheduler
  #scheduler
  [source]="dataAdapter"
  (onViewChange)="onViewChange($event)">
</jqxScheduler>

A few things that commonly cause the “only updates after refresh” behavior:

Replacing the array reference alone is not enough:

this.appointments = newAppointments;

does not necessarily notify the jqx widget.

Mutating the existing array also often fails:

this.appointments.push(…)

because the scheduler is not Angular-change-detection driven.

Make sure your API returns dates as actual Date objects (or convert ISO strings):

items.map(x => ({
  ...x,
  start: new Date(x.start),
  end: new Date(x.end)
}))

For a CRM-style app, I would also avoid loading all appointments upfront. Instead:

onViewChange → fetch visible range
cache ranges if users navigate back and forth
debounce rapid navigation events
cancel previous HTTP calls with switchMap

A more Angular-native version would put the date range into an RxJS stream:

range$ = new Subject<{from: Date, to: Date}>();

appointments$ = this.range$.pipe(
  switchMap(range =>
    this.http.get('/api/appointments', { params: {
      from: range.from.toISOString(),
      to: range.to.toISOString()
    }})
  )
);

Then update the jqx adapter whenever the observable emits.

The key idea is: treat jqxScheduler as an external widget and explicitly push data into its adapter, rather than relying on Angular change detection to refresh it.

Regards,
Peter

[Author]

Posts