如何定义自己的函数以从完整日历事件中调用答案

【问题标题】：How to define own functions to call from fullcalendar events如何定义自己的函数以从完整日历事件中调用
【发布时间】：2018-09-04 03:04:59
【问题描述】：

我正在使用 angular5 和 fullcalendar.io 并希望有这样的代码，其中 mySelectEvent(event) 是我定义的可重用函数，它将操纵 fullcalendar 并且可以从多个 fullcalendar 回调事件中调用。

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 回调事件中调用它。

【问题讨论】：

标签： javascript function fullcalendar

【解决方案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);
    }
  }
}

【讨论】：

这是个好主意。但是，强烈建议不要将 JQuery 与任何 Angular 框架一起使用。你可以阅读为什么here
谢谢尼古拉斯。我认为我使用这种方法很好，因为我使用的 jquery 部分只做两件事，操作 fullcalendar 状态并将 fullcalender 回调事件数据和控制从 javascript/jquery 传递到 angular，所有 angular DOM 操作都是从 angular 处理的函数，但角度函数也有这样的好处，那就是能够操纵全日历。

【解决方案2】：

你可以简单地把它放在课堂上。您还可以使用变量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

【讨论】：

我正在使用 Angular cli 组件，我无法让它工作，我有 this.self = this;在导出类 myComponent 的 constructor() 中。（如果我把它放在一个公共的 myComponent() 函数中并没有什么不同。）然后我和你一样期望我的日历是在 onInit 之外配置的，因为我需要等待一个 observable 直接在 init 之后返回.我收到错误“无法读取未定义的属性 'mySelectThisEvent'”。我在语法上苦苦挣扎，不管我使用 self.mySelectThisEvent() 还是 this.self.mySelectThisEvent()，同样的错误。
实际上用 self.mySelectThisEvent() 给出错误 'TypeError: self.mySelectThisEvent is not a function'
也许你可以在 observable 返回时尝试定义一个名为 self 的局部变量。与我们在构造函数中所做的相同。
您可以使用this question 了解如何在回调中访问this 变量
得到这个工作。我有角度 doSomething() 功能。然后在我的角度initCalendar()函数中首先let self = this;然后调用$('#cal').fullCalendar({ select: function(...) { self.doSomething(); } });