On double click of next,prev,today - data is binding twice


I have an issue when I double click either the prev, next and today buttons the data(events) bind twice to the scheduler UI. Basically when I click these buttons it sends consecutive get requests.

Here’s a video clip of what’s going on - screencast.com/t/GMccR70sWh

Here’s some code - I’m on angular

export class SchedulerComponent implements OnInit {

@ViewChild(‘scheduler_here’) schedulerContainer: ElementRef;

constructor(private scheduleService: SchedulerService ) {}

ngOnInit() {

scheduler.config.xml_date = '%Y-%m-%d %h:%i';
scheduler.config.hour_date = '%h %a';

// creates the calendar
scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'week');

// initial load timeslots and appointments

// Re-draw scheduler on scheduler change
scheduler.attachEvent('onViewChange', (new_mode, new_date) => {
    const startWeek = new_date;
    const endMonth = new_date;

    this.displayData(new_date, startWeek, endMonth);


// display api data
displayData(date?: string, start?: string, end?: string) {
this.scheduleService.getTimeSlotsAndAppointments(date, start, end)
.subscribe((res) => {

    const timeSlotsAndAppointments = {
      timeslots: res.timeslots.map(item => new CalendarTimeSlot(item)),
      appointments: res.appointments.map(item => new Appointments(item))

    scheduler.parse(timeSlotsAndAppointments.timeslots, 'json');
    scheduler.parse(timeSlotsAndAppointments.appointments, 'json');
  err => console.error(err),
  () => console.log('Data retrieved complete')


Can somebody please help me?


Possibly this topic can help you to solve the issue. There you find the way how to block double-loading forum.dhtmlx.com/viewtopic.php?f=6&t=33803

If you want to load data by parts, read also about Dynamic loading
docs.dhtmlx.com/scheduler/loadi … micloading