External Drag and Drop

DayPilot JavaScript Scheduler supports drag and drop from an external source (from outside of the Scheduler component).

This feature is useful for implementing the following scenario:

• The Scheduler shows the current time schedule.

• You need to display a separate list of events that are not scheduled yet. 

• The unscheduled events can be dragged to the calendar/scheduler.

Activating the External Items

You need to activate the items in the list using DayPilot.Scheduler.makeDraggable() method:

<div style="float:left; width: 150px;">
  Drag items from this list to the scheduler:
  <ul id="external">
      <li data-id="123" data-duration="1800"><span style="cursor:move">Item #123 (30 minutes)</span></li>
      <li data-id="124" data-duration="3600"><span style="cursor:move">Item #124 (60 minutes)</span></li>
  </ul>
</div>

<script type="text/javascript">
function makeDraggable() {
  var parent = document.getElementById("external");
  var items = parent.getElementsByTagName("li");
  for (var i = 0; i < items.length; i++) {
      var e = items[i];
      var item = {
          element: e,
          data: {
            id: e.getAttribute("data-id"),
            text: e.innerText,
            duration: e.getAttribute("data-duration")
          }
      };
      DayPilot.Scheduler.makeDraggable(item);
  }
}
</script>

Item properties:

• element (object) - the element to be removed on drop

• id (string) - event ID

• text (string) - event text

• duration (integer) - event duration in seconds

• keepElement (boolean) - set to true if the original element should not be removed from DOM on drop

• externalCssClass (string) - CSS class that will be applied to the moving shadow (when it is outside of the Scheduler)

• externalHtml (string) - HTML that will be added to the moving shadow (when it is outside of the Scheduler)

The event id, text, and duration will be passed to onEventMove event handler on drop.

After dropping the object the standard EventMove event is triggered (handling specified by eventMoveHandling). You can detect the external source by checking the value of args.external property in onEventMove.

Touch Support

The DayPilot.Scheduler.makeDraggable() method is compatible with touch devices and it is possible to move the item using touch dragging.

JavaScript Tutorials

• JavaScript Scheduler: Dragging Files and Other Items from Desktop

• JavaScript Scheduler: Events as Drag and Drop Target

• JavaScript Scheduler: Dragging Items from Events

• JavaScript Scheduler: Context Menu for External Items

Angular Scheduler

You can use the following directive to make external items draggable to the Angular Scheduler:

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
import { DayPilot } from 'daypilot-pro-angular';

@Directive({ selector: '[draggableToScheduler]' })
export class DraggableDirective implements AfterViewInit {

  @Input('draggableToScheduler') options: any;

  constructor(private el: ElementRef) { }

  ngAfterViewInit(): void {
    this.options.element = this.el.nativeElement;
    DayPilot.Scheduler.makeDraggable(this.options);
  }
}

To activate an item, add the [makeDraggableToScheduler] attribute:

<div 
  *ngFor="let item of unscheduled" 
  [draggableToScheduler]="{ externalHtml: item.text, data: { text: item.text, duration: durationFromMinutes(item.duration), id: item.id } }" 
  class="queue-item">
    {{item.text}}
</div>

The "duration" property of the data object accepts a number (duration in seconds) or a DayPilot.Duration object. This example uses durationFromMinutes() method to convert a minute value to DayPilot.Duration object:

durationFromMinutes(minutes: number) : DayPilot.Duration {
  return DayPilot.Duration.minutes(minutes);
}

Angular Tutorials

• Angular Work Order Scheduling (PHP/MySQL)

• Angular Scheduler: Drag and Drop Task Queue

React Scheduler

React Tutorials

• React Scheduler: External Drag and Drop

• React Work Order Planning System (PHP/MySQL)

Vue Scheduler

Vue Tutorials

The Vue Scheduler: Queue of Unscheduled Tasks tutorial shows how to use the Queue component to display a list of tasks that can be dragged to the Vue Scheduler.

• The queue uses the same item styling as the Vue Scheduler component.

• The items can be moved using drag and drop in both directions (to and from the Vue Scheduler).

• The queue is ordered and users can change the order by dragging the items.

<ul>
    <li daypilot-draggable data-id="1" data-duration="1800">Draggable item #1</li>
    <li daypilot-draggable data-id="2" data-duration="3600">Draggable item #2</li>
</ul>

app.directive("daypilotDraggable", function(){
    return {
        link: function(scope, element, attributes){
            var el = element[0];
            el.style.cursor = "move";
            DayPilot.Scheduler.makeDraggable({
                element: el,
                id: el.getAttribute("data-id"),
                duration: el.getAttribute("data-duration"),
                text: el.innerText
            });

        }
    };
});