firebasevue.jsfullcalendarnuxt.jsfullcalendar-scheduler

How to add data stored in one variable to another data field inside data return in Nuxt?


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?


Solution

  • 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)
        }
      }
    }