├── README.md ├── index.columns.html ├── index.html └── js ├── app.gantt.js └── app.js /README.md: -------------------------------------------------------------------------------- 1 | AngularJS and dhtmlxGantt 2 | -------------------------- 3 | -------------------------------------------------------------------------------- /index.columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Gantt demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
{{task.text | lowercase}}
16 |
{{task.duration}}
17 |
18 | 19 |
20 | #{{task.id}}: {{task.text | uppercase}} 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Gantt demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | #{{task.id}}: {{task.text | uppercase}} 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /js/app.gantt.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | app.directive('dhxGantt', function() { 4 | return { 5 | restrict: 'A', 6 | scope: false, 7 | transclude: true, 8 | template: '
', 9 | 10 | link:function ($scope, $element, $attrs, $controller){ 11 | //watch data collection, reload on changes 12 | $scope.$watch($attrs.data, function(collection){ 13 | gantt.clearAll(); 14 | gantt.parse(collection, "json"); 15 | }, true); 16 | 17 | //size of gantt 18 | $scope.$watch(function() { 19 | return $element[0].offsetWidth + "." + $element[0].offsetHeight; 20 | }, function() { 21 | gantt.setSizes(); 22 | }); 23 | 24 | //init gantt 25 | gantt.init($element[0]); 26 | } 27 | }; 28 | }); 29 | 30 | app.directive('ganttTemplate', ['$interpolate', function($interpolate){ 31 | return { 32 | restrict: 'AE', 33 | terminal:true, 34 | 35 | link:function($scope, $element, $attrs, $controller){ 36 | 37 | var interpolated = $interpolate($element.html()); 38 | 39 | gantt.templates[$attrs.ganttTemplate] = function(start, end, task){ 40 | return interpolated({task: task}); 41 | }; 42 | } 43 | }; 44 | }]); 45 | 46 | app.directive('ganttColumn', ['$interpolate', function($interpolate){ 47 | return { 48 | restrict: 'AE', 49 | terminal:true, 50 | 51 | link:function($scope, $element, $attrs, $controller){ 52 | var label = $attrs.label || " "; 53 | var width = $attrs.width || "*"; 54 | var align = $attrs.align || "left"; 55 | 56 | var interpolated = $interpolate($element.html()); 57 | var template = function(task) { 58 | return interpolated({ task: task }); 59 | }; 60 | 61 | var config = { template:template, label:label, width:width, align:align }; 62 | 63 | if (!gantt.config.columnsSet) 64 | gantt.config.columnsSet = gantt.config.columns = []; 65 | 66 | if (!gantt.config.columns.length) 67 | config.tree = true; 68 | gantt.config.columns.push(config); 69 | 70 | } 71 | }; 72 | }]); 73 | 74 | app.directive('ganttColumnAdd', [function(){ 75 | return { 76 | restrict: 'AE', 77 | terminal:true, 78 | link:function(){ 79 | gantt.config.columns.push({ width:45, name:"add" }); 80 | } 81 | } 82 | }]); 83 | 84 | })(); -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* App Module */ 4 | 5 | var app = angular.module('ganttApp', [ ]); 6 | 7 | app.controller('MainGanttCtrl', function($scope) { 8 | 9 | $scope.tasks = { 10 | data:[ 11 | {id:1, text:"Project #2", start_date:"01-04-2018", duration:18,order:10, 12 | progress:0.4, open: true}, 13 | {id:2, text:"Task #1", start_date:"02-04-2018", duration:8, order:10, 14 | progress:0.6, parent:1}, 15 | {id:3, text:"Task #2", start_date:"11-04-2018", duration:8, order:20, 16 | progress:0.6, parent:1} 17 | ], 18 | links:[ 19 | { id:1, source:1, target:2, type:"1"}, 20 | { id:2, source:2, target:3, type:"0"}, 21 | { id:3, source:3, target:4, type:"0"}, 22 | { id:4, source:2, target:5, type:"2"} 23 | ]}; 24 | 25 | }); --------------------------------------------------------------------------------