The click method of a custom button has no access to the Vue instance about fullcalendar-vue HOT 4 CLOSED

Solved my own issue here. I had to use a fat arrow function, like so:

copyWeek:         {
    text: 'Copy week',
    click: () => this.$set(this, "copyDialogVisible", true)
}

Would be nice to have this in the documentation though :)

from fullcalendar-vue.

It's easy. You need something like this:

<template>
    <div>
        <full-calendar :custom-buttons="customButtons" :header="header" />
    </div>
</template>
 
<script>
    // ... stuff
    data() {
        return {
            header:                            {
                left:   'prev,next today',
                center: 'title',
                right:  'myLink' // this will place the button on the right hand side
            },
            customButtons: {
                myLink: {
                    text: "Take me to your leader",
                    click: () => this.$router.push({name: "yourLeader"}) // assuming you use Vue Router
                }
            }
        }
    }
    // ... more stuff
</script>

P.S. Next time please use SO for questions like these.

from fullcalendar-vue.

Ok and thanks techouse - will use SO ongoing. Ta

from fullcalendar-vue.

I'm trying to create a custom button on my Vue FullCalendar. I just want a button with a link.

Any chance you can give me a pointer.

Currently I have the following:

 <FullCalendar
      :customButtons="customButtons"
      :header="calHeader">

At that point I'm a bit lost at what to do. Something like this in my methods object? But it doesn't work as I know I'm not doing the methods right. Not sure how to format.

Any help appreciated and hope not de-railing original thread too much. Ta

customButtons: function() {
      return {
        custom1: {
          text: "Copy week",
          click: () => alert("clicked the custom button!")
        }
      };
    },
    calHeader() {
      return {
        left: "month,agendaWeek,agendaDay custom1",
        center: "title",
        right: "custom2 prevYear,prev,next,nextYear"
      };
    }

from fullcalendar-vue.