Restrict resizing or moving event which goes to previous day

Asked by Nirav Upadhyay
9 years ago.

Hi,

I am using below settings for my day pilot control in Angular 2, in short it displays 1 day in group by hours.
timeHeaders: [
{ groupBy: "Hour" }
],
days: 1,

If I resize/move event to before/after 12 AM, it allows to drag inside and some part goes to previous/next day, the event duration should reduce when reaching edges instead it remains as is. I want to restrict this behaviour. Since I am using the 24 hours and 1 day configuration it should not go beyond today's date.

Regards,
Nirav

Comment posted by Dan Letecky [DayPilot]
9 years ago.

By default the target position is not restricted. You can use onEventMoving event handler to customize the behavior.

Angular 2 config example:

config: any = {
  // ...
  onEventMoving: args => {
    if (args.end > dp.visibleEnd()) {
        args.left.enabled = true;
        args.left.html = "You can't drag the event out of the visible range";
        args.right.enabled = true;
        args.allowed = false;
    }

    if (args.start < dp.visibleStart()) {
        args.right.enabled = true;
        args.right.html = "You can't drag the event out of the visible range";
        args.left.enabled = true;
        args.allowed = false;
    }
  }
};

Let me know if it doesn't help.

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

Update: "dp" is the DayPilot.Scheduler object. This is a complete Scheduler component example:

import {Component, ViewChild} from '@angular/core';
import {DayPilot} from "daypilot-pro-angular";

@Component({
    selector: 'scheduler',
    template: `<daypilot-scheduler [events]="events" [config]="config" #scheduler1></daypilot-scheduler>`
})
export class SchedulerComponent {
    @ViewChild('scheduler1') scheduler1: DayPilot.Angular.Scheduler;

    events: any[] = [
        // ...
    ];

    config: any = {
      // ...
      if (args.end > this.scheduler1.control.visibleEnd()) {
          args.left.enabled = true;
          args.left.html = "You can't drag the event out of the visible range";
          args.right.enabled = true;
          args.allowed = false;
      }

      if (args.start < this.scheduler1.control.visibleStart()) {
          args.right.enabled = true;
          args.right.html = "You can't drag the event out of the visible range";
          args.left.enabled = true;
          args.allowed = false;
      }
    };

}

Comment posted by Nirav Upadhyay
9 years ago.

It worked. Thanks.

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