Drop event outside of calendar / between calendars

Originally reported on Google Code with ID 550

Hi,

I would like to drag the events from the calendar back to the Draggable Events list.
I couldn't find anywhere on how to do that. Is it possible you add this enhancement?


Thanks.
Shen.

Reported by [e-mail] on 2010-07-08 20:44:57

Imported with 49 stars.

[empty-back]

Hello,Has the problem been solved?I want drag delete event with 3.10.0,How to do that?Thanks!

[em1le]

Hi there, i encountered that problematic recently. I had to drag events from fullcalendar (angular) to a side menu with 3 divs representing different action (remove, replacement and cancel).

The workaround uses dragstop event to catch event.jsEvent.clientX and event.jsEvent.clientY. From then, one could use document.elementFromPoint(x, y) to get the targeted element and element.closest('.some-class-or-#some-id) to retrieve the exact element one want.

export class MyComponent implements OnInit {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;
  calendarApi: Calendar;

  ...
  actionOnDragStop (e) {
    let x = e.jsEvent.clientX;
    let y = e.jsEvent.clientY;

    let element = document.elementFromPoint(x, y);
    let actionDivElement = element.closest('.action-div');

    if (element.id !== null) {
      if (element.id === 'removal') {
        let curEvent = this.calendarApi.getEventById(e.event.id);
        curEvent.remove();
      }  
    }
  }
  ...
}

This may be not suitable for every use cases and is not very solid triggered on dragstop instead of a proper drop.

I hope it can help.