Hit Testing

Use hit testing to identify the Scheduler element under a pointer location. Hit-test results connect screen coordinates with source items, cells, resources, and headers without depending on rendered DOM fragment structure.

Test a pointer event

Pass a MouseEvent to hitTest and then request the matching information with getHitInfo().

scheduler.hostElement.addEventListener('click', (event: MouseEvent) => {
  const hit = scheduler.hitTest(event);
  const info = hit.getHitInfo();

  if (!info) {
    return;
  }

  if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Item) {
    openEventDetails(info.item);
  } else if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Cell) {
    showCellActions(info.start, info.end, info.resources);
  }
});

hitTest accepts page coordinates, a Wijmo Point, a MouseEvent, or an HTMLElement. Use the form that matches the source of the coordinates.

Read the hit-test type

SchedulerHitTestInfo.hitTestType identifies the matched Scheduler part.

The returned element is the matched Scheduler element and point contains the resolved page coordinates. Treat None and null as normal no-result cases.

Read cell information

Cell hits provide the time range and resource context represented by the cell.

const hit = scheduler.hitTest(mouseEvent);
if (hit.hitTestType === wjScheduler.SchedulerHitTestType.Cell) {
  const cell = hit.getHitInfo();
  scheduler.create({
    subject: 'New appointment',
    start: cell.start,
    end: cell.end,
    ...cell.resources,
  });
}

Use the cell's isWorkingTime value when an application needs to display or apply a working-time rule.

Read event-item information

Item hits identify the source item and its resource and conflict context.

scheduler.hostElement.addEventListener('dblclick', event => {
  const hit = scheduler.hitTest(event);
  if (hit.hitTestType !== wjScheduler.SchedulerHitTestType.Item) {
    return;
  }

  const itemInfo = hit.getHitInfo();
  openEventEditor(itemInfo.item);
});

An event that spans dates or resource sections can have multiple rendered fragments. Hit testing resolves each fragment to the same source item, so commands should operate on itemInfo.item rather than the fragment element.

Read header information

Header hits return BandInfo, which describes the axis direction, level, and displayed text.

const hit = scheduler.hitTest(event);
if (hit.hitTestType === wjScheduler.SchedulerHitTestType.ColumnHeader ||
    hit.hitTestType === wjScheduler.SchedulerHitTestType.RowHeader) {
  const band = hit.getHitInfo();
  showAxisDetails(band.axis, band.level, band.text);
}

Use header information for axis-specific commands; do not infer axis levels from CSS classes or header positions.

Use hit testing safely

Hit testing only resolves elements currently presented by Scheduler. It does not return data for coordinates outside the control or for preview fragments created during a move or resize interaction. Keep application commands based on the returned source information and handle a null result before reading any fields.