@timelinekit/core

The framework-agnostic engine behind TimelineKit — a suite of high-performance, canvas-rendered scheduling components for JavaScript and TypeScript.

Note: This package is not intended to be used directly. Install a framework wrapper instead:

• React: @timelinekit/react
• Angular: @timelinekit/angular

@timelinekit/core is included automatically as a dependency and re-exports all types through the wrapper packages.

Components

Gantt Chart

Interactive project timeline with canvas rendering for 60 fps performance.

• Tasks, summary tasks, and milestones
• Four dependency types (FS, SS, FF, SF) with lag/lead
• Critical path analysis (CPM)
• Baseline comparison with visual overlay
• Resource management with overallocation detection
• Working calendars (business days, holidays, shifts)
• Markers and today line
• Zoom levels from hours to years
• Drag & drop editing with undo/redo
• Filtering and keyboard navigation

Resource Scheduler

Visual resource planning with drag-and-drop event scheduling.

• Hierarchical resource lanes
• Automatic multi-lane event stacking
• Frozen (pinned) resource rows
• Conflict detection for overlapping events
• Time scales from hours to months
• Custom event rendering
• Drag & drop editing with undo/redo
• Filtering and keyboard navigation

Event Calendar

Full-featured calendar with month, week, day, and agenda views.

• Recurring events (RFC 5545 RRULE with exceptions)
• Multiple color-coded calendars
• 9 built-in item types (Meeting, Appointment, Task, Deadline, Holiday, Birthday, Reminder, Resource Booking, Availability Block)
• iCalendar (.ics) import and export
• Mini calendar and sidebar
• All-day events
• Custom event rendering
• Drag & drop editing with undo/redo
• Keyboard navigation

Quick Start

React

npm install @timelinekit/react @timelinekit/core

import { useRef, useEffect } from 'react';
import { GanttChart, GanttChartRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

const data = {
  tasks: [
    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
  ],
  links: [
    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
  ],
};

function App() {
  const ref = useRef<GanttChartRef>(null);

  useEffect(() => {
    ref.current!.load(JSON.stringify(data));
    ref.current!.zoomToFit();
  }, []);

  return <GanttChart ref={ref} style={{ height: '600px' }} />;
}

Angular

npm install @timelinekit/angular @timelinekit/core

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { GanttChart } from '@timelinekit/angular';

const data = {
  tasks: [
    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
  ],
  links: [
    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
  ],
};

@Component({
  imports: [GanttChart],
  template: `<gk-gantt-chart #gantt style="height: 600px" />`,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('gantt') gantt!: GanttChart;

  ngAfterViewInit() {
    this.gantt.load(JSON.stringify(data));
    this.gantt.zoomToFit();
  }
}

Styles

Import the combined stylesheet for all components:

import '@timelinekit/core/styles';

Or import individual component styles for smaller bundles:

import '@timelinekit/core/styles/gc';    // Gantt Chart
import '@timelinekit/core/styles/rs';    // Resource Scheduler
import '@timelinekit/core/styles/ec';    // Event Calendar

SCSS sources are also available for custom builds:

@use '@timelinekit/core/styles/scss';        // All components
@use '@timelinekit/core/styles/gc/scss';     // Gantt Chart
@use '@timelinekit/core/styles/rs/scss';     // Resource Scheduler
@use '@timelinekit/core/styles/ec/scss';     // Event Calendar

Themes

Four built-in themes for each component, fully customizable via CSS variables:

| Theme | Gantt Chart | Resource Scheduler | Event Calendar | |-------|-------------|--------------------|----------------| | Light | LightGanttChartTheme | LightSchedulerTheme | LightEventCalendarTheme | | Dark | DarkGanttChartTheme | DarkSchedulerTheme | DarkEventCalendarTheme | | Modern | ModernGanttChartTheme | ModernSchedulerTheme | — | | Classic | ClassicGanttChartTheme | ClassicSchedulerTheme | — |

Localization

English is included by default. Additional locales are available as separate imports:

import { csLocale } from '@timelinekit/core/locales/cs';

| Code | Language | Code | Language | |------|----------|------|----------| | cs | Czech | ko | Korean | | de | German | nl | Dutch | | es | Spanish | pl | Polish | | fr | French | pt | Portuguese | | it | Italian | ru | Russian | | ja | Japanese | sv | Swedish | | | | zh | Chinese |

Export

All components support export to multiple formats (requires optional peer dependencies for some formats):

• PNG — requires html2canvas (Event Calendar only; Gantt and Scheduler use built-in canvas export)
• PDF — requires jspdf (and html2canvas for Event Calendar)
• CSV — built-in
• Excel — requires exceljs
• ICS — Event Calendar only, built-in

Licensing

TimelineKit uses a commercial license with a free tier.

Free — All components and all features with a "TimelineKit.com" watermark. No license key required.

Pro — Remove the watermark and get email support. Licenses are per-developer and perpetual for the major version.

import { setLicense } from '@timelinekit/core';

setLicense('your-license-key');

See pricing for details.

Resources

• Documentation
• Live Demos
• Examples
• Support

License

See LICENSE for details.