nelsonBlack / ngx-gantt

A modern and powerful gantt chart component for Angular

ngx-gantt

A modern and powerful gantt component for Angular

Installation

$ npm i @worktile/gantt html2canvas --save
# or
$ yarn add @worktile/gantt html2canvas

Demo

Try out our live demo

Usage

1. Import the NgxGanttModule to use into your app.module.ts

import { NgModule } from '@angular/core';
import { NgxGanttModule } from '@worktile/gantt';

@NgModule({
  ...
  imports: [ NgxGanttModule, ... ]
  ...
})
export class AppModule {

}

2. Import style file in angular.json or import style in your style.scss

{
  "styles": ["node_modules/@worktile/gantt/styles/index.scss"]
}

@use '@worktile/gantt/styles/index.scss';

3. Using component

component.html

<ngx-gantt #gantt [items]="items">
  <ngx-gantt-table>
    <ngx-gantt-column name="Title" width="300px">
      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>

component.ts

@Component({
  selector: 'app-gantt-example',
  templateUrl: './gantt.component.html'
})
export class AppGanttExampleComponent {
  items: GanttItem[] = [
    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197 },
    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597 }
  ];

  constructor() {}
}

See Getting Started for more details.

Development

$ git clone [e-mail]:worktile/ngx-gantt.git
$ cd ngx-gantt
$ npm ci
$ npm run start

Roadmap

• virtual scrolling

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Walker 💬 💻 🎨 📖 🚇 🚧 📆 👀

zhangwen 💻

cmq 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT License