Events without overlap

[gitdev]

Hello,

In our context, one resource can only do one thing at a time. Therefore, when we drag and drop an event to change its time, we need the other events to be moved in the future.

Here is an example based on your basic demo :
1- We have two events for Mike.



2- Then, the user drag and drop the pink event in-between the two green. The current behavior puts the pink event at the bottom, which is not what we need.


3- This is the behavior that we need. The pink event is inserted and all events at the right are moved later.


In this small example, it is easy for the user to move manually the event at the right. However, imagine if there are many other events at the right, it'll take a while and the user may make mistakes.

Is there a setting in the scheduler to allow that inserting behavior ?

Thank you very much.

[mats]

No setting currently, but we'll discuss it. This should do it:

scheduler.on('eventdrop', (event) => {
    const draggedTask  = event.eventRecords[0],
          futureEvents = event.targetResourceRecord.events.filter((ev) => ev.startDate >= draggedTask.startDate).sort((a, b) => a.startDate > b.startDate ? 1 : -1);

    futureEvents.forEach((ev, i) => {
        const prev = futureEvents[i - 1];

        if (prev) {
            ev.startDate = DateHelper.max(prev.endDate, ev.startDate);
        }
    });
});

[gitdev]

Hello mats,

Thank you for your answer, I really appreciate it.

I want to try your code in the Angular 7 demo example. However, I get an error saying the DateHelper name does not exist.

I also tried using this.scheduler.schedulerEngine.DateHelper but it says that the DateHelper object is null.

In app.component.ts :

onSchedulerEvents(event: any) {
    // catch scheduler events here, for example when dropping an event:
    if (event.type === 'eventdrop') {
      console.log('Drop: ', event);
      const draggedTask  = event.eventRecords[0];
      const futureEvents = event.targetResourceRecord.events.filter((ev) => ev.startDate >= 
      draggedTask.startDate).sort((a, b) => a.startDate > b.startDate ? 1 : -1);

futureEvents.forEach((ev, i) => {
    const prev = futureEvents[i - 1];

    if (prev) {
        ev.startDate = this.scheduler.schedulerEngine.DateHelper.max(prev.endDate, ev.startDate);
    }
});
    }
  }

[johan.isaksson]

You have to import DateHelper to be able to use it, try this:

import {DateHelper} from 'scheduler';