antoniandre / vue-cal-v4

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

on-event-create callback triggers at first click not when the mouse is released #586

Closed gilemon closed 2 months ago

gilemon commented 2 months ago

When using the following template code:

<vue-cal 
    class="vuecal--blue-theme"
    :time-from="8 * 60"
    :time-to="23 * 60"
    today-button
    :events="events"
    @cell-click="onDateSelected($event)"
    :on-event-click="onEventClick"
    :on-event-create="onEventCreate"
    :editable-events="{ title: false, drag: false, resize: true, delete: true, create: true }"
    :snapToTime = 30
  />
methods: {
  onEventCreate(event, deleteEventFunction) {
    console.log("newEvent:", event);
  }
}

The on-event-create callback is triggered at first click not when the mouse is released. As a result the end time is not correct. It's just adding 1 minute to the first time selected by the beginning of the drag an release.

Example console log for a selection from 2024-09-19T10:00:00 to 2024-09-19T11:00:00.00:

{
    "_eid": "184_6",
    "start": "2024-09-19T10:00:00.000Z",
    "startTimeMinutes": 720,
    "end": "2024-09-19T10:01:00.000Z",
    "endTimeMinutes": 721,
    "title": "New Event",
    "content": "",
    "background": false,
    "allDay": false,
    "segments": null,
    "repeat": null,
    "daysCount": 1,
    "deletable": true,
    "deleting": false,
    "titleEditable": true,
    "resizable": true,
    "resizing": false,
    "draggable": true,
    "dragging": false,
    "draggingStatic": false,
    "focused": false,
    "class": "custom-event",
    "split": null
}

This is happening with "vue-cal": "^4.9.0". Any idea why?

gilemon commented 2 months ago

Ok, I found in the doc:

Note that event-drag-create gets fired on mouseup of the drag-create, whereas onEventCreate gets called as soon as the event appears on screen, while dragging.

So I'm know using the event-drag-create which return an event with correct end Date.