Fullcalendar不显示事件

问题描述

我无法在日历中显示事件，我正在使用vue和vuex开发具有模态窗口的laravel nova compoment，我已经尝试了许多方法但没有成功。我希望有人能帮助我。

我的商店是这里：

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',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',}
</script>

您是否知道为什么我可以在日历中看到该活动？

感谢您的帮助

Thinks

解决方法

我有同样的问题。 我把calendaroptions放在计算 您可以检查此存储库（Vue-vuex） https://github.com/fullcalendar/fullcalendar-example-projects