How to define own functions to call from fullcalendar events

Question

I'm using angular5 and fullcalendar.io and want to have code like this, where mySelectEvent(event) is a reusable function I have defined which will manipulate the fullcalendar and can be called from multiple fullcalendar callback events.

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
    }
}

I have my full calendar working and doing all sorts of stuff so just asking where to put a funciton definition and how to call it from the fullcalendar callback events.

score 1 · Answer 1 · answered Mar 26 '18 at 20:47

1

Yes in Typescript, this how I resolved it (thanks Nicolas for pointing me in the right direction):

Credit to 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);
    }
  }
}

answered Mar 26 '18 at 20:47

karlmnz

138
10

This was good thinking. however, it is very recommended not to use JQuery with any Angular Framework. You can read why [here](https://stackoverflow.com/questions/30007792/should-we-use-jquery-with-angularjs?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – Nicolas Mar 26 '18 at 22:21
Thanks Nicolas. I think I am good though with this approach as the jquery parts I am using are only to do two things, manipulate the fullcalendar state and pass fullcalender callback event data and control from javascript/jquery to angular, all angular DOM manipulation is handled from angular functions, but angular functions also have the bonus of then being able to manipulate fullcalendar too. – karlmnz Mar 27 '18 at 10:19

score 0 · Accepted Answer · answered Mar 26 '18 at 03:33

0

You can simply place it in the class. You can also use a variable self to access it.

/* ... */

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 {
     /* ... */
    }
}

Here i'm assuming you are using Typescript. But the same idea would work in Javascript

answered Mar 26 '18 at 03:33

Nicolas

8,077
4
21
51

I am using angulal cli component, I wasn't able to get this to work, I have the this.self = this; in the constructor() of a export class myComponent. (Doesn't make a difference if I put it in a public myComponent() function.) I then have same as yours expect my calendar is configured outside the onInit as I need to wait of an observable to return which is straight after the init. I'm get error 'Cannot read property 'mySelectThisEvent' of undefined'. I am struggling with the syntax, doesn;t matter if I use self.mySelectThisEvent() or this.self.mySelectThisEvent(), same error. – karlmnz Mar 26 '18 at 20:16
Actually with self.mySelectThisEvent() gives error 'TypeError: self.mySelectThisEvent is not a function' – karlmnz Mar 26 '18 at 20:24
maybe you can try to define a local variable named `self` when the observable comes back. same way we did in the constructor. – Nicolas Mar 26 '18 at 22:18
you can use [this question](https://stackoverflow.com/questions/40353503/how-to-access-this-inside-a-callback-function-in-typescript?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) to understand how to access the `this` variable inside a callback – Nicolas Mar 26 '18 at 22:20
Got this working. I have angular `doSomething()` funciton. Then in my angular `initCalendar()` function first `let self = this;` then call `$('#cal').fullCalendar({ select: function(...) { self.doSomething(); } });` – karlmnz Mar 27 '18 at 11:16

How to define own functions to call from fullcalendar events

2 Answers2