antoniandre / vue-cal

A Vue.js full calendar, no dependency, no BS. :metal:
https://antoniandre.github.io/vue-cal/
MIT License
1.23k stars 235 forks source link

on-event-create triggers event-change #453

Open primoashbee opened 2 years ago

primoashbee commented 2 years ago

I'm using drag and drop for creating event.

Then after dropping from external source. It emits the event-change method.

            <vue-cal
                ref="vueCal" 
                small
                :time-step="30"
                :editable-events="{ title: false, drag: true, resize: false, delete: true, create: false }"
                @event-drop="onEventDrop"
                :on-event-create="onEventCreate"
                class="vuecal--full-height-delete"
                :events="eventList"
                @event-delete="onEventDelete"
                @event-change="onEventChange"
                :snap-to-time="30"
            >
            </vue-cal>

The methods

        onEventCreate (event, deleteEventFunction) {
            this.delete_event_function = deleteEventFunction
            const data  = {
                layout_key : event.layout_key,
                event: event,
                start: {...event}.start,
                end: {...event}.end,
            }
            this.for_scheduling.push(data)
            return event
        },

        async onEventChange(event){
            // console.log(event.event.originalEvent_eid)
            // return;
            const key = event.event.schedule_key;
            // console.log(event.originalEvent._eid, this.$refs.vueCal.view.events)
            // return;
            const item = this.$refs.vueCal.view.events.find(e => e._eid === event.originalEvent._eid);
            item.class="updating"
            const data  = {
                schedule_key : key,
                event: event.event,
                start: {...event.event}.start,
                end: {...event.event}.end,
            }

            await axios.put(`/cms/schedule/update/${key}`, data)
            this.$toast.success(`${event.event.title} succesfully updated`);                
            item.class="saved"

        },