The little cell highlight is there to communicate to the user that they can click to add an item/event. It should appear when the mouse hovers over the cell. There is no element to target with css, only the entire row (called a cell in the css).
Please let me know this ! Thank You.
And
I have used Scheduler MouseMove event but it doesn't work.
Support Forum
- Attachments
-
- MicrosoftTeams-image (12).png (28.5 KiB) Viewed 331 times
Hi hoangtruongdz96,
We don't have separated cells in the Scheduler for performance reasons. We have https://www.bryntum.com/docs/scheduler/api/Scheduler/feature/ScheduleContext which is not exactly what you asked, but I created a feature request ticket to add that hover behavior. https://github.com/bryntum/support/issues/5035
Best regards,
Márcio
Can you tell me when this https://github.com/bryntum/support/issues/5035 can be completed? Thank You !
Hello,
Unfortunately, It is not in our roadmap currently. If you need this feature badly, you can contact our sales for a feature sponsorship.
contact sales here https://www.bryntum.com/services
Good Luck ,
Tasnim
Hi,
We had this similar functionality to be added and we come up with a better way to achieve it. Here is the code we wrote for that.
We added mouse move and mouse over listeners to the cell.
cellMouseOver: cellHoverEvent => {
if (!schedulerInstance.current) {
return;
}
const cellSelector = cellHoverEvent.cellSelector;
// Do nothing if cell hovered is name or group header
if (cellSelector.columnId.includes('name') || cellSelector.id.includes('group-header-')) {
return;
}
const scheduler = schedulerInstance.current.instance;
let date = scheduler.getDateFromDomEvent(cellHoverEvent.event);
const resourceId = cellHoverEvent.record.data.id;
// Add event for change placeholder position when mouse move in cell
cellHoverEvent.event.target.addEventListener('mousemove', function (e) {
const nextDate = scheduler.getDateFromCoordinate(e.offsetX);
// Do nothing if same day
if (isSameDay(date, nextDate)) {
return;
} else scheduler.resourceTimeRangeStore.removeAll();
if (isWeekend(nextDate)) {
// Remove last placeholder
scheduler.resourceTimeRangeStore.removeAll();
return;
}
date = nextDate;
// Show cell placeholder if hover in cell at weekend and move to weekdate
if (!scheduler.resourceTimeRangeStore.length) {
scheduler.resourceTimeRangeStore.add({
resourceId: resourceId,
startDate: startOfDay(nextDate),
endDate: endOfDay(nextDate),
duration: 1,
style: 'background: #EDFFFF; border: 1px solid #32BFBD;',
});
return;
}
// Change placeholder to new date
scheduler.resourceTimeRangeStore.first.setStartEndDate(startOfDay(nextDate), endOfDay(nextDate));
});
// Do nothing if cell is weekend
if (isWeekend(date)) {
return;
}
// Show cell placeholder
scheduler.resourceTimeRangeStore.add({
resourceId: resourceId,
startDate: startOfDay(date),
endDate: endOfDay(date),
duration: 1,
style: 'background: #EDFFFF; border: 1px solid #32BFBD;',
});
},
cellMouseOut: () => {
// cellMouseLeaveEvent.event.target.removeListener('mousemove');
if (!schedulerInstance.current) {
return;
}
const scheduler = schedulerInstance.current.instance;
scheduler.resourceTimeRangeStore.removeAll();
},
Let me know if this is helpful in anyway.
Thanks,
Anoop
- Attachments
-
- Output
- Screen Shot 2022-08-31 at 10.23.18 am.png (45.58 KiB) Viewed 248 times