Events

Gantt instance can listen to events.

Type-Safe Event Handling

Event names are type-checked via the EventBusEventName constant object. This provides autocomplete and compile-time validation:

import Gantt, { EventBusEventName } from 'bbl-gantt'

const gantt = new Gantt({ /* ... */ })

// Recommended: Use EventBusEventName for type safety
gantt.on(EventBusEventName.event_item_body_click, (event, eventItem, gantt) => {
  console.log('Event clicked:', eventItem.name)
})

// Also supported: String event names (for backward compatibility)
gantt.on('event_item_body_click', (event, eventItem, gantt) => {
  console.log('Event clicked:', eventItem.name)
})

You can also import the type for event names:

import { EventBusEventNameType } from 'bbl-gantt'

init

// Triggered when the instance is initialized.
(gantt: Gantt) => void

container_scroll

// Triggered when the instance container is scrolled.
(e: Event, gantt: Gantt) => void

header_wheel

// Mouse wheel zooming in the header area triggers this event.
(e: Event, gantt: Gantt) => void

event_item_body_mouse_down

// Triggered when the mouse button is pressed on the event item body area.
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_body_context_menu

// Triggered when the right mouse button is clicked on the event item body area.
(event: Event, eventItem: GanttEventItem, gantt: Gantt) => void

event_item_body_click

// Triggered when the event item body area is clicked.
(event: Event, eventItem: GanttEventItem, gantt: Gantt) => void

event_item_body_mouse_enter

// Triggered when mouse enters the event item body area
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_body_mouse_over

// Triggered when mouse hovers over the event item body area
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_body_mouse_move

// Triggered when mouse moves in the event item body area
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_body_mouse_leave

// Triggered when mouse leaves the event item body area
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_left_resize_mouse_down

// Triggered when the left resize area of the event item is clicked.
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_right_resize_mouse_down

// Triggered when the right resize area if event item is clicked.
(data: { event: MouseEvent, itemRender: EventItemRender }, gantt: Gantt) => void

event_item_add

// Triggered when an event item is added to the Gantt.
(data: { item: EventItemRender, row: GanttItem, rowIndex: number }, gantt: Gantt) => void

event_item_delete

// Triggered when an event item is deleted from the Gantt.
(data: { event: GanttEventItem, item: GanttItem, parent: GanttItem }, gantt: Gantt) => void

row_click

// Triggered when a row is clicked.
(evt: Event, data: { row: GanttItem, rowIndex: number }, gantt: Gantt) => void

row_delete

// Triggered when a row is deleted from the Gantt.
(row: GanttItem, gantt: Gantt) => void