When using Full Calendar with VueJS, I ran into a problem where I needed to open a custom modal when clicking on a time slot in the calendar. The issue was that I couldn't call a function outside of the Full Calendar object to handle this. This is because using `this` inside Full Calendar would refer to that object rather than the Vue component object. I needed a way to access the Vue component object. Here are some unsuccessful attempts I made:
export default {
name: 'MyComponent',
methods: {
myFunc () {
// should get called from inside fullCalendar below
this.$store.dispatch() // this.$store works here since `this` refers to Vue component
}
},
mounted () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
navLinks: true,
eventLimit: true,
defaultView: 'agendaWeek',
editable: true,
selectable: true,
selectHelper: true,
select: function (start, end) {
console.log(this) // refers to Full Calendar object
console.log(this.$parent) // getting null, need to call function in vue component
console.log(this.myFunc()) // cannot do this since this will try to call a function in Full Calendar library
console.log(this.$parent.$store) // getting null, need to get store that I defined
}
}
}