html5-scheduler-external-drag-and-drop.png

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

This feature is useful for implementing the following scenario:

  • Scheduler showing the current time schedule.
  • Separate list of events that are not yet scheduled. 
  • The unscheduled events can be dragged into 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,
          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 EventMove event handler on drop.

After dropping the object the standard EventMove event is triggered (handling specified by EventMoveHandling). If you decide to handle it on the client side using JavaScript, you can detect the external source by checking the external variable (external is false when the event was dragged from another location inside the calendar):

EventMoveJavaScript="if (external) { alert('External drag&drop detected.'); } dps1.eventMoveCallBack(e, newStart, newEnd, newColumn);"

Touch Support

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

Angular

The following directive will let you activate the external items using [makeDraggableToScheduler] attribute:

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);
  }
}

Example:

<div 
  *ngFor="let item of unscheduled" 
  [draggableToScheduler]="{ text: item.text, externalHtml: 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);
}

Tutorial

AngularJS

In AngularJS, it's possible to activate items using a simple directive ("daypilot-draggable"):

HTML

<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>

JavaScript

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
            });

        }
    };
});