Callbacks

React to user interactions and timeline state changes.

Event Log clear

All Callbacks

Callback	Signature	Fires When
`onItemClick`	`(id: string \| number) => void`	A timeline item is clicked.
`onItemDoubleClick`	`(id: string \| number) => void`	A timeline item is double-clicked.
`onItemContextClick`	`(id: string \| number, position: { x: number; y: number }) => void`	A timeline item is right-clicked. The browser's default context menu is suppressed. Receives the item `id` and viewport coordinates for positioning a custom menu.
`onItemHover`	`(id: string \| number \| null) => void`	The pointer enters an item (`id`) or leaves all items (`null`).
`onSelectionChange`	`(changes: SelectionChangeEvent[]) => void`	The selection changes via user interaction. Enables controlled selection — you must call `setSelection()` to apply changes. See Selection.
`onRangeChange`	`(start: Date, end: Date) => void`	The visible range changes due to panning, zooming, or programmatic update.
`onGroupToggle`	`(group: string, collapsed: boolean) => void`	A group header is clicked to collapse or expand. Only fires when `grouping.collapsible` is `true`.

The onRangeChange callback fires frequently during panning and zooming. If you're doing expensive work in response (like fetching data), consider debouncing it.

Example

const timeline = new TempisTimeline('#canvas', {
  responsive: true,
  selection: 'multi',
  items: [
    { id: 1, label: 'Item 1', start: '2026-02-01', end: '2026-02-10' },
    { id: 2, label: 'Item 2', start: '2026-02-05', end: '2026-02-15' },
  ],
  range: { start: '2026-01-25', end: '2026-03-01', position: 'bottom' },

  onItemClick(id) {
    console.log('Clicked:', id);
  },
  onItemDoubleClick(id) {
    console.log('Double-clicked:', id);
  },
  onItemContextClick(id, position) {
    console.log('Context-click:', id, 'at', position);
    // Show a custom context menu at position.x, position.y
  },
  onItemHover(id) {
    console.log('Hover:', id);
  },
  onSelectionChange(changes) {
    console.log('Selection:', changes);
  },
  onRangeChange(start, end) {
    console.log('Range:', start, '→', end);
  }
});