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",
}
];
}
},