CroudTech / vue-fullcalendar

FullCalendar Wrapper for vue
MIT License
483 stars 100 forks source link

Directly moving/dragging an event after creation gives TypeError #85

Open schober-ch opened 6 years ago

schober-ch commented 6 years ago

First, thanks for this component, it saved me some work to figure out how to use fullcalendar in vue!

The issue: When trying to move a newly created event after creation for the first time (can be 1 second or 10 seconds) it will give an error:

TypeError Cannot read property 'def' of undefined

(full traceback from the sandbox below)

As soon as you move another event or create an additional one, the initial event can be moved without any issues. This happens also in your example sandbox (https://codesandbox.io/s/5xlp873rkl). (To reproduce: First create a new event by click&drag and then immediately try to move it by dragging it somewhere else)

I quickly looked through the FullCalendar.vue-code but did not see anything obvious (but I'm quite new to VueJS).

In the web-example of fullcalendar.io (https://fullcalendar.io/js/fullcalendar-3.7.0/demos/selectable.html) this does not happen.

full error:

TypeError Cannot read property 'def' of undefined EventInstanceGroup.getEventDef https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:2107:64 Constraints.isEventInstanceGroupAllowed https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:8309:43 SubClass.InteractiveDateComponent.isEventInstanceGroupAllowed https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:3325:42 HitDragListener.hitOver https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:10696:47 HitDragListener.DragListener.trigger https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:5701:32 HitDragListener.handleHitOver https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:2207:14 HitDragListener.handleDragStart https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:2181:18 HitDragListener.DragListener.startDrag https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:5608:18 HitDragListener.DragListener.handleDistanceSurpassed https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:5667:18 HitDragListener.DragListener.handleMove https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:5622:22 HitDragListener.DragListener.handleMouseMove https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:5680:14 GlobalEmitter.proxy https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:496:14 GlobalEmitter.intercept https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:1298:28 GlobalEmitter.dispatch https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:5206:27 GlobalEmitter.elemData.handle https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:5014:28 Object.trigger https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:8201:12 jQuery.fn.init.triggerHandler https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:8275:24 GlobalEmitter.EmitterMixin.trigger https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:1320:17 GlobalEmitter.handleMouseMove https://5xlp873rkl.codesandbox.io/node_modules/fullcalendar/dist/fullcalendar.js:1829:18 HTMLDocument.proxy https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:496:14 HTMLDocument.dispatch https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:5206:27 HTMLDocument.elemData.handle https://5xlp873rkl.codesandbox.io/node_modules/jquery/dist/jquery.js:5014:28

schober-ch commented 6 years ago

...somehow the event does not seem to work with any click-event after creation: In my own code I delete an event using the "event-selected"-event, and this also does not work when clicked for the first time (second time does)

BrockReece commented 6 years ago

Hi @schober-ch,

Thanks for this, I will look into it, is there any chance that you could fork my codesandbox with a failing example?

schober-ch commented 6 years ago

I don't think this is possible - the error does not happen for events created via props/data in the code (just tested in a fork).

I can provoke the error in any sandbox by just two steps: Create a new event by click&drag in the week-view and then try to move the event.

I can't test any other browser atm (I'm on chromium), but at least it does also happen in an incognito window without any addons/extensions running.

BrockReece commented 6 years ago

Ah got you, thanks for trying. I will look into it shortly.

BrockReece commented 6 years ago

So digging around, it looks like that is a bug with fullcalendar

But the reason that their selectable demo is working is because it is creating a proper event after prompting for a title, whereas I think the select helper was tricking you into thinking it had created an event when you selected part of the calendar.

To do this, you should listen for the select event and add your logic for creating an event. To get you started I have replicated their logic in this sandbox

Hope that helps :)

schober-ch commented 6 years ago

Ah, interesting. So I assumed too much from their example - thank you for looking into it, I'll change my code. Do you think it would make sense to add an example to the vue-fullcalendar doc for this?

Anyway, its interesting that it works after the second click.