I want to use the dhtmlx onEmptyClick event in my Angular2 component, inside which I want to call my component’s function called changewall(), but getting an error:
this.changeWall is not a function
If I put changewall() outside scheduler.attachEvent the body works fine. Why is this happening?
DOES NOT WORK:
scheduler.attachEvent("onEmptyClick", function (date, e ){
console.log('clickBefore');
this.changeWall(1511305200000);
console.log('clickAfter');
});
THIS WORKS:
this.changeWall(1511305200000);
scheduler.attachEvent("onEmptyClick", function (date, e ){
console.log('clickBefore');
console.log('clickAfter');
});
Whole code:
import {Component, OnInit, AfterViewInit, HostListener} from '@angular/core';
import {WallService} from "../../services/wall.service";
declare var scheduler:any; //hide errors
@Component({
moduleId: module.id,
selector: 'big-calendar',
templateUrl: 'calendar2.component.html',
styleUrls: ['calendar2.component.scss']
})
export class Calendar2Component implements AfterViewInit {
private wallInstance: any;
events: any;
constructor(private _wall: WallService) {
}
@HostListener('click', ['$event'])
onClick(e) {
// this.refreshCalendar();
}
refreshCalendar(){
let date = new Date(scheduler.getState().date);
let month = date.getMonth() + 1;
let year = date.getFullYear();
// scheduler.clearAll();
scheduler.attachEvent("onEmptyClick", function (date, e ){
console.log('clickBefore');
this.changeWall(1511305200000);
console.log('clickAfter');
});
this._wall.getCalendarEvents(month, year).subscribe((data: any)=>{
console.log(data);
let i = 0, events = [];
while(i < data.events.length){
events.push({
holder: "t", //userdata
room: "1" ,
text: data.events[i].name,
start_date: data.events[i].start,
end_date: data.events[i].end +1
});
i++;
}
console.log(events);
scheduler.init('scheduler_here',new Date(),"month");
scheduler.parse(events,"json");
});
}
ngAfterViewInit(): void {
scheduler.config.touch = "force";
this.refreshCalendar();
// scheduler.parse([
// {id:1, text:"Meeting", start_date:"04/11/2016 14:00",end_date:"14/12/2016 17:00"}
// ],"json");
}
changeWall(timestamp){
// let timestamp = new Date(date).getTime();
// console.log(timestamp);
this.wallInstance = this._wall.getInstance();
this.wallInstance.timeChanger(timestamp);
}
}
