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;
    }
}

Related Tutorials