我使用angular5和fullcalendar.io并希望拥有这样的代码,其中mySelectEvent(event)是我定义的可重用函数,它将操作fullcalendar并可以从多个fullcalendar回调事件中调用。 / p>
ngOnInit() {
$('#calendar').fullCalendar({
eventClick: function(event, jsEvent, view) {
mySelectThisEvent(event);
...
};
eventResizeStart: function( event, jsEvent, ui, view ) {
mySelectThisEvent(event);
...
};
eventDargStart: function( event, jsEvent, ui, view ) {
mySelectThisEvent(event);
...
};
}
function mySelectThisEvent(event) {
<for loop deselect old event>
<select event
}
}
我有完整的日历工作并做各种各样的事情,所以只是询问在哪里放置一个函数定义以及如何从fullcalendar回调事件中调用它。
答案 0 :(得分:1)
是的,在Typescript中,这是我如何解决的(感谢Nicolas指出我正确的方向):
归功于Calling function inside jQuery document ready
...
declare let window:any;
...
export class myComponent implements OnInit {
...
ngOnInit() {
$('#calendar').fullCalendar({
eventClick: function(event, jsEvent, view) {
window.myFunc(event);
/* ... */
};
eventResizeStart: function( event, jsEvent, ui, view ) {
window.myFunc(event);
/* ... */
};
eventDargStart: function( event, jsEvent, ui, view ) {
window.myFunc(event);
/* ... */
};
}
}
$(function(){
window.myFunc= function myFunc(event) {
console.log(event);
}
}
}
答案 1 :(得分:0)
您可以简单地将它放在课堂上。您还可以使用变量self
来访问它。
/* ... */
private self: Class;
public Class(
/*...*/
) {
this.self = this;
}
ngOnInit() {
$('#calendar').fullCalendar({
eventClick: function(event, jsEvent, view) {
self.mySelectThisEvent(event);
/* ... */
};
eventResizeStart: function( event, jsEvent, ui, view ) {
self.mySelectThisEvent(event);
/* ... */
};
eventDargStart: function( event, jsEvent, ui, view ) {
self.mySelectThisEvent(event);
/* ... */
};
}
private mySelectThisEvent(event) : void {
/* ... */
}
}
这里我假设你正在使用Typescript。但是同样的想法可以在Javascript中使用