Features

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Project Structure

This application displays DayPilot Gantt Chart control in an Angular 4 application.

The reusable part of the project can be found in src/app/gantt directory:

  • gantt.module.ts  (module that wraps the Gantt chart functionality)
  • gantt.component.ts (customized Gantt chart component)
  • data.service.ts (dummy backend service)

For a more advanced sample that shows more features and includes a PHP backend please see the following tutorial:

Dependencies

This project uses "daypilot-pro-angular" package which is available at npm.daypilot.org.

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/8.3.2869.tar.gz --save

This package includes DayPilotModule which needs to be imported in gantt.module.ts:

import {DataService} from "./data.service";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {GanttComponent} from "./gantt.component";
import {DayPilotModule} from "daypilot-pro-angular";

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpModule,
    DayPilotModule
  ],
  declarations: [
    GanttComponent
  ],
  exports:      [ GanttComponent ],
  providers:    [ DataService ]
})
export class GanttModule { }

Gantt Chart Configuration

angular4-gantt-chart-configuration.png

The HTML template of GanttComponent class creates the Gantt chart control using <daypilot-gantt> tag.

gantt.component.ts

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilotGanttComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

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

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

  config: any = {
    startDate: "2017-05-01",
    days: 31
  };

}

The configuration object ("config") is set using config attribute. You can use the configuraiton object to specify the Gantt chart properties and event handlers.

This sample only specifies the time range using "startDate" and "days" properties.

Loading Tasks

angular4-gantt-chart-loading-tasks.png

The Angular project loads the Gantt tasks using a DataService class which is a dummy data service implementation. Normally you'll want to update the DataService to load the task data from a remote JSON endpoint.

The task data objects should follow the format specified in DayPilot.Task.data property documentation.

gantt.component.ts

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilotGanttComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

@Component({
  selector: 'gantt-component',
  template: `<daypilot-gantt [config]="config" #gantt></daypilot-gantt>`,
  styles: [``]
})
export class GanttComponent implements AfterViewInit {

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

  config: any = {
    startDate: "2017-05-01",
    days: 31,
    tasks: []
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getTasks().subscribe(result => {
      this.config.tasks = result;
    });
  }

}

data.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
import {DayPilot} from 'daypilot-pro-angular';

@Injectable()
export class DataService {

  tasks: any[] = [
    {
      id: "1",
      text: "Group 1",
      children: [
        {
          id: "2",
          start: "2017-05-02T00:00:00",
          end: "2017-05-08T00:00:00",
          text: "Task 1",
          complete: 45
        },
        {
          id: "3",
          start: "2017-05-05T00:00:00",
          end: "2017-05-10T00:00:00",
          text: "Task 2",
          complete: 5
        },
        {
          id: "4",
          start: "2017-05-10T00:00:00",
          type: "Milestone",
          text: "Milestone 1"
        }
      ]
    },
    {
      id: "5",
      start: "2017-05-10T00:00:00",
      end: "2017-05-15T00:00:00",
      text: "Task 3",
      complete: 0
    }
  ];


  constructor(private http : Http){
  }

  getTasks(): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.tasks);
      }, 200);
    });

    // return this.http.get("/api/tasks").map((response:Response) => response.json());
  }

}

Loading Links

angular4-gantt-chart-loading-links.png

The links that show task dependencies are loaded in a similar way. The DataService simply returns a local array of link data objects.

gantt.component.ts

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilotGanttComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

@Component({
  selector: 'gantt-component',
  template: `<daypilot-gantt [config]="config" #gantt></daypilot-gantt>`,
  styles: [``]
})
export class GanttComponent implements AfterViewInit {

  @ViewChild("gantt")
  gantt: DayPilotGanttComponent;

  config: any = {
    startDate: "2017-05-01",
    days: 31,
    tasks: [],
    links: []
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getTasks().subscribe(result => {
      this.config.tasks = result;
    });
    this.ds.getLinks().subscribe(result => {
      this.config.links = result;
    });
  }

}

data.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
import {DayPilot} from 'daypilot-pro-angular';

@Injectable()
export class DataService {

  // ...

  links: any[] = [
    {
      from: "1",
      to: "5",
      type: "FinishToStart"
    }
  ];

  constructor(private http : Http){
  }

  // ...

  getLinks(): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.links);
      }, 200);
    });

    // return this.http.get("/api/tasks").map((response:Response) => response.json());
  }

}