Event Resizing Customization

 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 by assigning args.start and args.end. This can be handy if there are predefined slot sizes or boundaries. In this example, someCondition, adjustStart(), and adjustEnd() represent your application rules. The adjusted start must be before the adjusted end.

Scheduler config:

onEventResizing: args => {
    if (someCondition) {
        args.start = adjustStart(args.start);
        args.end = adjustEnd(args.end);
    }
}

Example: Forbid Certain Target Positions

This JavaScript example prevents the first or last instant of an event from falling on a weekend. It uses the default eventEndSpec: "DateTime", where the end is exclusive. For example, an event ending at midnight on Saturday still finishes on Friday. This rule checks the boundaries; it does not reject weekends inside the event.

Scheduler config:

onEventResizing: args => {
    const isWeekend = date => {
        const dayOfWeek = date.getDayOfWeek();
        return dayOfWeek === 0 || dayOfWeek === 6; // Sunday or Saturday
    };
    const lastIncludedInstant = args.end.addTime(-1);
    if (isWeekend(args.start) || isWeekend(lastIncludedInstant)) {
        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

• ASP.NET Core Field Service Scheduling: Tasks, Routes, and Travel Time