Hi, I need to track the mouse hover events for which i am using onEventMouseOver and onEventMouseOut. onEventMouseOver seems to work fine but when moving the cursor inside the event container, onEventMouseOut is also being triggered which should not hapeen. It looks like onEventMouseOut is triggered when i am hovering over the event body template content, though the cursor is still inside the event. Following is one of the examples where this can be reflected (link: https://bryntum.com/examples/scheduler/drag-outside/)
I added these 2 events onEventMouseOver and onEventMouseOut.
const scheduler = new Scheduler({
appendTo : 'main',
flex : 1,
resourceImagePath : '../_shared/images/users/',
multiEventSelect : true,
onEventMouseOver : ()=>{console.log('hover in')},
onEventMouseOut: ()=>{console.log('hover out')},
features : {
stripe : true,
sort : 'name',
eventDrag : {
// Allow dragging events outside of the Scheduler
constrainDragToTimeline : false,
// With this method, you can let the scheduler now if the drop operation is valid or not
validatorFn({ draggedRecords, event }) {
return true;
},
// This CSS selector defines where a user may drop events outside the scheduler element
externalDropTargetSelector : '.b-external-grid'
}
},
columns : [
{
type : 'resourceInfo',
text : 'Staff'
}
],
crudManager : {
autoLoad : true,
transport : {
load : {
url : 'data/data.json'
}
}
},
startDate : new Date(2022, 7, 26, 6),
endDate : new Date(2022, 7, 26, 20),
viewPreset : 'hourAndDay',
listeners : {
// We listen for the `eventDrop` event and take action if dropped on the external grid
eventDrop({ browserEvent, eventRecords, externalDropTarget }) {
if (externalDropTarget) {
// Remove record from the event store
scheduler.eventStore.remove(eventRecords);
// Now add it to the grid store instead
grid.store.add(eventRecords);
// Finally re-sort the grid store (by name)
grid.store.sort();
}
}
}
});
new Splitter({
appendTo : 'main'
});
const grid = new Grid({
appendTo : 'main',
cls : 'b-external-grid',
flex : '0 0 300px',
emptyText : 'Drop events here',
features : {
stripe : true,
sort : 'name'
},
store : {
// Setup the Grid store to use the same data model as the Scheduler
modelClass : EventModel
},
columns : [
{
text : 'Unscheduled tasks',
field : 'name',
flex : 1
},
{
type : 'duration'
}
]
});