#laravel #vue.js #laravel-nova
#laravel #vue.js #laravel-nova
Вопрос:
Я не могу отобразить события в полном календаре, я использую vue и vuex для разработки компонента laravel nova с модальным окном, я уже пробовал многими способами, но безуспешно. Я надеюсь, что кто-нибудь может мне помочь.
мой магазин — это:
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,
},
});
})
мой Tool.vue — это
<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>
мой файл модального окна — это
<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>
У вас есть какие-либо подсказки, почему я могу видеть событие в календаре?
Я ценю любую помощь
Спасибо,
Ответ №1:
У меня была такая же проблема. Я поместил calendaroptions в, вы можете проверить этот репозиторий (Vue-vuex)https://github.com/fullcalendar/fullcalendar-example-projects