I want to catch the moment the data of fullcalendar is added

Question

I succeeded in putting data into fullcalendar. So I tried to put the api at the point where data is added, but I can't catch this moment....

Chat gpt tells me to put an api in handleDrop, but no console is displayed when dragging and dropping table data.

The weird spot is that when I draggable="true" and any other letter or element I don't specify @drop="handleDrop" the console fires. Conflict with initializeDraggable?.

There seems to be a lot of unnecessary parts in my code, but I don't know where to modify to send api the moment it is added to the calendar.

 <template>
  <div class="bom">
    <div class="bomTable-processList">
      <div>
        <table>
          <thead>
            <tr>
              <th colspan="6">BOM 관리</th>
            </tr>
            
            <tr v-if="bomDatas.length > 0">
              <th colspan="3">미완 <input type="radio" id="done" value="Undone" aria-label="Undone" name="bom" v-model="bomDatas[0].state" /></th>
              <th colspan="3">작성중 <input type="radio" id="editting" value="Editting" aria-label="Editting" name="bom" v-model="bomDatas[0].state" /></th>
              <th colspan="3">작성완료 <input type="radio" id="done" value="Done" aria-label="Done" name="bom" v-model="bomDatas[0].state" /></th>
              <th colspan=""><button>완료</button></th>
            </tr>
          </thead>
          <tbody id="external-events">
            <tr
              class="fc-event"
              v-for="(bomData, index) in getBomData"
              :key="index"
              draggable="true"
              @drop="handleDrop"
              @dragstart="handleDragStart($event, bomData)"
            >
              <td v-for="(process, pIndex) in bomData.process" :key="pIndex">{{ process }}</td>
              <td>{{ bomData.process_order }}</td>
              <td class="minusBtn">
                <button @click="deleteBom(bomDatas[index])">-</button>
              </td>
              <td class="upBtn">
                <button @click="moveRowUp(bomData, index)">▲</button>
              </td>
              <td class="downBtn">
                <button @click="moveRowDown(bomData, index)">▼</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <processList />
    </div>
    <equipmentList />
    <div class="full">
      <div id="external-events"></div>
      <div id="calendar-container" @dragover="handleDragOver">
        <FullCalendar
          class="demo-app-calendar"
          ref="fullCalendar"
          :options="calendarOptions"
          :editable="true"
          :events="calendarEvents"
          @eventClick="handleEventClick"
        />
      </div>
    </div>
  </div>
</template>

<script lang="js">
import processList from '@/components/detail/processList.vue'
import equipmentList from '@/components/detail/equipmentList.vue'

import { mapGetters } from 'vuex'

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin, { Draggable } from '@fullcalendar/interaction'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

