README

ngx-gantt

npm bundle size (scoped)

A modern and powerful gantt component for Angular

Note about this project

This project is a fork of https://github.com/worktile/ngx-gantt.git with the following changes:

The start of the week is Sunday and not Monday
The format of the dates have been updated from MM-dd-yyyy to dd.MM.yyyy
There are 4 new time resolutions (for a total of 9 resolutions): Hour, 30-Minutes, 5-minutes , 1-Minute
The original project was in Chinese, this fork has been translated to English

Installation

$ npm i @tchvu3/angular-gantt --save
# or
$ yarn add @tchvu3/angular-gantt

Demo

Try the live demo (The original Chinese example site)

Usage

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

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

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

}

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

{
  "styles": ["node_modules/@tchvu3/angular-gantt/main.bundle.scss"]
}

@import '~@tchvu3/angular-gantt/main.bundle.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 https://github.com/tchvu3/ngx-gantt.git
$ cd ngx-gantt
$ npm install
$ npm run start

LICENSE

MIT License

Usage no npm install needed!