Add a new panel to be able to drop events to

Yes, it's been in the queue for some time already.

Before it's implemented, the following approach might work:

Instead of dragging the whole event, you can insert a custom element into the event that will be activated for native HTML5 drag and drop. You can use onAfterEventRender to add this element. It would be possible to drag this element to a custom object (just make sure that you activate it as a drop target).

There is a related tutorial that works the other way around (it registers event as a drop target) but it may serve as a reference:
https://code.daypilot.org/12371/javascript-scheduler-events-as-drag-and-drop-target

Hi Dan,

I'm starting to look into it now, but I'm wondering - I do have events moving inside the Scheduler right now (BTW, I need to be able to show text of the event being moved inside the grey indicator) - if I use another element - would it look different for different kind of moves?

Do you know if that functionality is close to be released as part of the DayPilot or I do need to use this workaround?

Thanks again.

I've added the ondrop event to my clipboard div element, but right now it's not firing when I'm dragging the event onto the clipboard.

Do you know if the event has already implemented 'draggable' attribute? It looks like it has as I can visually drop the events on my clipboard, but I don't see the event firing.

So far I'm unable to make it work. This is what I added to afterEventRendered event:

 args.div.setAttribute("draggable", "true");

            args.div.ondragstart = function (ev) {
                console("On Drag start: " + ev);
                ev.preventDefault();
                ev.dataTransfer.setData("daypilot/external-item", JSON.stringify(data));
            };

And I added the following to the div of my clipboard HTML:

<div id="clipboardPanel" 
     ondrop="@(vm).onDrop(event)" 
     ondragover="@(vm).allowDrop(event)"
     class="panel-container scrollable">

but nothing happens when I try to drop event onto the clipboard. I see none of the events being fired.

Naomi,

Please see the following tutorial that shows how to drag custom elements from events to an external drop target:
https://code.daypilot.org/30579/javascript-scheduler-dragging-items-from-events

Hi Dan,

Thanks a lot. I got into a despair mode yesterday, hopefully your tutorial will set me up straight.

Hi Dan,

I've followed the tutorial and got it working, but now I'd like to make a minor change. Is it possible to have a picture of the clipboard <i class="fal fa-clipboard"></i> instead of the just a box?

Hi Naomi,

Great, thanks for the update. Yes, you can just specify "icon" property like this:

onBeforeEventRender: function(args) {
  args.data.areas = [
    {
      right: 5,
      top: 10,
      height: 15,
      width: 15,
      backColor: "#6aa84f",
      cssClass: "draggable",
      style: "cursor: move",
      icon: "fal fa-clipboard"
    }
  ]
},

Thanks again!

Hi Dan,

How can I get the reference to the event [DayPilot event] from inside the drop event? I need to update some properties of that event after I add it to the clipboard. I'm passing data around, but how can I get the reference to that event itself?

Thanks again.

During serialization/deserialization, any references are lost so you need to lookup the event object instance using the id:

  drop.ondrop = function(ev) {
    var json = ev.dataTransfer.getData("daypilot/external-item");
    var data = JSON.parse(json);
    var e = dp.events.find(data.id);
    console.log("drop event: ", e);
    drop.innerText = json;
  };

Thanks again. I decided to take a different approach in the meantime, will test in a minute.

I also found a bit of a problem. The color property doesn't seem to work at all, e.g. if I use fal fa-calendar, it's always using the background color of the event. I was trying to make this area white and show white clipboard icon, but it seems to blend with my current event's color.

I meant I'm using fa-clipboard.

The text color needs to be set using "style" property. Only the background-color style can be set using a direct property (backColor).

    onBeforeEventRender: function(args) {
      args.data.areas = [
        {
          right: 5,
          top: 10,
          height: 15,
          width: 15,
          backColor: "#6aa84f",
          cssClass: "draggable",
          style: "cursor: move; color: white;"
        }
      ]
    },

You can also use the CSS class ("draggable") to set the text color.

I'm thinking - perhaps there is another way to introduce this functionality, not using areas? I need that icon to stand out and be big enough. This is how it looks now and I don't like the appearance :(

Is there a way to contact you directly so I can show you how this looks like?

Thanks.