Блог

Я не могу отобразить события в полном календаре, я использую 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>
  

У вас есть какие-либо подсказки, почему я могу видеть событие в календаре?

Я ценю любую помощь

Спасибо,

У меня была такая же проблема. Я поместил calendaroptions в, вы можете проверить этот репозиторий (Vue-vuex)https://github.com/fullcalendar/fullcalendar-example-projects