[ANGULAR] Dynamically load events based on startDate and endDate?

[nhinguyen3620]

This is my Angular component:

export class SchedulerComponent implements AfterViewInit {
  @ViewChild(BryntumCalendarComponent)
  calendarComponent!: BryntumCalendarComponent;

  http = inject(HttpClient);
  service = inject(SchedulersService);
  startDate = new Date();
  endDate = new Date();
  events: ScheduledJob[] = [];
  calendarProps: BryntumCalendarProps;

  constructor() {
    const today = new Date();
    const dayOfWeek = today.getDay();

this.startDate.setDate(today.getDate() - dayOfWeek);

this.endDate.setDate(today.getDate() + (7 - dayOfWeek));

this.calendarProps = {
  date: new Date(),

  eventEditFeature: {
    items: {
      location: {
        type: 'textfield',
        name: 'location',
        label: 'Location',
        dataset: { eventType: 'Meeting' },
      },
    },
  },

  eventTooltipFeature: {
    align: 'l-r',
  } as object,
  modes: {
    twoWeek: {
      type: 'dayview',
      range: '2 weeks',
      title: '2 weeks',
    },
    year: null,
    week: {
      eventRenderer: ({
        eventRecord,
      }: {
        eventRecord: EventModel;
      }): string => {
        const value = eventRecord.get('value');
        const name = eventRecord.get('name');
        const id = eventRecord.get('id');

        return `
        <div>${id}</div>
        <div>${name}</div>
        <div>${value}</div>`;
      },
    },
  },
};
  }

  updateData() {
    const config: SchedulerConfigurations = {
      startDate: this.startDate,
      endDate: this.endDate,
    };
    this.service.getSchedulerData(config).subscribe((result) => {
      this.events = result.data;
    });
  }

  ngAfterViewInit() {
    this.updateData();
  }

  onDateRangeChange(event: any): void {
    this.startDate = new Date(event.new.startDate);
    this.endDate = new Date(event.new.endDate);
  

this.updateData();
  }
}

HTML code:

  <bryntum-calendar
          [date]="calendarProps.date!"
          [events]="events"
          [modes]="calendarProps.modes!"
          [eventTooltipFeature]="calendarProps.eventTooltipFeature!"
          [includeWeekendsButton]="true"
          (onDateRangeChange)="onDateRangeChange($event)"
        ></bryntum-calendar>

Service:

export class SchedulersService {

  private httpClient = inject(HttpClient);

  get csaUrl(): string {
    return sessionStorage.getItem('csa-url') as string;
  }

  getSchedulerData(schedulerConfiguration: SchedulerConfigurations) {
    const params = new HttpParams()
      .set('startDateTime', schedulerConfiguration.startDate.toISOString())
      .set('endDateTime', schedulerConfiguration.endDate.toISOString());

const url = this.csaUrl + 'api/scheduler/jobs-quotes-orders';
return this.httpClient.get(url, { params }).pipe(
  map((result: any) => ({
    data: result as ScheduledJob[],
  })),
  catchError((error) => {
    return throwError(() => error);
  }),
);
  }
}

Interfaces:

export interface ScheduledJob {
  id: number;
  name: string;
  startDate: Date;
  endDate: Date;
  dateType: string;
  unit: string;
  value: number;
  allDay: boolean;
}

export interface SchedulerConfigurations {
  startDate: Date;
  endDate: Date;
}

[alex.l]

Hi,

We need a runnable application we can debug and check the problem at runtime. Please attach a complete zip, I am afraid these snippets would not enough for that.

[nhinguyen3620]

I have prepared a simplified version of my app.
The file is too large to upload in the response so I put the link for download here.
https://drive.google.com/file/d/1lMEMzrnXGT7kfQZkxhkaWMBt7rB56ZFO/view?usp=sharing

The issue can only be reproduced with data from API, not from a hardcoded set of data.

[ghulam.ghous]

I have checked your test case, but I am not sure what data format is returned from the backend as there is no backend. But I believe setting just the this.events = result, would not do anything, you will have to add these events to the store on the calendar instance.

Something like this:

    updateData() {
        const params = new HttpParams()
            .set("startDateTime", this.startDate.toLocaleDateString())
            .set("endDateTime", this.endDate.toLocaleDateString());
        const url = "http://localhost:44301/api/scheduler/jobs-quotes-orders";
        return this.http.get(url, { params }).subscribe((result) => {
            // this.events = result;
            this.calendarComponent.instance.eventStore.add(result);
        });
    }

If this does not help, please add a simplified backend as well in the test case as well. While uploading the test case, you can exclude the node modules.