CODEWITHSUNDEEP
javascriptangulartypescriptfullcalendar
user122222
user122222

Reputation: 2439

Call function from customButton fullcalendar

I have added a custom button to my fullcalendar: 

ngOnInit() {
this.calendarOptions = {
  customButtons: {
    custom1: {
      text: 'Add event',
      click() {
        this.openModal();
     }
    }
  },
  height: 600,
  editable: true,
  eventLimit: false,
  locale: 'lt',
  header: {
    left: 'prev,next today, custom1,custom2',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listMonth'
  },
  events: ''
};}

and on the button click I want to call function:

    openModal() {
console.log('opened');
// '<app-add-event></app-add-event>';}

however, I get error zone.js:199 Uncaught TypeError: this.openModal is not a function at HTMLButtonElement.click (events-calendar.component.ts:20)

I do not know what's wrong. How do you call custom function?

I also tried: 

 this.calendarOptions = {
  customButtons: {
    custom1: {
      text: 'Pridėti įvykį',
      click:
        this.openModal
    }
  }, ...   };

In this case console.log(); work but I still get the following error after that. What is wrong here?

Should I declare this function somewhere here?

<ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
          (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>

Upvotes: 2

Views: 3280

Answers (2)

Nevada
Nevada

Reputation: 173

Use a fat arrow function, like so:

this.calendarOptions = {
  customButtons: {
    custom1: {
      text: 'Add event',
      click: () => this.openModal()
    }
  }
}

Upvotes: 0

Gr&#233;gory Elhaimer
Gr&#233;gory Elhaimer

Reputation: 2801

From the fullcalendar documentation:

  customButtons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  }

You can see that there is an issue in your custom button declaration for the click() property.

I'm suprised you still have the error referencing this.openModal. Since you stated you tried click: this.openModal, I would suggest you to give a shot to click : () => console.log('clicked'). If it works, the problem might come from usage of this.

Upvotes: 3

Related Questions