How to drop event on external control

Asked by Naomi
4 years ago.

Hi,

I'm using angularJs and the Scheduler. I found related question https://forums.daypilot.org/question/2974/drop-events-outside-scheduler and I do have the functionality implemented using context menu, but I also want to have the same functionality with the drag/drop. I have the following directive (called clipboard) with the following html:

<div id="clipboardPanel"  
     class="panel-container scrollable">    
    <div class="panel-group" id="clipboardAccordion" role="tablist">
        <div class="panel panel-primary" ng-class="{'clipboard-header': @(vm).expandClipboard}">
            <div class="panel-heading">
                <span class="panel-title" role="button" ng-click="@(vm).expandClipboard=!@(vm).expandClipboard" data-toggle="collapse" href="#cliboardBody">
                    <i class="fa fa-chevron-up"
                       ng-if="@(vm).expandClipboard && @(vm).bookings.length>0"
                       data-toggle="collapse" href="#cliboardBody"></i>
                    <i class="fa fa-chevron-down"
                       ng-if="!@(vm).expandClipboard && @(vm).bookings.length>0"
                       data-toggle="collapse" href="#cliboardBody"></i>
                    @Labels.clipboard
                </span>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="resort">
                    <span for="resort">@Messages.clipboardResort</span>
                </div>
            </div>
        </div>
        <div id="cliboardBody" class="panel-collapse collapse" 
              ng-class="{in: @(vm).expandClipboard}">
            <div class="panel-body content-body">
                <div class="clipboard-item"
                     ng-repeat="booking in @(vm).bookings track by $index">
                    <div daypilot-draggable object="booking">
                        <div class="text left">
                            {{booking.text}}
                        </div>
                    </div>
                    <div class="reload right">
                        <button ng-click="@(vm).undoClipboard(booking, $index)">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How can I allow the events to be dropped on clipboard?

Thanks in advance.

how-to javascript

Answer posted by Dan Letecky [DayPilot]
4 years ago.

Unfortunately, a custom external drop target is not supported at the moment.

However, it is possible to drag events between to Scheduler instances. It would be possible to create a simplified instance of DayPilot.Scheduler to create the clipboard (with just one row and one column).

Comment posted by Naomi
4 years ago.

Hi Dan,

I'm thinking that for my purpose I need to detect when the event I'm moving reaches the bottom of the schedule (as my clipboard is right beneath the schedule). I don't really need to remove the even from the schedule, I just need to change two of its extra properties when I'm adding to clipboard. So, do you know what would be the best way to detect when I'm trying to go out when I move the event? (The event will stay in its position after that operation).

Thanks in advance.

Comment posted by Naomi
4 years ago.

One more related question - if I'm to try this route (e.g. second instance of the Scheduler object), do you know if it's possible to be able to use move functionality but only between these two objects (e.g. still disallow move from one resource to another within the Schedule)?

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

How to drop event on external control

Products

Learn

Get Support

DayPilot Pro