Our pure JavaScript Scheduler component


Post by hoangtruongdz96 »

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.

Attachments
MicrosoftTeams-image (12).png
MicrosoftTeams-image (12).png (28.5 KiB) Viewed 329 times

Post by marcio »

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


Post by hoangtruongdz96 »

Can you tell me when this https://github.com/bryntum/support/issues/5035 can be completed? Thank You !


Post by tasnim »

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


Post by anoop.francis »

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
Output
Screen Shot 2022-08-31 at 10.23.18 am.png (45.58 KiB) Viewed 246 times

Post by mats »


Post Reply