Features

  • The Scheduler checks for any overlapping events during drag and drop moving - the existing events are pushed back to make space for the dragged event.

  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Live Demo

Automatic Moving of Existing Events

The JavaScript Scheduler fires onEventMove event when an event is dropped at the target location.

We will use to it find any events that are already displayed at the target location. The overlapping events will be pushed back automatically. It also stores the automatically-moved events in an array so you send the changes to the server.

Drag and drop moving:

javascript scheduler push existing events forward before

After drop:

javascript scheduler push existing events forward after

Source code:

<div class="main">
  <div id="dp"></div>
</div>

<script>
  var dp = new DayPilot.Scheduler("dp", {
    timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
    scale: "Day",
    days: 30,
    startDate: "2021-11-01",
    onTimeRangeSelected: function (args) {
      var dp = this;
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        });
      });
    },
    treeEnabled: true,
    onEventMove: function(args) {

      // a list of events to be pushed
      var eventsToBeMoved = [];

      // find events in the target row, starting at the new event location
      var events = dp.rows.find(args.newResource).events.forRange(args.newStart).filter(function(e) { return e.id() !== args.e.id(); });

      // check the events
      var end = args.newEnd;
      events.every(function(e) {

        // that last movement didn't affect the next event, stop the every() processing here
        if (end <= e.start()) {
          return false;
        }

        // this event needs to be pushed
        var offset = end.getTime() - e.start().getTime();
        var item = {};
        item.e = e;
        item.newStart = e.start().addTime(offset);
        item.newEnd = e.end().addTime(offset);
        eventsToBeMoved.push(item);
        end = item.newEnd;

        // continue
        return true;
      });

      // this is to be sent to the server
      console.log(eventsToBeMoved);

      // move events in the list
      eventsToBeMoved.forEach(function(item) {
        var e = item.e;
        e.start(item.newStart);
        e.end(item.newEnd);
        dp.events.update(e);
      });

    }
  });
  dp.resources = [
    {name: "Resource 1", id: "R1"},
    {name: "Resource 2", id: "R2"},
    {name: "Resource 3", id: "R3"},
    {name: "Resource 4", id: "R4"},
    {name: "Resource 5", id: "R5"},
    {name: "Resource 6", id: "R6"},
    {name: "Resource 7", id: "R7"},
    {name: "Resource 8", id: "R8"}
  ];
  dp.events.list = [
    {id: 1, text: "Event 1", start: "2021-11-05", end: "2021-11-07", resource: "R1"},
    {id: 2, text: "Event 2", start: "2021-11-07", end: "2021-11-10", resource: "R1"},
    {id: 3, text: "Event 3", start: "2021-11-10", end: "2021-11-15", resource: "R1"},
    {id: 4, text: "Event 4", start: "2021-11-10", end: "2021-11-15", resource: "R2"}
  ];
  dp.init();


</script>