CODEWITHSUNDEEP
vue.jsfullcalendarstatevuex
Someuser
Someuser

Reputation: 19

Fullcalendar and Vuex

After fullcalendar updated their props to go outside of the <FullCalendar /> element I have some problems rendering events. I know that the state request is fulfilled in Vuex because I've tested this so many this without a getter and with a getter and nothing seems to work...

<template>
<v-container>
            <FullCalendar :options="calendarOptions" />

            <li v-for="event in events" :key="event.id"> 
                {{event.name + ' ' + event.start}}
            </li>
</v-container>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'

import { mapState, mapActions, mapGetters } from 'vuex'


export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [timeGridPlugin, listPlugin ,dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        selectable: true,
        events: this.allEvents,
      }
    }
  },
   computed: {
        ...mapState({
            events: state => state.calendar.events
        }),
        ...mapGetters('calendar', ['allEvents']),
    },
    created () {
      this.getAll();
    },
    methods: {
        ...mapActions('calendar', {
            getAll: 'getAll',
        }),
    }
}
</script>

Is there any way to render the elements with just the state? I thought that setting events to this.events would be working, but I'm probably way off here. I'm new to Vue and Vuex so help is much appreciated! :) The list is just to know that the state is working as it should be.

Upvotes: 0

Views: 671

Answers (1)

S.Visser
S.Visser

Reputation: 4725

You can still bind the events in template by doing something like this:

    <FullCalendar :options="{
      ...calendarOptions,
      events: events
    }" />

Upvotes: 4

Related Questions