DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Angular Gantt - Chart Appearance

This demo illustrates the DevExtreme Gantt component's appearance settings.

Use the properties in the demo to see how they affect the Gantt's behavior and appearance.

Backend API
<div id="demo-container"> <div class="options"> <div class="caption">Options</div> <div class="column"> <div class="option"> <div class="label">Scale Type:</div> <div class="value"> <dx-select-box [items]="[ 'auto', 'minutes', 'hours', 'days', 'weeks', 'months', 'quarters', 'years' ]" [inputAttr]="{ 'aria-label': 'Scale Type' }" [(value)]="scaleType" ></dx-select-box> </div> </div> <div class="option"> <div class="label">Title Position:</div> <div class="value"> <dx-select-box [items]="['inside', 'outside', 'none']" [inputAttr]="{ 'aria-label': 'Title Position' }" [(value)]="titlePosition" ></dx-select-box> </div> </div> <div class="option"> <div class="label">Show Resources:</div> <div class="value"> <dx-check-box [(value)]="showResources"></dx-check-box> </div> </div> <div class="option"> <div class="label">Show Dependencies:</div> <div class="value"> <dx-check-box [(value)]="showDependencies"></dx-check-box> </div> </div> </div> <div class="column"> <div class="option"> <div class="label">Start Date Range:</div> <div class="value"> <dx-date-box [(value)]="startDateRange" type="date" [inputAttr]="{ 'aria-label': 'Start Date Range' }" > </dx-date-box> </div> </div> <div class="option"> <div class="label">End Date Range:</div> <div class="value"> <dx-date-box [(value)]="endDateRange" type="date" [inputAttr]="{ 'aria-label': 'End Date Range' }" > </dx-date-box> </div> </div> <div class="option"> <div class="label">Customize Task Tooltip:</div> <div class="value"> <dx-check-box [(value)]="showCustomTaskTooltip"></dx-check-box> </div> </div> </div> </div> <div class="widget-container"> <dx-gantt taskListWidth="500" height="700" [taskTitlePosition]="titlePosition" [scaleType]="scaleType" [showResources]="showResources" [showDependencies]="showDependencies" [taskTooltipContentTemplate]=" showCustomTaskTooltip ? 'taskTooltipContentTemplate' : undefined " [taskTimeTooltipContentTemplate]=" showCustomTaskTooltip ? 'taskTimeTooltipContentTemplate' : undefined " [taskProgressTooltipContentTemplate]=" showCustomTaskTooltip ? 'taskProgressTooltipContentTemplate' : undefined " [startDateRange]="startDateRange" [endDateRange]="endDateRange" > <dxo-tasks [dataSource]="tasks"></dxo-tasks> <dxo-dependencies [dataSource]="dependencies"></dxo-dependencies> <dxo-resources [dataSource]="resources"></dxo-resources> <dxo-resource-assignments [dataSource]="resourceAssignments" ></dxo-resource-assignments> <dxi-column dataField="title" caption="Subject" [width]="300" ></dxi-column> <dxi-column dataField="start" caption="Start Date" dataType="date" ></dxi-column> <dxi-column dataField="end" caption="End Date" dataType="date" ></dxi-column> <dxo-editing [enabled]="true"></dxo-editing> <div *dxTemplate="let task of 'taskTooltipContentTemplate'" class="custom-task-edit-tooltip" > <div class="custom-tooltip-title">{{ task.title }}</div> <div class="custom-tooltip-row" ><span> Estimate: </span>{{ getTimeEstimate(task) }}<span> hours </span></div > <div class="custom-tooltip-row" ><span> Left: </span>{{ getTimeLeft(task) }}<span> hours </span></div > </div> <div *dxTemplate="let task of 'taskTimeTooltipContentTemplate'" class="custom-task-edit-tooltip" > <div class="custom-tooltip-title">Start: {{ getTime(task.start) }}</div> <div class="custom-tooltip-title">End: {{ getTime(task.end) }}</div> </div> <div *dxTemplate="let task of 'taskProgressTooltipContentTemplate'" class="custom-task-edit-tooltip" > <div class="custom-tooltip-title">{{ task.progress }}%</div> </div> </dx-gantt> </div> </div>
import { NgModule, Component, enableProdMode, ViewEncapsulation } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule } from 'devextreme-angular'; import { DxGanttModule, DxGanttTypes } from 'devextreme-angular/ui/gantt'; import { Service, Task, Dependency, Resource, ResourceAssignment, } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], providers: [Service], preserveWhitespaces: true, encapsulation: ViewEncapsulation.None, }) export class AppComponent { tasks: Task[]; dependencies: Dependency[]; resources: Resource[]; resourceAssignments: ResourceAssignment[]; scaleType: DxGanttTypes.Properties['scaleType'] = 'months'; titlePosition: DxGanttTypes.Properties['taskTitlePosition'] = 'outside'; showResources = true; showDependencies = true; showCustomTaskTooltip = true; startDateRange = new Date(2018, 11, 1); endDateRange = new Date(2019, 11, 1); constructor(service: Service) { this.tasks = service.getTasks(); this.dependencies = service.getDependencies(); this.resources = service.getResources(); this.resourceAssignments = service.getResourceAssignments(); } getTimeEstimate(task: Task) { return Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5; } getTimeLeft(task: Task) { const timeEstimate = Math.abs((task.start as unknown as number) - (task.end as unknown as number)) / 36e5; return Math.floor((100 - task.progress) / 100 * timeEstimate); } getTime(date: Date) { return date.toLocaleString(); } } @NgModule({ imports: [ BrowserModule, DxGanttModule, DxCheckBoxModule, DxSelectBoxModule, DxDateBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
#gantt { height: 700px; } .options { margin-bottom: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .column { width: 40%; display: inline-block; margin: 15px 3%; text-align: left; vertical-align: top; } .option { padding: 5px 0; } .label, .value { display: inline-block; vertical-align: middle; } .label { width: 180px; } .value { width: 45%; } .custom-task-edit-tooltip { background-color: white; color: black; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 10px 12px 12px 12px; border-radius: 3px; } .custom-task-edit-tooltip::before { border-top-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .custom-task-edit-tooltip::after { border-bottom-color: white; } .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; font-weight: 600; padding-bottom: 6px; } .custom-tooltip-row { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px; font-weight: 600; }
import { Injectable } from '@angular/core'; export class Task { id: number; parentId: number; title: string; start: Date; end: Date; progress: number; } export class Dependency { id: number; predecessorId: number; successorId: number; type: number; } export class Resource { id: number; text: string; } export class ResourceAssignment { id: number; taskId: number; resourceId: number; } const tasks: Task[] = [{ id: 1, parentId: 0, title: 'Software Development', start: new Date('2019-02-21T05:00:00.000Z'), end: new Date('2019-07-04T12:00:00.000Z'), progress: 31, }, { id: 2, parentId: 1, title: 'Scope', start: new Date('2019-02-21T05:00:00.000Z'), end: new Date('2019-02-26T09:00:00.000Z'), progress: 60, }, { id: 3, parentId: 2, title: 'Determine project scope', start: new Date('2019-02-21T05:00:00.000Z'), end: new Date('2019-02-21T09:00:00.000Z'), progress: 100, }, { id: 4, parentId: 2, title: 'Secure project sponsorship', start: new Date('2019-02-21T10:00:00.000Z'), end: new Date('2019-02-22T09:00:00.000Z'), progress: 100, }, { id: 5, parentId: 2, title: 'Define preliminary resources', start: new Date('2019-02-22T10:00:00.000Z'), end: new Date('2019-02-25T09:00:00.000Z'), progress: 60, }, { id: 6, parentId: 2, title: 'Secure core resources', start: new Date('2019-02-25T10:00:00.000Z'), end: new Date('2019-02-26T09:00:00.000Z'), progress: 0, }, { id: 7, parentId: 2, title: 'Scope complete', start: new Date('2019-02-26T09:00:00.000Z'), end: new Date('2019-02-26T09:00:00.000Z'), progress: 0, }, { id: 8, parentId: 1, title: 'Analysis/Software Requirements', start: new Date('2019-02-26T10:00:00.000Z'), end: new Date('2019-03-18T09:00:00.000Z'), progress: 80, }, { id: 9, parentId: 8, title: 'Conduct needs analysis', start: new Date('2019-02-26T10:00:00.000Z'), end: new Date('2019-03-05T09:00:00.000Z'), progress: 100, }, { id: 10, parentId: 8, title: 'Draft preliminary software specifications', start: new Date('2019-03-05T10:00:00.000Z'), end: new Date('2019-03-08T09:00:00.000Z'), progress: 100, }, { id: 11, parentId: 8, title: 'Develop preliminary budget', start: new Date('2019-03-08T10:00:00.000Z'), end: new Date('2019-03-12T09:00:00.000Z'), progress: 100, }, { id: 12, parentId: 8, title: 'Review software specifications/budget with team', start: new Date('2019-03-12T10:00:00.000Z'), end: new Date('2019-03-12T14:00:00.000Z'), progress: 100, }, { id: 13, parentId: 8, title: 'Incorporate feedback on software specifications', start: new Date('2019-03-13T05:00:00.000Z'), end: new Date('2019-03-13T14:00:00.000Z'), progress: 70, }, { id: 14, parentId: 8, title: 'Develop delivery timeline', start: new Date('2019-03-14T05:00:00.000Z'), end: new Date('2019-03-14T14:00:00.000Z'), progress: 0, }, { id: 15, parentId: 8, title: 'Obtain approvals to proceed (concept, timeline, budget)', start: new Date('2019-03-15T05:00:00.000Z'), end: new Date('2019-03-15T09:00:00.000Z'), progress: 0, }, { id: 16, parentId: 8, title: 'Secure required resources', start: new Date('2019-03-15T10:00:00.000Z'), end: new Date('2019-03-18T09:00:00.000Z'), progress: 0, }, { id: 17, parentId: 8, title: 'Analysis complete', start: new Date('2019-03-18T09:00:00.000Z'), end: new Date('2019-03-18T09:00:00.000Z'), progress: 0, }, { id: 18, parentId: 1, title: 'Design', start: new Date('2019-03-18T10:00:00.000Z'), end: new Date('2019-04-05T14:00:00.000Z'), progress: 80, }, { id: 19, parentId: 18, title: 'Review preliminary software specifications', start: new Date('2019-03-18T10:00:00.000Z'), end: new Date('2019-03-20T09:00:00.000Z'), progress: 100, }, { id: 20, parentId: 18, title: 'Develop functional specifications', start: new Date('2019-03-20T10:00:00.000Z'), end: new Date('2019-03-27T09:00:00.000Z'), progress: 100, }, { id: 21, parentId: 18, title: 'Develop prototype based on functional specifications', start: new Date('2019-03-27T10:00:00.000Z'), end: new Date('2019-04-02T09:00:00.000Z'), progress: 100, }, { id: 22, parentId: 18, title: 'Review functional specifications', start: new Date('2019-04-02T10:00:00.000Z'), end: new Date('2019-04-04T09:00:00.000Z'), progress: 30, }, { id: 23, parentId: 18, title: 'Incorporate feedback into functional specifications', start: new Date('2019-04-04T10:00:00.000Z'), end: new Date('2019-04-05T09:00:00.000Z'), progress: 0, }, { id: 24, parentId: 18, title: 'Obtain approval to proceed', start: new Date('2019-04-05T10:00:00.000Z'), end: new Date('2019-04-05T14:00:00.000Z'), progress: 0, }, { id: 25, parentId: 18, title: 'Design complete', start: new Date('2019-04-05T14:00:00.000Z'), end: new Date('2019-04-05T14:00:00.000Z'), progress: 0, }, { id: 26, parentId: 1, title: 'Development', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-05-07T12:00:00.000Z'), progress: 42, }, { id: 27, parentId: 26, title: 'Review functional specifications', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-08T14:00:00.000Z'), progress: 100, }, { id: 28, parentId: 26, title: 'Identify modular/tiered design parameters', start: new Date('2019-04-09T05:00:00.000Z'), end: new Date('2019-04-09T14:00:00.000Z'), progress: 100, }, { id: 29, parentId: 26, title: 'Assign development staff', start: new Date('2019-04-10T05:00:00.000Z'), end: new Date('2019-04-10T14:00:00.000Z'), progress: 100, }, { id: 30, parentId: 26, title: 'Develop code', start: new Date('2019-04-11T05:00:00.000Z'), end: new Date('2019-05-01T14:00:00.000Z'), progress: 49, }, { id: 31, parentId: 26, title: 'Developer testing (primary debugging)', start: new Date('2019-04-16T12:00:00.000Z'), end: new Date('2019-05-07T12:00:00.000Z'), progress: 24, }, { id: 32, parentId: 26, title: 'Development complete', start: new Date('2019-05-07T12:00:00.000Z'), end: new Date('2019-05-07T12:00:00.000Z'), progress: 0, }, { id: 33, parentId: 1, title: 'Testing', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-06-13T12:00:00.000Z'), progress: 23, }, { id: 34, parentId: 33, title: 'Develop unit test plans using product specifications', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-11T14:00:00.000Z'), progress: 100, }, { id: 35, parentId: 33, title: 'Develop integration test plans using product specifications', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-11T14:00:00.000Z'), progress: 100, }, { id: 36, parentId: 33, title: 'Unit Testing', start: new Date('2019-05-07T12:00:00.000Z'), end: new Date('2019-05-28T12:00:00.000Z'), progress: 0, }, { id: 37, parentId: 36, title: 'Review modular code', start: new Date('2019-05-07T12:00:00.000Z'), end: new Date('2019-05-14T12:00:00.000Z'), progress: 0, }, { id: 38, parentId: 36, title: 'Test component modules to product specifications', start: new Date('2019-05-14T12:00:00.000Z'), end: new Date('2019-05-16T12:00:00.000Z'), progress: 0, }, { id: 39, parentId: 36, title: 'Identify anomalies to product specifications', start: new Date('2019-05-16T12:00:00.000Z'), end: new Date('2019-05-21T12:00:00.000Z'), progress: 0, }, { id: 40, parentId: 36, title: 'Modify code', start: new Date('2019-05-21T12:00:00.000Z'), end: new Date('2019-05-24T12:00:00.000Z'), progress: 0, }, { id: 41, parentId: 36, title: 'Re-test modified code', start: new Date('2019-05-24T12:00:00.000Z'), end: new Date('2019-05-28T12:00:00.000Z'), progress: 0, }, { id: 42, parentId: 36, title: 'Unit testing complete', start: new Date('2019-05-28T12:00:00.000Z'), end: new Date('2019-05-28T12:00:00.000Z'), progress: 0, }, { id: 43, parentId: 33, title: 'Integration Testing', start: new Date('2019-05-28T12:00:00.000Z'), end: new Date('2019-06-13T12:00:00.000Z'), progress: 0, }, { id: 44, parentId: 43, title: 'Test module integration', start: new Date('2019-05-28T12:00:00.000Z'), end: new Date('2019-06-04T12:00:00.000Z'), progress: 0, }, { id: 45, parentId: 43, title: 'Identify anomalies to specifications', start: new Date('2019-06-04T12:00:00.000Z'), end: new Date('2019-06-06T12:00:00.000Z'), progress: 0, }, { id: 46, parentId: 43, title: 'Modify code', start: new Date('2019-06-06T12:00:00.000Z'), end: new Date('2019-06-11T12:00:00.000Z'), progress: 0, }, { id: 47, parentId: 43, title: 'Re-test modified code', start: new Date('2019-06-11T12:00:00.000Z'), end: new Date('2019-06-13T12:00:00.000Z'), progress: 0, }, { id: 48, parentId: 43, title: 'Integration testing complete', start: new Date('2019-06-13T12:00:00.000Z'), end: new Date('2019-06-13T12:00:00.000Z'), progress: 0, }, { id: 49, parentId: 1, title: 'Training', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-06-10T12:00:00.000Z'), progress: 25, }, { id: 50, parentId: 49, title: 'Develop training specifications for end users', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-10T14:00:00.000Z'), progress: 100, }, { id: 51, parentId: 49, title: 'Develop training specifications for helpdesk support staff', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-10T14:00:00.000Z'), progress: 100, }, { id: 52, parentId: 49, title: 'Identify training delivery methodology (computer based training, classroom, etc.)', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-09T14:00:00.000Z'), progress: 100, }, { id: 53, parentId: 49, title: 'Develop training materials', start: new Date('2019-05-07T12:00:00.000Z'), end: new Date('2019-05-28T12:00:00.000Z'), progress: 0, }, { id: 54, parentId: 49, title: 'Conduct training usability study', start: new Date('2019-05-28T12:00:00.000Z'), end: new Date('2019-06-03T12:00:00.000Z'), progress: 0, }, { id: 55, parentId: 49, title: 'Finalize training materials', start: new Date('2019-06-03T12:00:00.000Z'), end: new Date('2019-06-06T12:00:00.000Z'), progress: 0, }, { id: 56, parentId: 49, title: 'Develop training delivery mechanism', start: new Date('2019-06-06T12:00:00.000Z'), end: new Date('2019-06-10T12:00:00.000Z'), progress: 0, }, { id: 57, parentId: 49, title: 'Training materials complete', start: new Date('2019-06-10T12:00:00.000Z'), end: new Date('2019-06-10T12:00:00.000Z'), progress: 0, }, { id: 58, parentId: 1, title: 'Documentation', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-05-20T09:00:00.000Z'), progress: 0, }, { id: 59, parentId: 58, title: 'Develop Help specification', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-08T14:00:00.000Z'), progress: 80, }, { id: 60, parentId: 58, title: 'Develop Help system', start: new Date('2019-04-22T10:00:00.000Z'), end: new Date('2019-05-13T09:00:00.000Z'), progress: 0, }, { id: 61, parentId: 58, title: 'Review Help documentation', start: new Date('2019-05-13T10:00:00.000Z'), end: new Date('2019-05-16T09:00:00.000Z'), progress: 0, }, { id: 62, parentId: 58, title: 'Incorporate Help documentation feedback', start: new Date('2019-05-16T10:00:00.000Z'), end: new Date('2019-05-20T09:00:00.000Z'), progress: 0, }, { id: 63, parentId: 58, title: 'Develop user manuals specifications', start: new Date('2019-04-08T05:00:00.000Z'), end: new Date('2019-04-09T14:00:00.000Z'), progress: 65, }, { id: 64, parentId: 58, title: 'Develop user manuals', start: new Date('2019-04-22T10:00:00.000Z'), end: new Date('2019-05-13T09:00:00.000Z'), progress: 0, }, { id: 65, parentId: 58, title: 'Review all user documentation', start: new Date('2019-05-13T10:00:00.000Z'), end: new Date('2019-05-15T09:00:00.000Z'), progress: 0, }, { id: 66, parentId: 58, title: 'Incorporate user documentation feedback', start: new Date('2019-05-15T10:00:00.000Z'), end: new Date('2019-05-17T09:00:00.000Z'), progress: 0, }, { id: 67, parentId: 58, title: 'Documentation complete', start: new Date('2019-05-20T09:00:00.000Z'), end: new Date('2019-05-20T09:00:00.000Z'), progress: 0, }, { id: 68, parentId: 1, title: 'Pilot', start: new Date('2019-03-18T10:00:00.000Z'), end: new Date('2019-06-24T12:00:00.000Z'), progress: 22, }, { id: 69, parentId: 68, title: 'Identify test group', start: new Date('2019-03-18T10:00:00.000Z'), end: new Date('2019-03-19T09:00:00.000Z'), progress: 100, }, { id: 70, parentId: 68, title: 'Develop software delivery mechanism', start: new Date('2019-03-19T10:00:00.000Z'), end: new Date('2019-03-20T09:00:00.000Z'), progress: 100, }, { id: 71, parentId: 68, title: 'Install/deploy software', start: new Date('2019-06-13T12:00:00.000Z'), end: new Date('2019-06-14T12:00:00.000Z'), progress: 0, }, { id: 72, parentId: 68, title: 'Obtain user feedback', start: new Date('2019-06-14T12:00:00.000Z'), end: new Date('2019-06-21T12:00:00.000Z'), progress: 0, }, { id: 73, parentId: 68, title: 'Evaluate testing information', start: new Date('2019-06-21T12:00:00.000Z'), end: new Date('2019-06-24T12:00:00.000Z'), progress: 0, }, { id: 74, parentId: 68, title: 'Pilot complete', start: new Date('2019-06-24T12:00:00.000Z'), end: new Date('2019-06-24T12:00:00.000Z'), progress: 0, }, { id: 75, parentId: 1, title: 'Deployment', start: new Date('2019-06-24T12:00:00.000Z'), end: new Date('2019-07-01T12:00:00.000Z'), progress: 0, }, { id: 76, parentId: 75, title: 'Determine final deployment strategy', start: new Date('2019-06-24T12:00:00.000Z'), end: new Date('2019-06-25T12:00:00.000Z'), progress: 0, }, { id: 77, parentId: 75, title: 'Develop deployment methodology', start: new Date('2019-06-25T12:00:00.000Z'), end: new Date('2019-06-26T12:00:00.000Z'), progress: 0, }, { id: 78, parentId: 75, title: 'Secure deployment resources', start: new Date('2019-06-26T12:00:00.000Z'), end: new Date('2019-06-27T12:00:00.000Z'), progress: 0, }, { id: 79, parentId: 75, title: 'Train support staff', start: new Date('2019-06-27T12:00:00.000Z'), end: new Date('2019-06-28T12:00:00.000Z'), progress: 0, }, { id: 80, parentId: 75, title: 'Deploy software', start: new Date('2019-06-28T12:00:00.000Z'), end: new Date('2019-07-01T12:00:00.000Z'), progress: 0, }, { id: 81, parentId: 75, title: 'Deployment complete', start: new Date('2019-07-01T12:00:00.000Z'), end: new Date('2019-07-01T12:00:00.000Z'), progress: 0, }, { id: 82, parentId: 1, title: 'Post Implementation Review', start: new Date('2019-07-01T12:00:00.000Z'), end: new Date('2019-07-04T12:00:00.000Z'), progress: 0, }, { id: 83, parentId: 82, title: 'Document lessons learned', start: new Date('2019-07-01T12:00:00.000Z'), end: new Date('2019-07-02T12:00:00.000Z'), progress: 0, }, { id: 84, parentId: 82, title: 'Distribute to team members', start: new Date('2019-07-02T12:00:00.000Z'), end: new Date('2019-07-03T12:00:00.000Z'), progress: 0, }, { id: 85, parentId: 82, title: 'Create software maintenance team', start: new Date('2019-07-03T12:00:00.000Z'), end: new Date('2019-07-04T12:00:00.000Z'), progress: 0, }, { id: 86, parentId: 82, title: 'Post implementation review complete', start: new Date('2019-07-04T12:00:00.000Z'), end: new Date('2019-07-04T12:00:00.000Z'), progress: 0, }, { id: 87, parentId: 1, title: 'Software development template complete', start: new Date('2019-07-04T12:00:00.000Z'), end: new Date('2019-07-04T12:00:00.000Z'), progress: 0, }]; const dependencies: Dependency[] = [{ id: 1, predecessorId: 3, successorId: 4, type: 0, }, { id: 2, predecessorId: 4, successorId: 5, type: 0, }, { id: 3, predecessorId: 5, successorId: 6, type: 0, }, { id: 4, predecessorId: 6, successorId: 7, type: 0, }, { id: 5, predecessorId: 7, successorId: 9, type: 0, }, { id: 6, predecessorId: 9, successorId: 10, type: 0, }, { id: 7, predecessorId: 10, successorId: 11, type: 0, }, { id: 8, predecessorId: 11, successorId: 12, type: 0, }, { id: 9, predecessorId: 12, successorId: 13, type: 0, }, { id: 10, predecessorId: 13, successorId: 14, type: 0, }, { id: 11, predecessorId: 14, successorId: 15, type: 0, }, { id: 12, predecessorId: 15, successorId: 16, type: 0, }, { id: 13, predecessorId: 16, successorId: 17, type: 0, }, { id: 14, predecessorId: 17, successorId: 19, type: 0, }, { id: 15, predecessorId: 19, successorId: 20, type: 0, }, { id: 16, predecessorId: 20, successorId: 21, type: 0, }, { id: 17, predecessorId: 21, successorId: 22, type: 0, }, { id: 18, predecessorId: 22, successorId: 23, type: 0, }, { id: 19, predecessorId: 23, successorId: 24, type: 0, }, { id: 20, predecessorId: 24, successorId: 25, type: 0, }, { id: 21, predecessorId: 25, successorId: 27, type: 0, }, { id: 22, predecessorId: 27, successorId: 28, type: 0, }, { id: 23, predecessorId: 28, successorId: 29, type: 0, }, { id: 24, predecessorId: 29, successorId: 30, type: 0, }, { id: 25, predecessorId: 31, successorId: 32, type: 0, }, { id: 26, predecessorId: 37, successorId: 38, type: 0, }, { id: 27, predecessorId: 38, successorId: 39, type: 0, }, { id: 28, predecessorId: 39, successorId: 40, type: 0, }, { id: 29, predecessorId: 40, successorId: 41, type: 0, }, { id: 30, predecessorId: 41, successorId: 42, type: 0, }, { id: 31, predecessorId: 42, successorId: 44, type: 0, }, { id: 32, predecessorId: 44, successorId: 45, type: 0, }, { id: 33, predecessorId: 45, successorId: 46, type: 0, }, { id: 34, predecessorId: 46, successorId: 47, type: 0, }, { id: 35, predecessorId: 47, successorId: 48, type: 0, }, { id: 36, predecessorId: 53, successorId: 54, type: 0, }, { id: 37, predecessorId: 54, successorId: 55, type: 0, }, { id: 38, predecessorId: 55, successorId: 56, type: 0, }, { id: 39, predecessorId: 56, successorId: 57, type: 0, }, { id: 40, predecessorId: 59, successorId: 60, type: 0, }, { id: 41, predecessorId: 60, successorId: 61, type: 0, }, { id: 42, predecessorId: 61, successorId: 62, type: 0, }, { id: 43, predecessorId: 63, successorId: 64, type: 0, }, { id: 44, predecessorId: 64, successorId: 65, type: 0, }, { id: 45, predecessorId: 65, successorId: 66, type: 0, }, { id: 46, predecessorId: 66, successorId: 67, type: 0, }, { id: 47, predecessorId: 69, successorId: 70, type: 0, }, { id: 48, predecessorId: 70, successorId: 71, type: 0, }, { id: 49, predecessorId: 71, successorId: 72, type: 0, }, { id: 50, predecessorId: 72, successorId: 73, type: 0, }, { id: 51, predecessorId: 73, successorId: 74, type: 0, }, { id: 52, predecessorId: 74, successorId: 76, type: 0, }, { id: 53, predecessorId: 76, successorId: 77, type: 0, }, { id: 54, predecessorId: 77, successorId: 78, type: 0, }, { id: 55, predecessorId: 78, successorId: 79, type: 0, }, { id: 56, predecessorId: 79, successorId: 80, type: 0, }, { id: 57, predecessorId: 80, successorId: 81, type: 0, }, { id: 58, predecessorId: 81, successorId: 83, type: 0, }, { id: 59, predecessorId: 83, successorId: 84, type: 0, }, { id: 60, predecessorId: 84, successorId: 85, type: 0, }, { id: 61, predecessorId: 85, successorId: 86, type: 0, }, { id: 62, predecessorId: 86, successorId: 87, type: 0, }]; const resources: Resource[] = [{ id: 1, text: 'Management', }, { id: 2, text: 'Project Manager', }, { id: 3, text: 'Analyst', }, { id: 4, text: 'Developer', }, { id: 5, text: 'Testers', }, { id: 6, text: 'Trainers', }, { id: 7, text: 'Technical Communicators', }, { id: 8, text: 'Deployment Team', }]; const resourceAssignments: ResourceAssignment[] = [{ id: 0, taskId: 3, resourceId: 1, }, { id: 1, taskId: 4, resourceId: 1, }, { id: 2, taskId: 5, resourceId: 2, }, { id: 3, taskId: 6, resourceId: 2, }, { id: 4, taskId: 9, resourceId: 3, }, { id: 5, taskId: 10, resourceId: 3, }, { id: 6, taskId: 11, resourceId: 2, }, { id: 7, taskId: 12, resourceId: 2, }, { id: 8, taskId: 12, resourceId: 3, }, { id: 9, taskId: 13, resourceId: 3, }, { id: 10, taskId: 14, resourceId: 2, }, { id: 11, taskId: 15, resourceId: 1, }, { id: 12, taskId: 15, resourceId: 2, }, { id: 13, taskId: 16, resourceId: 2, }, { id: 14, taskId: 19, resourceId: 3, }, { id: 15, taskId: 20, resourceId: 3, }, { id: 16, taskId: 21, resourceId: 3, }, { id: 17, taskId: 22, resourceId: 1, }, { id: 18, taskId: 23, resourceId: 1, }, { id: 19, taskId: 24, resourceId: 1, }, { id: 20, taskId: 24, resourceId: 2, }, { id: 21, taskId: 27, resourceId: 4, }, { id: 22, taskId: 28, resourceId: 4, }, { id: 23, taskId: 29, resourceId: 4, }, { id: 24, taskId: 30, resourceId: 4, }, { id: 25, taskId: 31, resourceId: 4, }, { id: 26, taskId: 34, resourceId: 5, }, { id: 27, taskId: 35, resourceId: 5, }, { id: 28, taskId: 37, resourceId: 5, }, { id: 29, taskId: 38, resourceId: 5, }, { id: 30, taskId: 39, resourceId: 5, }, { id: 31, taskId: 40, resourceId: 5, }, { id: 32, taskId: 41, resourceId: 5, }, { id: 33, taskId: 44, resourceId: 5, }, { id: 34, taskId: 45, resourceId: 5, }, { id: 35, taskId: 46, resourceId: 5, }, { id: 36, taskId: 47, resourceId: 5, }, { id: 37, taskId: 50, resourceId: 6, }, { id: 38, taskId: 51, resourceId: 6, }, { id: 39, taskId: 52, resourceId: 6, }, { id: 40, taskId: 53, resourceId: 6, }, { id: 41, taskId: 54, resourceId: 6, }, { id: 42, taskId: 55, resourceId: 6, }, { id: 43, taskId: 56, resourceId: 6, }, { id: 44, taskId: 59, resourceId: 7, }, { id: 45, taskId: 60, resourceId: 7, }, { id: 46, taskId: 61, resourceId: 7, }, { id: 47, taskId: 62, resourceId: 7, }, { id: 48, taskId: 63, resourceId: 7, }, { id: 49, taskId: 64, resourceId: 7, }, { id: 50, taskId: 65, resourceId: 7, }, { id: 51, taskId: 66, resourceId: 7, }, { id: 52, taskId: 69, resourceId: 2, }, { id: 53, taskId: 71, resourceId: 8, }, { id: 54, taskId: 72, resourceId: 8, }, { id: 55, taskId: 73, resourceId: 8, }, { id: 56, taskId: 76, resourceId: 8, }, { id: 57, taskId: 77, resourceId: 8, }, { id: 58, taskId: 78, resourceId: 8, }, { id: 59, taskId: 79, resourceId: 8, }, { id: 60, taskId: 80, resourceId: 8, }, { id: 61, taskId: 83, resourceId: 2, }, { id: 62, taskId: 84, resourceId: 2, }, { id: 63, taskId: 85, resourceId: 2, }]; @Injectable() export class Service { getTasks(): Task[] { return tasks; } getDependencies(): Dependency[] { return dependencies; } getResources(): Resource[] { return resources; } getResourceAssignments(): ResourceAssignment[] { return resourceAssignments; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/compiler': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': '../../../../bundles/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.1.7/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'devextreme/bundles/dx.all': 'npm:devextreme@24.1.7/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.13', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', 'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; return acc; }, {}), 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'tslib': 'npm:tslib@2.6.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.13/package.json', 'npm:devexpress-gantt@4.1.56/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx-gantt.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.3/bundles/zone.umd.min.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>