@tchvu3/angular-gantt
v12.3.2
Published
[![npm (scoped)](https://img.shields.io/npm/v/@tchvu3/angular-gantt)](https://www.npmjs.com/package/@tchvu3/angular-gantt) [![npm](https://img.shields.io/npm/dm/@tchvu3/angular-gantt)](https://www.npmjs.com/package/@tchvu3/angular-gantt) ![npm bundle size
Downloads
11
Readme
ngx-gantt
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
todd.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