Naveen Naveen - 7 months ago 129
jQuery Question

angular 2 how to use fullcalendar

im using fullcalendar in angular2 ,Onclick of slot, the call is going to callback function in CalendarOptions. select: callback function is calling but when i try to call angular2 function from inside select: there to make service (this.calenserService.save()) calls it throwing error :Cannot save property 'save' of undefined
Basically im not able to use angular2 component objects/methods inside callback functions like select: & eventClick:

calender.html

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>


calender.component.ts

calendarOptions = {
header:
{
left: '',
center: 'title',
right: 'month,agendaWeek,agendaDay,today, prev,next '
},

slotDuration:'00:20:00',
defaultDate: new Date(),
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
select: function(start, end, allDay)
{
let event:Event=new Event();
event.id='785';
event.selectable=true;
event.start=start;
event.title="Test";
event.end=end;
**this.calenderService.save(event) // This is Angular2 component object not able to access from here**
},
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
this.callFun() //**This is Angular 2 component function Not able to access**
},
events:this.events //this.events is Angular2 class object
};

Answer Source

Use arrow function to retain this

eventClick: (calEvent, jsEvent, view) => {
    alert('Event: ' + calEvent.title);
    this.callFun();
},

...
select: (start, end, allDay) => {
...

See also