@timelinekit/angular

Angular components for TimelineKit — high-performance, canvas-rendered scheduling components.

For a full feature overview, themes, localization, and export options, see the @timelinekit/core README.

Installation

npm install @timelinekit/angular @timelinekit/core

Requires Angular 19 or later.

Components

| Component | Import | Selector | Styles | |-----------|--------|----------|--------| | Gantt Chart | GanttChart | <gk-gantt-chart> | @timelinekit/core/dist/styles/index.css | | Resource Scheduler | ResourceScheduler | <gk-resource-scheduler> | @timelinekit/core/dist/styles/index.css | | Event Calendar | EventCalendar | <gk-event-calendar> | @timelinekit/core/dist/styles/index.css |

All components are standalone. All types from @timelinekit/core are re-exported from this package for convenience.

Quick Start

Gantt Chart

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({
  selector: 'app-root',
  imports: [GanttChart],
  template: `
    <div style="height: 600px">
      <gk-gantt-chart #gantt />
    </div>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('gantt') gantt!: GanttChart;

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

Add styles to your angular.json:

"styles": [
  "node_modules/@timelinekit/core/dist/styles/index.css",
  "src/styles.css"
]

Resource Scheduler

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ResourceScheduler, SchedulerResource, SchedulerEvent } from '@timelinekit/angular';

@Component({
  selector: 'app-root',
  imports: [ResourceScheduler],
  template: `
    <div style="height: 600px">
      <gk-resource-scheduler #scheduler />
    </div>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('scheduler') scheduler!: ResourceScheduler;

  ngAfterViewInit() {
    this.scheduler.data.addResource(new SchedulerResource('1', 'Room A'));
    this.scheduler.data.addEvent(new SchedulerEvent('e1', '1', 'Meeting', new Date('2027-01-05T09:00'), new Date('2027-01-05T10:30')));
  }
}

"styles": [
  "node_modules/@timelinekit/core/dist/styles/index.css",
  "src/styles.css"
]

Event Calendar

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

@Component({
  selector: 'app-root',
  imports: [EventCalendar],
  template: `
    <div style="height: 600px">
      <gk-event-calendar #calendar />
    </div>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('calendar') calendar!: EventCalendar;

  ngAfterViewInit() {
    this.calendar.load(JSON.stringify({
      items: [
        { id: '1', name: 'Team Standup', startTime: '2027-01-05T09:00', endTime: '2027-01-05T09:30', type: 'Meeting' },
      ],
    }));
  }
}

"styles": [
  "node_modules/@timelinekit/core/dist/styles/index.css",
  "src/styles.css"
]

API Access

Access the component API via @ViewChild:

@ViewChild('gantt') gantt!: GanttChart;

ngAfterViewInit() {
  this.gantt.load(JSON.stringify(data));
  this.gantt.zoomIn();
  this.gantt.undo();
  this.gantt.exportToImage();
}

Licensing

TimelineKit is free to use with a watermark. Purchase a license to remove it:

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

setLicense('your-license-key');

See pricing for details.

Resources

• Documentation
• Live Demos
• Examples
• Support

License

See LICENSE for details.