I am utilizing the fullcalendar.io vue extension.
I would like to customize event rendering in order to add actions, but the event callback only contains JavaScript elements.
Is there a way to inject a vue component into it?
<FullCalendar
ref="fullCalendar"
defaultView="dayGridMonth"
:firstDay="1"
:editable="true"
:draggable="true"
:timeZone="'UTC'"
:header="false"
:events="events"
:plugins="plugins"
@eventRender="eventRender"
/>
JavaScript
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';
export default {
components: {
FullCalendar
},
data () {
return {
loader: false,
calendar: null,
plugins: [
dayGridPlugin, interactionPlugin
],
events: [
{"id":1,"start":"2019-11-25","end":"2019-11-27"},
{"id":2,"start":"2019-11-23","end":"2019-11-26"},
{"id":3,"start":"2019-11-22","end":"2019-11-25"},
{"id":4,"start":"2019-11-21","end":"2019-11-24"}
]
}
},
mounted() {
this.calendar = this.$refs.fullCalendar.getApi();
},
methods:{
eventRender(info){
console.log(info);
},
}
}
As an example inside the eventRender function (here is a rough example of what's needed):
eventRender(info){
$(info.el).append('<component-name></component-name>');
}
Update:
Another solution involves using Vue.extend (Not sure if this is the correct approach, any suggestions?):
To add an external component:
<template>
<v-btn @click="click" :class="type">
<slot name="text"/>
</v-btn>
</template>
<script>
export default {
name: 'Button',
props: [
'type'
],
methods: {
click() {
this.$emit('click')
}
}
}
</script>
Import into the required component:
import Vue from "vue"
import Button from "./helpers/Button"
var ActionClass = Vue.extend(Button)
In the render function, utilize props and slot for the eventRender method:
eventRender(info){
let action = new ActionClass({
propsData: {
type: 'primary'
}
})
action.$slots.text = 'Click me!'
action.$mount()
action.$on('click', () => {
console.log(info);
});
info.el.appendChild(action.$el)
}