Sorry for the delay.
This can be done like this:
const scheduler = new DayPilot.Scheduler("scheduler", {
onRowMouseOver: args => {
if (app.dragging) {
args.row.cells.all().addClass("cell-target");
}
},
onRowMouseOut: args => {
args.row.cells.all().removeClass("cell-target");
}
});
scheduler.init();
const app = {
init() {
this.makeDraggable();
},
dragging: false,
makeDraggable() {
// activate items as source
const parent = document.getElementById("external");
const items = parent.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
const e = items[i];
const item = {
// ...
onDragStart: (args) => {
// ...
app.dragging = true;
},
onDrop: (args) => {
// ...
app.dragging = false;
},
};
DayPilot.Scheduler.makeDraggable(item);
}
},
};
app.init();
And the CSS class that highlights the cells:
<style>
.cell-target.scheduler_default_cell {
background-color: red;
}
</style>
Just note that this method uses the direct modification API (addClass() method of the cell array) which should only be used for real-time scenarios like this. For other cases, the cell properties should be set using onBeforeCellRender.