Event Resizing Customization

You can customize the resizing of JavaScript Calendar events using the onEventResizing event handler in real-time.

1. Display labels at the start and end of the target to show information such as target start, end, duration, or other details.

2. Restrict the target position based on custom rules, e.g., enforcing a minimum or maximum duration.

3. Display custom HTML content within the target shadow.

4. Apply a custom CSS class to the target shadow.

Example: Display the Target Duration

In this example, args.top.html is used to specify the HTML content for the “top” label. The new event duration displayed is calculated from the args.start and args.end properties.

{
  onEventResizing: args => {
      args.top.enabled = true;
      args.top.html = "Duration: " + new DayPilot.Duration(args.start, args.end).totalHours() + " hours";
  },
  // ...
}

Example: Enforce a Maximum Duration

This example checks the target duration and marks the event position as forbidden when the duration exceeds 5 hours.

{
  onEventResizing: args => {
      const duration = new DayPilot.Duration(args.start, args.end);
      if (duration.totalHours() > 5) {
          args.allowed = false;
      }
      if (args.anchor === args.e.start()) {
          args.bottom.enabled = true;
          args.bottom.html = "Duration: " + duration.totalHours() + " hours";
      } else {
          args.top.enabled = true;
          args.top.html = "Duration: " + duration.totalHours() + " hours";
      }
  },
  // ...
}