Request: configuration to ensure events can not be extended beyond the current date.

[muggy8]

Current, in multi-day view, when dragging to resize an event, if a date line is crossed, the event will always expand to the mouse location in the new date for future dates or the event is shrunken down the smallest possible size for past dates.

Would it be possible to add some sort of configuration to disable this behavior so that only the height of the mouse is considered for dragging when in multi day view so that the event will not cross the date boundary. (eg, if i drag to resize an appointment on jan 1, 00:00 - 00:30 and I use drag to resize to move the end time to jan 2, 01:00, instead of the end time being jan 2, 01:00, the actual end time is treated and rendered as jan 1, 01:00)

[danyalejandro]

I'm also interested in this configuration option, there are many contexts where appointments that span multiple days don't make any sense, i.e. most appointment scheduling use cases.

[vkurko]

Thanks for the idea. I'll think about the implementation.

[vkurko]

In v3.12.0 there are 3 new callbacks - dragConstraint, resizeConstraint and selectConstraint, which allow you to implement any logic to restrict resizing or dragging.

For example, a constraint that would allow resizing only within single day would look like this:

resizeConstraint: function (info) {
  let {oldEvent, event} = info;
  return event.end.getDate() === oldEvent.end.getDate()
    && event.end.getMonth() === oldEvent.end.getMonth()
    && event.end.getFullYear() === oldEvent.end.getFullYear();
}

Please check.

[danyalejandro]

Thank you! We integrated this to our project and it works as expected.

Sorry I wasn't able to check this before, I wasn't with the company during that time.

[vkurko]

Thank you for the feedback and good luck with your project!

[kulor]

I've found selectConstraint really useful, thank you @vkurko. Here's a snippet for the copy-paste lovers.

selectConstraint: function (info) {
  // Prevent spanning multiple days
  const { start, end } = info;

  return (
    start.getDate() === end.getDate() &&
    start.getMonth() === end.getMonth() &&
    start.getFullYear() === end.getFullYear()
  );
},