Fullcalendar does not display the events - laravel

Question

I cannot display the events in the fullcalendar, I am using vue and vuex to develop a laravel nova compoment with a modal window, I already try in some many ways but without success. I hope anyone can help me.
my store is this:
import Vuex from 'vuex';
Nova.booting((Vue, router, store) => {
Vue.component('fullcalendar', require('./components/Tool'))
Vue.use(Vuex);
Nova.store = new Vuex.Store({
state: {
event: [],
events: [],
},
mutations: {
SET_EVENT(state, event) {
state.event = event;
},
ADD_TO_EVENTS(state, event) {
state.events.push(event);
}
},
actions: {
setEvent(context, event) {
context.commit('SET_EVENT', event);
},
addToEvents(context, event) {
context.commit('ADD_TO_EVENTS', event);
},
},
getters: {
event: state => state.event,
events: state => state.events,
},
});
})
my Tool.vue is this
<template>
<div>
event {{ events }}
<FullCalendar ref="fullcalendar" :options="calendarOptions"/>
<modal :show="showModal" #close="showModal = false"></modal>
<button id="show-modal" #click="showModal = true"></button>
</div>
</template>
<script>
import FullCalendar from '#fullcalendar/vue';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listGridPlugin from '#fullcalendar/list';
import interactionPlugin from '#fullcalendar/interaction';
import modal from './Modal.vue';
export default {
props: ['resourceName', 'resourceId', 'panel'],
components: {
modal,
FullCalendar, // make the <FullCalendar> tag available
},
data() {
return {
showModal: false,
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, listGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
events: this.events,
editable: true,
select: this.handleDateClick,
eventClick: this.handleEventClick,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'Agenda'
},
headerToolbar : {
end: 'prevYear,prev today next,nextYear',
center: 'title',
start: 'dayGridMonth,timeGridWeek,timeGridDay listMonth',
},
stickyHeaderDates: true,
aspectRatio: 2.4,
navLinks: true,
selectable: true,
nowIndicator: true,
dayMaxEventRows: true,
dayMaxEvents: 10,
moreLinkClick: 'popover',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
startTime: '8:00',
endTime: '18:00',
}
}
}
},
mounted() {
this.showModal = false;
},
computed: {
events: () => {
return Nova.store.getters.events;
},
},
methods: {
handleDateClick(arg) {
const event = {
title:'something',
start: moment(arg.start).format('YYYY-MM-DD'),
end: moment(arg.end).format('YYYY-MM-DD'),
allDay: true,
};
Nova.store.dispatch('setEvent', event);
this.showModal = true;
},
handleEventClick(event) {
this.showModal = true;
},
},
}
</script>
my modal window file is this
<template>
<div>
event {{ events }}
<FullCalendar ref="fullcalendar" :options="calendarOptions"/>
<modal :show="showModal" #close="showModal = false"></modal>
<button id="show-modal" #click="showModal = true"></button>
</div>
</template>
<script>
import FullCalendar from '#fullcalendar/vue';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listGridPlugin from '#fullcalendar/list';
import interactionPlugin from '#fullcalendar/interaction';
import modal from './Modal.vue';
export default {
props: ['resourceName', 'resourceId', 'panel'],
components: {
modal,
FullCalendar, // make the <FullCalendar> tag available
},
data() {
return {
showModal: false,
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, listGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
events: this.events,
editable: true,
select: this.handleDateClick,
eventClick: this.handleEventClick,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'Agenda'
},
headerToolbar : {
end: 'prevYear,prev today next,nextYear',
center: 'title',
start: 'dayGridMonth,timeGridWeek,timeGridDay listMonth',
},
stickyHeaderDates: true,
aspectRatio: 2.4,
navLinks: true,
selectable: true,
nowIndicator: true,
dayMaxEventRows: true,
dayMaxEvents: 10,
moreLinkClick: 'popover',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
startTime: '8:00',
endTime: '18:00',
}
}
}
},
mounted() {
this.showModal = false;
},
computed: {
events: () => {
return Nova.store.getters.events;
},
},
methods: {
handleDateClick(arg) {
const event = {
title:'something',
start: moment(arg.start).format('YYYY-MM-DD'),
end: moment(arg.end).format('YYYY-MM-DD'),
allDay: true,
};
Nova.store.dispatch('setEvent', event);
this.showModal = true;
},
handleEventClick(event) {
this.showModal = true;
},
},
}
</script>
Do you have any clue why I can see the event in the calendar?
I appreciate any help
Thks,

Answer 1

I had the same problem.
I put the calendaroptions in computed
you can check this repository (Vue-vuex)
https://github.com/fullcalendar/fullcalendar-example-projects