External Drag and Drop

[doug-benn]

Hello,

Firstly great work! Docs are great so thank you.

Would it be possible todo an external drag and drop into the calendar? E.g. a List of unscheduled events on the right of the calender then drag them in to schedual them? A working example I've found - https://demo.mobiscroll.com/javascript/eventcalendar/external-drag-drop#

I'll be honest I'm new to svelte and I'd like to use this calender for a firsrt learning project so thank you in advance.

• Doug

[vkurko]

Hi @doug-benn

Thanks for your interest in the Event Calendar!

Would it be possible todo an external drag and drop into the calendar?

Well, this was not part of my plans to improve the calendar. I need to figure out how complex the implementation might be. But if someone has a desire to write code and make a pull request, this is only welcome 😄

[doug-benn]

Hello,

Unfortunatly I wouldn't know where to start adding something like that. But I guess just being able to make other dragable items dropable over the calenders is a good start? Would that be possible?

• Doug

[vkurko]

Focusing on FullCalendar, it seems to me that the task is not trivial. Much will have to be done.

I will try to implement the basic functionality if more people ask for it in this ticket. Or when I have enough free time 😄

In any case, thanks for pointing out what could be improved in the calendar.

[amcanlubo]

• 1
  External Drag and Drop will be a very great addition.

[AdrianGzzEsc]

For people trying to do this I was able to replicate a similar behavior by having an array of pending events as buttons. When user click on the button a "pendingEvent" variable will get the event object and then on calendar dateClick the event will be added. That will import the event into the calendar which then can be move around normally.

dateClick: function (dateClickInfo) { if (pendingEvent != null) { ec.addEvent({ start: dateClickInfo.dateStr.split('T')[0] + " 07:30", end: dateClickInfo.dateStr.split('T')[0] + " 17:30", title: pendingEvent.title, color: "#FE6B64", }) pendingEvent = null } }

[cmjoseph07]

A drag and drop function such as full cals would be amazing! I think that is the only thing I really wish could be added.

[tclass]

yep have the same problem. This library is awesome, it looks good and has good features, unfortunately I also would need to drop external events into it. Does anyone know how to build that?

[cmjoseph07]

@tclass
I was able to do this recently using the library neodrag, on dragEnd I check if there is calendarInstance.dateFromPoint(x,y) has a date. If null I bounce it back to start position, if so and no event is currently on that time I make that node disappear and use the addEvent feature. My events have a constant time duration so that would need to be added if your events have difference durations.

[cmjoseph07]

@vkurko

I would like to start contributing in some manner, can you advise me of a place you need/want help in or something that is popular with the community that I can look into?

[vkurko]

Well, you can take on any issue with the enhancement tag from the list. I would start with some simple ones. For example, #141, #156 or #159 seems to be simple (but it only seems 😄 ).

[cmjoseph07]

Sounds good, I will take a look this weekend at these!

[kachnitel]

Based on #61 I have put together a workaround, that is pretty close. It's not a real drag&drop, as it initiates the drag on click and completes on another, and it's not quite finished, but works for the most part:

  initClickToDragUnscheduled = () => {
    this.unassignedTaskListTarget.querySelectorAll('.draggableHandle').forEach((handle) => {
      handle.addEventListener('click', (e) => {
        e.preventDefault();

        const task = e.target.closest('.draggable');

        this.draggingEventId = task.dataset.taskId;

        const initialStyle = {
          position: task.style.position,
          zIndex: task.style.zIndex,
          pointerEvents: task.style.pointerEvents,
          left: task.style.left,
          top: task.style.top
        }

        task.style.position = 'absolute';
        task.style.pointerEvents = 'none';
        task.style.zIndex = 10;

        const initialPositionInPage = {
          x: e.pageX - e.offsetX - task.offsetLeft,
          y: e.pageY - e.offsetY - task.offsetTop
        };

        function moveAt(pageX, pageY) {
          task.style.left = pageX - initialPositionInPage.x + 'px';
          task.style.top = pageY - initialPositionInPage.y + 'px';
        }

        function onMouseMove(event) {
          moveAt(event.pageX, event.pageY);
        }

        document.addEventListener('mousemove', onMouseMove);

        document.addEventListener('mouseup', (event) => {
          document.removeEventListener('mousemove', onMouseMove);
          // document.removeEventListener('mouseup', onMouseUp);
          // reset style
          task.style.position = initialStyle.position;
          task.style.zIndex = initialStyle.zIndex;
          task.style.pointerEvents = initialStyle.pointerEvents;
          task.style.left = initialStyle.left;
          task.style.top = initialStyle.top;
        });
      });
    });
  }

Then on dateClick I call this:

  handleDateClick = async (info) => {
    if (!this.draggingEventId) {
      return;
    }

    const result = await this._scheduleTask(
      this.draggingEventId,
      info.date,
      info.resource.id
    );

    if (!result) {
      // drag reverts by resetting item style
    }
  }

Then in scheduleTask you can either call calendar.addEvent, or whatever you need to do to schedule the event.

[emrahnalci]

This works as a temporary solution