TimelineKit

API Reference

For full TypeScript definitions and detailed signatures, see the generated API documentation.

Properties

data: SchedulerDataAll resources and events (read-only).
sheet: SchedulerSheetThe sheet (table) component (read-only).
selectedEvents: SchedulerEvent[]Currently selected events.
selectedEvent: SchedulerEvent | nullLast selected event (or null).
selectedResources: SchedulerResource[]Currently selected resources in the sheet (read-only).
settings: ResourceSchedulerSettingsSettings object — access theme, locale (read-only).
events: ResourceSchedulerEventsEvent emitters (read-only).
canEdit: booleanEnable/disable editing. Default: true.
autoZoomToFit: booleanAutomatically zoom to fit when projectTimeline is set or data is loaded. Default: true.
showGridLines: booleanShow/hide grid lines on the chart. Default: true.
showTodayLine: booleanShow/hide today indicator line. Default: true.
markers: Marker[]Timeline markers.
filter: SchedulerResourceFilterFn | nullActive resource filter function.
projectTimeline: DateRangeProject start/end date bounds.
workingCalendar: WorkingCalendarWorking calendar (get/set).
eventRendering: SchedulerEventRenderFn | nullCustom event rendering function. Return true if handled, false for default.
eventTooltip: SchedulerEventTooltipFn | nullCustom tooltip content function. Return content or null to hide.
canUndo$: BehaviorSubject<boolean>Whether undo is available (observable, read-only).
canRedo$: BehaviorSubject<boolean>Whether redo is available (observable, read-only).

Methods

load(json: string): voidLoad data from a JSON string.
save(): stringSerialize current state to a JSON string.
zoomIn(): booleanZoom in. Returns false if already at max zoom.
zoomOut(): booleanZoom out. Returns false if already at min zoom.
zoomToFit(events?: SchedulerEvent[]): voidFit the view to show all (or specified) events.
scrollToDate(date: Date): voidScroll the timeline to a specific date.
scrollToResource(resource: SchedulerResource): voidScroll to make a resource row visible.
scrollToEvent(event: SchedulerEvent): voidScroll to make an event visible (horizontal + vertical).
goToProjectStart(): voidScroll to the project start date.
freezeResource(resource: SchedulerResource): voidPin a resource to the top.
unfreezeResource(resource: SchedulerResource): voidUnpin a resource from the top.
isResourceFrozen(resource: SchedulerResource): booleanCheck if a resource is pinned.
sortResources(compareFn: (a, b) => number): voidSort resources using a comparison function.
undo(): voidUndo the last action.
redo(): voidRedo the last undone action.
copy(): Promise<void>Copy selected events to clipboard.
cut(): Promise<void>Cut selected events to clipboard.
paste(): Promise<SchedulerEventsPastedEventArgs | null>Paste events from clipboard.
addMarker(marker: Marker): voidAdd a timeline marker.
removeMarker(marker: Marker): voidRemove a timeline marker.
clearMarkers(): voidRemove all timeline markers.
clearFilter(): voidClear the active resource filter.
saveColumns(): ColumnState[]Save column layout (widths, order, visibility).
loadColumns(states: ColumnState[]): voidRestore column layout.
exportToImage(): Promise<Blob>Export chart as PNG.
exportToCsv(options?: SchedulerCsvExportOptions): stringExport as CSV string.
exportToPdf(options?: SchedulerPdfExportOptions): Promise<Blob>Export as PDF (requires jspdf).
exportToExcel(options?: SchedulerExcelExportOptions): Promise<Blob>Export as Excel (requires exceljs).
destroy(): voidDestroy the scheduler and release all DOM resources.

Events

All events are RxJS Subject instances. Subscribe via scheduler.events.eventName$.subscribe(callback).

resourceAdded$: Subject<SchedulerResourceEventArgs>A resource was added.
resourceChanged$: Subject<SchedulerResourceEventArgs>A resource property changed.
resourceRemoved$: Subject<SchedulerResourceEventArgs>A resource was removed.
eventAdded$: Subject<SchedulerEventEventArgs>An event was added.
eventChanged$: Subject<SchedulerEventEventArgs>An event property changed.
eventRemoved$: Subject<SchedulerEventEventArgs>An event was removed.
eventSelected$: Subject<SchedulerEventEventArgs | null>Event selection changed. Null when deselected.
eventClick$: Subject<SchedulerEventEventArgs>An event bar was clicked.
eventDblClick$: Subject<SchedulerEventEventArgs>An event bar was double-clicked.
eventMoving$: Subject<SchedulerEventMovingArgs>An event is being moved (cancelable).
eventResizing$: Subject<SchedulerEventResizingArgs>An event is being resized (cancelable).
eventCreating$: Subject<SchedulerEventCreatingArgs>A new event is being created by dragging (cancelable).
eventDeleting$: Subject<SchedulerEventDeletingArgs>An event is about to be deleted (cancelable).
eventsPasted$: Subject<SchedulerEventsPastedEventArgs>Events were pasted from clipboard.
chartContextMenu$: Subject<SchedulerChartContextMenuArgs>Right-click on chart area.
sheetRowContextMenu$: Subject<SchedulerRowContextMenuEventArgs>Right-click on sheet row.
sheetCellEditing$: Subject<boolean>Cell editing started (true) or ended (false).
projectTimeline$: Subject<DateRange>Project timeline bounds changed.
undone$: Subject<void>An undo was performed.
redone$: Subject<void>A redo was performed.