export default {
  components: {
    FullCalendar,
    processList,
    equipmentList,
  },
  data() {
    return {
      draggedData: null,
      calendarOptions: {
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        plugins: [dayGridPlugin, interactionPlugin, resourceTimelinePlugin],
        initialView: 'dayGrid1',
        slotDuration: '24:00:00',
        resources: [],
        events: [],
        height: 600,
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGrid1,dayGrid2',
        },
        views: {
          dayGrid1: {
            type: 'resourceTimelineDay',
            duration: { days: 30 },
            buttonText: '15',
          },
          dayGrid2: {
            type: 'resourceTimelineDay',
            duration: { days: 60 },
            buttonText: '30',
          },
        },
        dayHeaderFormat: {
          weekday: 'short',
          month: 'numeric',
          day: 'numeric',
          omitCommas: true,
        },
        editable: true,
        droppable: true,
        eventResizableFromStart: true,
        eventDidMount: this.handleEventMount,
      },
      removeAfterDrop: false,
      calendarEvents: [],
    }
  },
  watch: {
    facilityDatas: {
      deep: true,
      handler() {
        this.calendarOptions.resources = this.facilityDatas.map((facility, index) => ({
          id: index.toString(),
          title: facility.facility_name,
        }))
      },
    },
  },
  updated() {
    this.$nextTick(function () {
      this.initializeDraggable();
    });
  },
  computed: {
    ...mapGetters(['getBomData', 'getProductUnitData', 'getFacilityData', 'getProductAmount', 'processDataNull']),
    facilityDatas: {
      get() {
        return this.getFacilityData
      },
      set(value) {
        const updatedValue = value.map((item) => ({
          ...item,
        }))
        this.$store.commit('setFacilityData', updatedValue)
      },
    },
    bomDatas: {
      get() {
        return this.$store.getters.getBomData;
      },
      set(value) {
        const updatedValue = value.map((item) => ({
          ...item,
        }))
        this.$store.commit('setBomData', updatedValue)
      },
    },
    productUnit() {
      return this.getProductUnitData
    },
    processDataIsNull() {
      return this.$store.getters.processDataNull;
    },
  },
  async mounted() {
    const payload = {
      product_unit: this.productUnit,
    }
    await this.$store.dispatch('getBom', payload)
    this.bomDatas = this.getBomData ? [...this.getBomData] : []

    this.calendarOptions.resources = this.facilityDatas.map((facility, index) => ({
      id: index.toString(),
      title: facility.facility_name,
    }))

    this.fullCalendar = this.$refs.fullCalendar.$refs.calendar
  },
  methods: {
    async moveRowUp(bomData, index) {
      if (index > 0) {
        [this.bomDatas[index], this.bomDatas[index - 1]] = [
          this.bomDatas[index - 1],
          this.bomDatas[index],
        ];
        this.bomDatas.forEach((data, i) => {
          data.process_order = i + 1;
        });
        await this.updateBomData();
      }
    },

    async moveRowDown(bomData, index) {
      if (index < this.bomDatas.length - 1) {
        [this.bomDatas[index], this.bomDatas[index + 1]] = [
          this.bomDatas[index + 1],
          this.bomDatas[index],
        ];
        this.bomDatas.forEach((data, i) => {
          data.process_order = i + 1;
        });
        await this.updateBomData();
      }
    },

    async updateBomData() {
      const payload = {
        product_unit: this.productUnit,
        process_names: this.bomDatas.map((data) => data.process),
      }
      await this.$store.dispatch('putBom', payload);
    },

    async deleteBom(bomData) {
      console.log(bomData)
      if (window.confirm('정말로 삭제하시겠습니까?')) {
        await this.$store.dispatch('deleteBom', {
          product_unit: bomData.product_unit,
          process_order: bomData.process_order,
          productAmount: this.getProductAmount,
        });
        const payload = {
          product_unit: this.productUnit,
        }
        await this.$store.dispatch('getBom', payload)
      }
    },
    handleEventClick(info) {
      if (confirm('삭제하시겠습니까?')) {
        info.event.remove()
        const index = this.calendarEvents.findIndex((event) => event.id === info.event.id)
        if (index !== -1) {
          this.calendarEvents.splice(index, 1)
        }
      }
    },
    handleEventMount(info) {
      const eventEl = info.el
      eventEl.addEventListener('dblclick', () => {
        this.handleEventClick(info)
      })
    },

    handleDragStart(event, bomData) {
      console.log('handleDragStart')

      if (bomData) {
        this.draggedData = {
          product_unit: bomData.product_unit,
          process_name: bomData.process,
          productAmount: this.getProductAmount,
        }
      } else {
        console.error('bomData is undefined or null')
      }
    },

    async handleDrop(event) {
      console.log('handleDrop')

      const dragData = this.draggedData
      this.draggedData = null

      if (dragData) {
        console.log('drop')

        const dateClickedArg = {
          date: this.fullCalendar.getApi().getDate(),
          allDay: true,
        }

        const facilityName = event.currentTarget.dataset.resourceId;

        const newEvent = {
          title: `${dragData.product_unit} - ${dragData.process} - ${this.getProductAmount}`,
          start: dateClickedArg.date,
          allDay: dateClickedArg.allDay,
        }

        this.calendarEvents.push(newEvent)

        if (this.removeAfterDrop) {
          const index = this.bomDatas.findIndex((data) => data === dragData)
          if (index !== -1) {
            this.bomDatas.splice(index, 1)
          }
        }
        const payload = {
          title: `${dragData.product_unit} - ${dragData.process} - ${this.getProductAmount}`,
          start: dateClickedArg.date,
          end_date: dateClickedArg.date,
          facility_name: facilityName,
        }
        console.log(facilityName)
        await this.$store.dispatch('postBom', payload)
      }
    },
    initializeDraggable() {
      console.log('initializeDraggable')

      const containerEl = document.getElementById('external-events')
      if (containerEl) {
        const eventElements = containerEl.getElementsByClassName('fc-event')
        Array.from(eventElements).forEach((eventEl, index) => {
          if (eventEl.classList.contains('draggable-initialized')) {
            return;
          }
          let draggableInstance = null;

          const createDraggable = () => {
            if (draggableInstance) {
              draggableInstance.destroy();
            }

            draggableInstance = new Draggable(eventEl, {
              eventData: () => {
                const bomData = this.bomDatas[index]
                return {
                  title: `${bomData.product_unit} - ${bomData.process} -${this.getProductAmount}`,
                }
              },
            });

            eventEl.addEventListener('dragstart', (event) => {
              const bomData = this.bomDatas[index]
              const dragData = {
                product_unit: bomData.product_unit,
                process_name: bomData.process_name,
                productAmount: this.getProductAmount,
              }
              event.dataTransfer.setData('text', JSON.stringify(bomData))
              this.draggedData = dragData
            });

            eventEl.removeEventListener('dragstart', createDraggable);
            eventEl.removeEventListener('mouseover', createDraggable);
          };

          createDraggable();

          eventEl.addEventListener('mouseover', () => {
            createDraggable();
          });
          eventEl.classList.add('draggable-initialized');
        });

        const calendarContainerEl = document.getElementById('calendar-container')
        if (calendarContainerEl) {
          calendarContainerEl.addEventListener('drop', this.handleDrop)
          calendarContainerEl.addEventListener('dragover', this.handleDragOver)
        }
      }
    },
    handleDragOver(event) {
      console.log('handleDragOver')

      event.preventDefault()
    },
  },
}
</script>

Answer 1

      @drop="drop"
      @eventDrop="eventDrop"

I solved it using these two.