search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Add a new panel to be able to drop events to

Asked by Naomi
8 months ago.

Hi,

I need to be able to drag and drop events from external "clipboard" control and onto that external control. I implemented drag and drop from clipboard using one of the existing samples. I also implemented the adding to clipboard using the right click menu. I need also to be able to "drop" events to that external clipboard.

Also, I need all this functionality with the events actually staying where they are, I just need a visual effect of dropping the event and when it happens I'll update two external "tags" properties of the event.

In addition, I don't want to allow moving and resizing events within the schedule, I only want to allow that external drop.

Do you think it would be possible to add such panel as part of the DayPilot? The suggested solution of using extra DayPilot for this kind of drop seems a bit overkill (I didn't play with it).

Thanks in advance.

Answer posted by Dan Letecky [DayPilot]
8 months ago.

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

Comment posted by Naomi
8 months ago.

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.

Comment posted by Naomi
8 months ago.

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.

Comment posted by Naomi
8 months ago.

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.

Comment posted by Dan Letecky [DayPilot]
8 months ago.

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

Comment posted by Naomi
8 months ago.

Hi Dan,

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

Comment posted by Naomi
8 months ago.

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?

Comment posted by Dan Letecky [DayPilot]
8 months ago.

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"
    }
  ]
},
Comment posted by Naomi
8 months ago.

Thanks again!

Comment posted by Naomi
8 months ago.

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.

Comment posted by Dan Letecky [DayPilot]
8 months ago.

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;
  };
Comment posted by Naomi
8 months ago.

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.

Comment posted by Naomi
8 months ago.

I meant I'm using fa-clipboard.

Comment posted by Dan Letecky [DayPilot]
8 months ago.

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.

Comment posted by Naomi
8 months ago.

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.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.