如何定义自己的函数来从fullcalendar事件调用

时间:2018-03-26 03:28:08

标签: javascript function fullcalendar

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

2 个答案:

答案 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中使用