Types & Enums

SchedulerResource

A schedulable resource (person, room, equipment, etc.) displayed as a row in the scheduler.

id: stringUnique identifier (read-only, auto-generated).
name: stringDisplay name.
type: string | nullResource type (e.g. 'person', 'room', 'equipment', 'vehicle', or custom). Default: null.
color: ColorValue | nullColor index or custom ColorDefinition. Events inherit this color unless overridden. Default: null.
avatarUrl: string | nullURL to an avatar image displayed in the sheet row. Default: null.
filtered: booleanWhether excluded by the active filter (read-only).

Also supports custom properties via addProperty(), getPropertyValue(), setPropertyValue(), removeProperty().

SchedulerEvent

A time block assigned to a resource.

id: stringUnique identifier (read-only, auto-generated).
resourceId: stringID of the owning resource. Change to move the event to a different resource.
name: stringDisplay name.
startTime: DateStart date/time.
endTime: DateEnd date/time.
color: ColorValue | nullColor override. When set, overrides the resource's color. Default: null.
data: anyArbitrary user data. Not serialized.
durationMs: numberDuration in milliseconds (read-only, computed).
durationHours: numberDuration in hours (read-only, computed).

Also supports custom properties via addProperty(), getPropertyValue(), setPropertyValue(), removeProperty().

SchedulerData

Central data store holding all resources and events. Accessed via scheduler.data.

Resource methods

resourcesLength: numberTotal number of resources (read-only).
getResource(index: number): SchedulerResourceGet a resource by index.
getResourceById(id: string): SchedulerResource | nullFind a resource by ID.
addResource(resource: SchedulerResource): voidAdd a resource.
insertResource(index: number, resource: SchedulerResource): voidInsert a resource at a specific index.
removeResource(resource: SchedulerResource): voidRemove a resource and all its events.
removeResources(resources: SchedulerResource[]): voidRemove multiple resources and all their events.
moveResource(resource: SchedulerResource, toIndex: number): voidMove a resource to a new index position.

Event methods

eventsLength: numberTotal number of events (read-only).
getEvent(index: number): SchedulerEventGet an event by index.
getEventById(id: string): SchedulerEvent | nullFind an event by ID.
getEventsForResource(resourceId: string): SchedulerEvent[]Get all events for a resource.
addEvent(event: SchedulerEvent): voidAdd an event.
removeEvent(event: SchedulerEvent): voidRemove an event.

Layout & conflict detection

getLaneCount(resourceId: string): numberNumber of parallel lanes needed for a resource's overlapping events.
getEventLane(event: SchedulerEvent): number0-based lane index of an event.
getOverlappingEvents(resourceId, startTime, endTime, excludeEventId?): SchedulerEvent[]Events that overlap a time range on a resource.
hasConflict(event: SchedulerEvent): booleanWhether an event overlaps with any other on the same resource.

ResourceSchedulerSettings

Scheduler settings — theme and locale configuration.

theme: BaseThemeCurrent theme.
locale: TimelineKitLocaleCurrent locale.

Event args types

SchedulerResourceEventArgs

resource: SchedulerResourceThe resource that triggered the event.

SchedulerEventEventArgs

event: SchedulerEventThe event that triggered the notification.

SchedulerEventMovingArgs (cancelable)

event: SchedulerEventThe event being moved.
newStartTime: DateProposed new start time.
newEndTime: DateProposed new end time.
newResource: SchedulerResourceProposed target resource.
cancel: booleanSet to true to cancel the move.
adjustedStartTime?: DateSet to override the start time (e.g. for snapping).
adjustedEndTime?: DateSet to override the end time.

SchedulerEventResizingArgs (cancelable)

