Angular Gantt Chart Component (DayPilot)

Tutorials

DayPilot Editions

The Angular Gantt Chart component is included in DayPilot Pro for JavaScript.

Online Configurator

angular gantt chart configurator

Create a new Angular 6 project with the Gantt Chart component pre-configured using Gantt Chart UI Builder online applicaiton.

NPM

DayPilot Pro for Angular NPM package is hosted at npm.daypilot.org.

Trial version:

  • https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz

Full version:

  • https://npm.daypilot.org/daypilot-pro-angular/{api-key}/x.y.zzzz.tar.gz

Licensed customers can get the API key in the customer area.

Package Installation

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz --save

You can get a link to the latest release at npm.daypilot.org.

Module Import

Import DayPilotModule from "daypilot-pro-angular" package:

// ...import {DayPilotModule} from "daypilot-pro-angular";

@NgModule({
  imports:      [
    // ...
    DayPilotModule
  ],
  // ...
})
export class GanttModule { }

Displaying the Gantt Chart

As soon as DayPilotModule is imported you can insert the Gantt Chart in the component template usig <daypilot-gantt> tag:

@Component({
  template: `<daypilot-gantt></daypilot-gantt>`,
  // ...
})
export class GanttComponent {
  // ...
}

Gantt Chart Configuration

Use [config] attribute to specify the configuration object:

<daypilot-gantt [config]="config"></daypilot-gantt>

You can use the config object to specify custom properties and event handlers.

Example:

import {Component} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day"
  }

}

Note: The current change detection implementation requires that the config object is serializable using JSON.stringify().

Loading Task Data

Use .tasks property of the config object to specify the array with task data. The Gantt chart expects an array of objects with structure described in DayPilot.Task.data documentation.

Example:

import {Component} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttComponent {

  config: any = {
    // ...
    tasks: [
      {start: "2017-11-05", end: "2017-11-07", id: 1, text: "Task 1", complete: 50}
    ]
  }
}

Note: The current change detection implementation requires that the object is serializable using JSON.stringify().

Event Handlers

You can specify the event handlers using the "config" object.

Example that specifies onTaskMoved event handler:

import {Component} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttComponent {

  config: any = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day",
    start: "2017-11-01",
    days: 30,
    tasks: [
      {start: "2017-11-05", end: "2017-11-07", id: 1, text: "Task 1", complete: 50}
    ],
    onTaskMoved: args => {
      console.log("Task moved");
    }
  }


}

DayPilot.Gantt Object

The Angular Gantt chart component works with two Gantt objects:

  • DayPilotGanttComponent => Angular 2+ Component (<daypilot-gantt> tag)

  • DayPilot.Gantt => Underlying plain JavaScript object (DayPilot.Gantt class)

You can get a reference to DayPilotGanttComponent using a hash attribute:

Template (HTML)

<daypilot-gantt #gantt></daypilot-gantt>

Component (TypeScript)

import {Component, ViewChild} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt #gantt></daypilot-gantt>`
})
export class GanttComponent {

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

}

This object exposes the underlying DayPilot.Gantt object using a "control" property:

import {Component, ViewChild} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt #gantt></daypilot-gantt>`
})
export class GanttComponent {

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

  message() {
    this.gantt.control.message("Welcome!");
  }  

}

DayPilot.Scheduler Object

DayPilot Gantt uses the Scheduler control internally. If necessary, you can access the underlying DayPilot.Scheduler object using DayPilot.Gantt.scheduler property:

import {Component, ViewChild} from '@angular/core';
import {DayPilotGanttComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-gantt-example',
  template: `<daypilot-gantt #gantt></daypilot-gantt>`
})
export class GanttComponent {

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

  message() {
    const ganttControl = this.gantt.control as any;
    ganttControl.scheduler.message("Welcome!");
  }  

}

Calling DayPilot.Gantt Methods

You can use the DayPilot.Gantt API directly. In order to call the Gantt control methods you need to get the DayPilot.Gantt object reference (using "control" property).