Our pure JavaScript Scheduler component


Post by shivam »

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'
    }
]
});

Post by alex.l »

Hi shivam,

You need to check event target to be sure events triggered with the element you expected.

All the best,
Alex


Post by shivam »

Hi alex, Thanks for the suggestion.Could you suggest the possible solutions for that? Would using dom would be fine ?


Post by alex.l »

Just check if event.target.classList has expected class in the beginning of your method.
Browser event is one of parameters of these events https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerDomEvents#event-eventMouseOut

All the best,
Alex


Post Reply