event: SchedulerEventThe event being resized.
edge: 'left' | 'right'Which edge is being dragged.
newStartTime: DateProposed new start time.
newEndTime: DateProposed new end time.
cancel: booleanSet to true to cancel the resize.
adjustedStartTime?: DateSet to override the start time.
adjustedEndTime?: DateSet to override the end time.

SchedulerEventCreatingArgs (cancelable)

resource: SchedulerResourceThe target resource.
startTime: DateProposed start time.
endTime: DateProposed end time.
cancel: booleanSet to true to cancel creation.
adjustedStartTime?: DateSet to override the start time.
adjustedEndTime?: DateSet to override the end time.

SchedulerEventDeletingArgs (cancelable)

event: SchedulerEventThe event being deleted.
cancel: booleanSet to true to cancel the deletion.

SchedulerChartContextMenuArgs

date: DateDate at the click position.
resource: SchedulerResourceResource at the click position.
event: SchedulerEvent | nullEvent at the click position, or null.
mouseEvent: MouseEventThe native mouse event.

SchedulerRowContextMenuEventArgs

selectedResources: SchedulerResource[]Currently selected resources.
mouseEvent: MouseEventThe native mouse event.

SchedulerEventsPastedEventArgs

events: SchedulerEvent[]Newly created events.
eventIdMap: Map<string, SchedulerEvent>Maps original event ID → newly created copy.

Custom rendering & tooltips

SchedulerEventRenderArgs

event: SchedulerEventThe event being rendered.
resource: SchedulerResourceThe resource the event belongs to.
rect: RectPosition and size of the event bar in canvas pixels (x, y, width, height).
ctx: CanvasRenderingContext2DThe canvas 2D rendering context.
isSelected: booleanWhether the event is currently selected.
color: ColorValueResolved color for the event.

SchedulerEventRenderFn

(args: SchedulerEventRenderArgs) => booleanReturn true if you handled the rendering, false to fall back to default.

SchedulerEventTooltipArgs

event: SchedulerEventThe event being hovered.
resource: SchedulerResourceThe resource the event belongs to.

SchedulerEventTooltipContent

title: stringTooltip title (typically the event name).
lines: { name: string; value: string }[]Key-value lines displayed below the title.

SchedulerEventTooltipFn

(args: SchedulerEventTooltipArgs) => SchedulerEventTooltipContent | nullReturn content to display, or null to hide the tooltip.

Export options

SchedulerCsvExportOptions

delimiter?: ',' | ';' | '\t'Column delimiter. Default: ','.
includeHeaders?: booleanInclude column headers. Default: true.
includeResources?: booleanInclude a separate resources section. Default: false.

SchedulerPdfExportOptions

pageSize?: 'A4' | 'A3' | 'Letter' | 'Legal'Page format. Default: 'A4'.
orientation?: 'portrait' | 'landscape'Page orientation. Default: 'landscape'.
margin?: { top, right, bottom, left }Page margins in mm. Default: 10mm on all sides.
header?: string | ((page, total) => string)Header text on each page.
footer?: string | ((page, total) => string)Footer text on each page.
includeSheet?: booleanInclude the sheet (left panel). Default: true.
includeChart?: booleanInclude the chart (timeline). Default: true.
quality?: numberImage quality (0–1). Default: 1.
fitToSinglePage?: booleanExport as a single page. Default: false.

SchedulerExcelExportOptions

eventsSheetName?: stringName of the events sheet. Default: locale-dependent ('Events').
includeResourcesSheet?: booleanInclude a sheet with resources. Default: true.
includeFormatting?: booleanApply cell formatting (bold headers, column widths). Default: true.

Shared types

These types are shared with the Gantt Chart component.

ResourceType (constants)

ResourceType.Person'person'
ResourceType.Room'room'
ResourceType.Equipment'equipment'
ResourceType.Vehicle'vehicle'

Marker

date: DateDate position of the marker line.
label?: stringOptional text label.
color?: stringCSS color string.
lineWidth?: numberWidth of the marker line in pixels.
lineStyle?: 'solid' | 'dashed' | 'dotted'Dash style of the marker line.

DateRange

startDate: DateStart date of the range.
endDate: DateEnd date of the range.

ColumnState

code: stringColumn identifier.
width: numberColumn width in pixels.
isVisible: booleanWhether the column is visible.

Rect

x: numberLeft edge in pixels.
y: numberTop edge in pixels.
width: numberWidth in pixels.
height: numberHeight in pixels.

CustomProperty

name: stringProperty name.
value: anyProperty value.

ColorValue

number | ColorDefinitionA theme color index (number) or a custom color definition.

SchedulerResourceFilterFn

(resource: SchedulerResource) => booleanReturn true to show the resource, false to hide.