search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Hovering a draggable event and change row background-color

Asked by Jimmy
9 days ago.

Hi,

I would like to highlight a row when i hover it with a draggable event. I use the DayPilot.Scheduler.makeDraggable(item); to make a td draggable in the scheduler. The event show his duration in the scheduler and that fine. but, I would like to highight the row i want to drag and drop it. For exemple, if i drag an event on top of the Driver 1, I want the row on his right to have a drifferent background color. And if i hover the Driver 2, change the background color of driver 1 to be the default and change the background color of the row Driver 2.

Thank you!

Answer posted by Dan Letecky [DayPilot]
1 day ago.

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.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):