CODEWITHSUNDEEP
javascriptfunctionfullcalendar
karlmnz
karlmnz

Reputation: 138

How to define own functions to call from fullcalendar events

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.

Upvotes: 1

Views: 2425

Answers (2)

karlmnz
karlmnz

Reputation: 138

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

Upvotes: 1

Nicolas
Nicolas

Reputation: 8650

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

Upvotes: 0

Related Questions