vue-cal icon indicating copy to clipboard operation
vue-cal copied to clipboard

editable events crossing days are not draggable, resizing them causes ui bugs

Open Spacarar opened this issue 3 years ago • 1 comments

I am using the calendar using the "week" view with editable events set to { title: true, drag: true, resize: true, delete: false, create: true } and I noticed that if an event crosses midnight it becomes immobile.

here is a sample event body that I copied

{
    "_eid": "25608_4",
    "start": "2021-07-30T04:14:00.000Z",
    "startTimeMinutes": 1334,
    "end": "2021-07-30T12:15:00.000Z",
    "endTimeMinutes": 375,
    "title": "",
    "content": "",
    "background": false,
    "allDay": false,
    "daysCount": 2
}

Further to this, if you resize the event so that it doesn't cross midnight anymore, the whole event gets misplaced outside of the calendar as shown below:

  • load calendar: correctly rendered (bottom of calendar shown) Screen Shot 2021-07-28 at 4 20 25 PM

  • load calendar: correctly rendered (top of calendar shown) Screen Shot 2021-07-28 at 4 20 31 PM

  • resize event to no longer pass midnight and it jumps off the calendar Screen Shot 2021-07-28 at 4 20 45 PM

Spacarar avatar Jul 28 '21 23:07 Spacarar

Forked a codepen from the documentation that reproduces this bug here: https://codepen.io/Wolfwood_/pen/oNWJRGx

This is the same codepen from #425 and will demonstrate both of these 2 issues.

Spacarar avatar Aug 10 '21 18:08 Spacarar

Hi @Spacarar,

Indeed drag and drop does not support multiple day events as written in the documentation.

image

Also if you want to resize multiple day events horizontally, you need to add the resize-x (x axis) option.

antoniandre avatar Aug 21 '22 09:08 antoniandre