Hovering a draggable event and change row background-color

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.