You can use the onEventResizing event handler to customize the drag and drop event resizing in the Scheduler component:
-
You can display a custom real-time message related to the target position.
-
You can adjust the target position.
-
You can forbid selected target position if it doesn’t meet the specified rules.
-
You can display inline indicators of the target position with custom text and/or date/time format.
Example: Display a Custom Message during Drag and Drop
This example displays the target event start and end in a custom element outside of the Scheduler component.
HTML:
<div id="msg"></div>
Scheduler config:
onEventResizing: args => {
document.querySelector("#msg").innerText = `${args.start} ${args.end}`;
}
Example: Adjust the Target Position Programmatically
You can modify the target position during the resizing process. This can be handy if there are predefined slot sizes or boundaries.
Scheduler config:
onEventResizing: args => {
if (someCondition) {
args.newStart = adjustStart(args.start);
args.newEnd = adjustEnd(args.end);
}
}
Example: Forbid Certain Target Positions
Ensure that events neither start nor end on a weekend.
Scheduler config:
onEventResizing: args => {
const isWeekend = date => {
const dayOfWeek = date.getDayOfWeek();
return dayOfWeek === 0 || dayOfWeek === 6; // Sunday or Saturday
};
if (isWeekend(args.newEnd) || isWeekend(args.newStart)) {
args.allowed = false;
}
}
Example: Enforce Maximum Event Duration
This configuration example uses the onEventResizing
event handler to ensure that events within the Scheduler component do not exceed a set duration (4 days in this case).
onEventResizing: (args) => {
if (args.duration.totalDays() > 4) {
args.right.enabled = true;
args.right.html = "You can only book up to 4 days";
args.allowed = false;
}
}
Example: Display Inline Indicators with Custom Content
Provide visual feedback about the resizing action within the Scheduler component.
Scheduler config:
onEventResizing: args => {
args.right.enabled = true;
if (args.allowed) {
args.right.html = `Resizing: ${args.start} - ${args.end}`;
} else {
args.right.html = `Invalid Position`;
}
}
Example: Forbid Overlaps
With the global event overlap prevention disabled, you can still prevent event overlaps during event resizing.
Scheduler:
onEventResizing: args => {
const row = dp.rows.find(args.e.resource());
const events = row.events.forRange(args.start, args.end).filter(e => e.id() !== args.e.id());
if (events.length > 0) {
args.allowed = false;
}
}