Awesome
ngx-gantt
A modern and powerful gantt component for Angular
Installation
$ npm i @worktile/gantt html2canvas --save
# or
$ yarn add @worktile/gantt html2canvas
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 git@github.com:worktile/ngx-gantt.git
$ cd ngx-gantt
$ npm ci
$ npm run start
Roadmap
- virtual scrolling
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://github.com/walkerkay"><img src="https://avatars.githubusercontent.com/u/15701592?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Walker</b></sub></a><br /><a href="#question-walkerkay" title="Answering Questions">💬</a> <a href="https://github.com/walkerkay/ngx-gantt/commits?author=walkerkay" title="Code">💻</a> <a href="#design-walkerkay" title="Design">🎨</a> <a href="https://github.com/walkerkay/ngx-gantt/commits?author=walkerkay" title="Documentation">📖</a> <a href="#infra-walkerkay" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-walkerkay" title="Maintenance">🚧</a> <a href="#projectManagement-walkerkay" title="Project Management">📆</a> <a href="https://github.com/walkerkay/ngx-gantt/pulls?q=is%3Apr+reviewed-by%3Awalkerkay" title="Reviewed Pull Requests">👀</a></td> <td align="center"><a href="https://github.com/HandsomeButterball"><img src="https://avatars.githubusercontent.com/u/17664721?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zhangwen</b></sub></a><br /><a href="https://github.com/walkerkay/ngx-gantt/commits?author=HandsomeButterball" title="Code">💻</a></td> <td align="center"><a href="https://github.com/mengshuicmq"><img src="https://avatars.githubusercontent.com/u/13193164?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cmq</b></sub></a><br /><a href="https://github.com/walkerkay/ngx-gantt/commits?author=mengshuicmq" title="Code">💻</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!