Implementing a 'Break and Reschedule' Function in the Scheduler Component

Asked by Ankit - concentics@gmail.com
3 years ago.

I am in need of some guidance regarding an issue I am facing. Here's the problem I'm trying to solve:

I have a task, let's call it "Task 1". I want to be able to right-click on this task to see an option labeled "break". When "break" is selected, a form should appear asking for the reason for the break, the duration of the break, and a different machine to which the remaining task could be scheduled.

For instance, if a user fills out the form with the details [“machine not work properly“, 3hr, Loom4], I want the program to automatically adjust the display of Task 1. The initial five hours (derived from total hours minus the break hour, i.e., 8-3 = 5 hours) should be displayed in blue, while the remaining 3 hours should be shown in red.

Additionally, the system should automatically create a new 3-hour task on Loom4, connected with Task 1.

Essentially, the visualization and task management should look like this:

Is such a function feasible to implement?

how-to javascript

Answer posted by Dan Letecky [DayPilot]
3 years ago.

This is possible. Just remember that it’s a bit more complex task and you will need to extend this code to cover edge cases and implement the server-side part.

It works like this:

The “Split” context menu item opens a context menu where you can adjust the time of the break and select the target resource.
Then it adds a breakpoint property to the event data object, adds a new event and a link.

By default, the breakpoint is set to the current cursor position.

contextMenu: new DayPilot.Menu({
    items: [
        // ...
        {
            text: "Split",
            onClick: async (args) => {
                const event = args.source;
                const time = dp.getCoords().time;
                const roundedTime = time.getDatePart().addHours(time.getHours());

                const form = [
                    {name: "Resource", id: "resource", type: "select", options: dp.resources},
                    {name: "Breakpoint", id: "breakpoint", type: "datetime"}
                ];

                const data = {
                    resource: event.resource(),
                    breakpoint: roundedTime
                };

                const modal = await DayPilot.Modal.form(form, data);
                if (modal.canceled) {
                    return;
                }
                const resource = modal.result.resource;
                const breakpoint = modal.result.breakpoint;

                event.data.breakpoint = breakpoint;
                dp.events.update(event);

                const id = DayPilot.guid();
                dp.events.add({
                    id: id,
                    start: breakpoint,
                    end: event.end(),
                    resource: resource,
                    text: event.text()
                });

                dp.links.add({
                    from: event.id(),
                    to: id,
                });
            }
        }
    ]
})

It’s also necessary to add this logic to onBeforeEventRender. It adds an active area that starts at the defined breakpoint and ends at the end of the event.

onBeforeEventRender: args => {
    if (args.data.breakpoint) {
        args.data.areas = [
            {
                bottom: 0,
                top: 0,
                start: args.data.breakpoint,
                end: args.data.end,
                backColor: "#ff000033",
            }
        ];
    }
},

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.