I am trying to add Full Calendar to my Nuxt project. Here is my code.
<template>
<div>
<!-- {{calendarOptions}} -->
<FullCalendar :options="calendarOptions" />
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
export default {
components: {
FullCalendar, // make the <FullCalendar> tag available
},
data() {
return {
allevents: [{ title: 'Event 2', start: '2021-01-04', end: '2021-01-07' },
{ title: 'Event 3', start: '2021-01-05', end: '2021-01-09' }],
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
nowIndicator: true,
events: [
{ title: 'Event 1', start: '2021-01-01', end: '2021-01-03' },
],
},
}
},
}
</script>
I want to add data in allevents array to events array inside calenderOptions object. Can anyone please tell me how I can do this?
Create a method to push data from your allevents
array to the calendarOptions.events
array.
methods: {
doTheThing() {
this.allevents.forEach(event => {
this.calendarOptions.events.push(event)
}
}
}