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.

Hello,

So, with a few small changes, it works! The only issue now is that it doesn’t look quite right because of the cell borders. I tried modifying the border, but I don’t think it’s actually the cell border causing the problem. Here’s my code:

CSS:

.cell-target.scheduler_default_cell {
    background-color: #c2c2c2 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

JS:

// In my dp = new DayPilot.Scheduler("dp", {
onCellMouseOver: args => {
    if (dragging) {
        const row = dp.rows.find(args.cell.resource);
        if (row) {
            const cellElements = row.cells.all();
            cellElements.addClass("cell-target");
        }
    }
},
onCellMouseOut: args => {
    const row = dp.rows.find(args.cell.resource);
    if (row) {
        row.cells.all().removeClass("cell-target");
    }
},

// In my MakeDraggable item
let item = {
    onDragStart: (args) => {
        dragging = true;
    },
    onDrop: (args) => {
        dragging = false;
    },
};

The grid lines are not created using cell borders, but using special 1px wide/high elements.

You can hide them using onBeforeGridLineRender if needed and add the borders to cells instead.