angular-gantt

<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>Angular Gantt - Gantt chart component for AngularJS (Demo)</title> <meta name="description" content="Gantt chart component for AngularJS"> <meta name="viewport" content="width=device-width"> <link rel="canonical" href="https://www.angular-gantt.com/"> <link rel="shortcut icon" href="https://www.angular-gantt.com/img/favicon.ico"> <meta property="og:title" content="Angular Gantt (Demo)" /> <meta property="og:description" content="Gantt chart component for AngularJS" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.angular-gantt.com/demo/" /> <meta property="og:image" content="https://www.angular-gantt.com/img/angular-gantt.png" /> </head> <body ng-app="gantt.demo" ng-strict-di>   <a href="https://github.com/angular-gantt/angular-gantt" target="_blank"><img style="position: absolute; z-index:10000; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a> <div ng-controller="DemoCtrl"> <div class="navbar navbar-default" role="navigation" bs-navbar> <div class="navbar-header"> <a class="navbar-brand" href="http://www.angular-gantt.com">angular-gantt - Gantt chart component for AngularJS</a> </div> <div class="navbar-right navbar-right-spacing"> <a class="navbar-text navbar-link" href="http://www.angular-gantt.com"><i class="fa fa-book"></i> Documentation</a> <a class="navbar-text navbar-link" href="https://github.com/angular-gantt/angular-gantt"><i class="fa fa-github"></i> GitHub</a> </div> </div> <div class="container-content" ng-show="false"> <div class="container-fluid"> <div class="row top-buffer"> <div class="col-md-12"> <i class="fa fa-cog fa-spin"></i> Loading angular-gantt demo ... </div> </div> </div> </div> <div class="container-content" ng-cloak="true"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="panel-group" bs-collapse> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="" bs-collapse-toggle>Options</a> </h4> </div> <div class="panel-collapse" bs-collapse-target> <div class="panel-body"> <div class="container-fluid"> <div class="row"> <div class="form-inline"> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-search"></i> Scale</label><br> <button type="button" style="width: 5em; text-align: left" class="btn btn-default" ng-model="options.scale" bs-options="s for s in ['minute', '5 minutes', 'hour', '3 hours', 'day', 'week', '2 weeks', 'month', 'quarter', '6 months', 'year']" bs-select></button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-sort"></i> Sort</label><br> <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.sortMode" bs-options="m.value as m.label for m in [{label: 'disabled', value: undefined}, {label: 'name', value: 'model.name'}, {label: 'from', value: 'from'}, {label: 'to', value: 'to'}]" bs-select></button> </div> <div class="form-group input-append text-center"> <label class="control-label"><i class="fa fa-filter"></i> Filter Tasks</label><br> <input type="text" class="form-control" style="width: 8em; text-align: left" ng-model="options.filterTask"> </div> <div class="form-group input-append text-center"> <label class="control-label"><i class="fa fa-filter"></i> Filter Rows</label><br> <input type="text" class="form-control" style="width: 8em; text-align: left" ng-model="options.filterRow"> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-clock-o"></i> Today</label><br> <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.currentDate" bs-options="d for d in ['none', 'line', 'column']" bs-select></button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-expand"></i> Expand</label><br> <button type="button" style="width: 6em; text-align: left" class="btn btn-default" ng-model="options.autoExpand" bs-options="e for e in ['none', 'both', 'left', 'right']" bs-select></button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-scissors"></i> Out of range</label><br> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.taskOutOfRange" bs-options="e for e in ['expand', 'truncate']" bs-select></button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-pencil-square-o"></i> Edit</label><br> <button type="button" class="btn btn-default" ng-model="options.draw" bs-checkbox>Draw</button> <button type="button" class="btn btn-default" ng-model="options.readOnly" bs-checkbox>Read Only</button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-magnet"></i> Magnet</label><br> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.columnMagnet" bs-options="m for m in ['column', '1 second', '1 minute', '5 minutes', '15 minutes', '1 hour', '1 day', '5 days']" bs-select></button> <button type="button" class="btn btn-default" ng-model="options.daily" bs-checkbox>Daily</button> <button type="button" class="btn btn-default" ng-model="options.timeFramesMagnet" bs-checkbox>TimeFrames</button> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-bars"></i> Side</label><br> <div class="btn-group" bs-checkbox-group> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.sideMode" bs-options="s for s in ['Tree', 'Table', 'TreeTable', 'Disabled']" bs-select></button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-gear"></i> Groups</label><br> <div class="btn-group" bs-checkbox-group> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.groupDisplayMode" bs-options="s for s in ['group', 'overview', 'promote', 'Disabled']" bs-select></button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-crop"></i> Layout</label><br> <div class="btn-group" bs-checkbox-group> <button type="button" class="btn btn-default" ng-model="options.maxHeight" bs-checkbox>Height</button> <button ng-disabled="!canAutoWidth(options.scale)" type="button" class="btn btn-default" ng-model="options.width" bs-checkbox>Width</button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-search"></i> Zoom</label><br> <input ng-disabled="!options.width" type="number" ng-model="options.zoom" step="0.1" min="0.1" max="5" class="form-control" /> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-text-width"></i> Labels</label><br> <div class="btn-group" bs-checkbox-group> <button type="button" class="btn btn-default" ng-model="options.labelsEnabled" bs-checkbox>Show</button> <button type="button" class="btn btn-default" ng-model="options.allowSideResizing" bs-checkbox>Resizable</button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-code"></i> Content</label><br> <div class="btn-group" bs-checkbox-group> <button type="button" class="btn btn-default" ng-model="options.rowContentEnabled" bs-checkbox>Rows</button> <button type="button" class="btn btn-default" ng-model="options.taskContentEnabled" bs-checkbox>Tasks</button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range</label><br> <div class="form-group"> <input type="text" class="form-control" ng-model="options.fromDate" max-date="{{options.toDate}}" start-date="{{options.currentDateValue.toString()}}" start-week="1" placeholder="From" bs-datepicker> </div> <div class="form-group"> <input type="text" class="form-control" ng-model="options.toDate" min-date="{{options.fromDate}}" start-date="{{options.currentDateValue.toString()}}" start-week="1" placeholder="To" bs-datepicker> </div> </div> <div class="form-group text-center"> <div class="form-group"> <label class="control-label"><i class="fa fa-sign-out"></i> Working</label><br> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.timeFramesWorkingMode" bs-options="e for e in ['visible', 'hidden', 'cropped']" bs-select></button> </div> <div class="form-group"> <label class="control-label"><i class="fa fa-sign-out"></i> Non-working</label><br> <button type="button" style="width: 8em; text-align: left" class="btn btn-default" ng-model="options.timeFramesNonWorkingMode" bs-options="e for e in ['visible', 'hidden', 'cropped']" bs-select></button> </div> </div> <div ng-if="options.sideMode === 'Tree' || options.sideMode === 'TreeTable'" class="form-group text-center"> <label class="control-label"><i class="fa fa fa-chevron-circle-right"></i> Tree actions</label><br> <div class="btn-group"> <button class="btn btn-default" ng-click="expandAll()">Expand all</button> <button class="btn btn-default" ng-click="collapseAll()">Collapse all</button> </div> </div> <div class="form-group text-center"> <div class="form-group"> <label class="control-label"><i class="fa fa-link"></i> Dependencies</label><br> <button type="button" class="btn btn-default" ng-model="options.dependencies.enabled" bs-checkbox>Enabled</button> <button type="button" class="btn btn-default" ng-model="options.dependencies.conflictChecker" bs-checkbox>Conflicts</button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-database"></i> Data actions</label><br> <div class="btn-group"> <button class="btn btn-default" ng-click="reload()">Reload</button> <button class="btn btn-default" ng-click="remove()">Remove</button> <button class="btn btn-default" ng-click="clear()">Clear</button> </div> </div> <div class="form-group text-center"> <label class="control-label"><i class="fa fa-database"></i>Add Overlapping Task</label><br> <div class="form-group"> <input type="number" ng-model="options.targetDataAddRowIndex" step="1" min="0" class="form-control" placeholder="Row Index"/> <button class="btn btn-default" ng-click="addOverlapTaskToTargetRowIndex()">Add</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row top-buffer"> <div class="col-md-12"> <div class="panel-group" bs-collapse> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="" bs-collapse-toggle>Gantt</a> </h4> </div> <div class="panel-collapse" bs-collapse-target> <div class="panel-body"> <div gantt data="data" timespans="timespans" show-side="options.labelsEnabled" daily="options.daily" filter-task="{'name': options.filterTask}" filter-row="{'name': options.filterRow}" sort-mode="options.sortMode" view-scale="options.scale" column-width="getColumnWidth(options.width, options.scale, options.zoom)" auto-expand="options.autoExpand" task-out-of-range="options.taskOutOfRange" from-date = "options.fromDate" to-date = "options.toDate" allow-side-resizing = "options.allowSideResizing" task-content = "options.taskContentEnabled ? options.taskContent : undefined" row-content = "options.rowContentEnabled ? options.rowContent : undefined" current-date="options.currentDate" current-date-value="options.currentDateValue" headers="options.width && options.shortHeaders || options.longHeaders" max-height="options.maxHeight && 300 || 0" time-frames="options.timeFrames" date-frames="options.dateFrames" time-frames-working-mode="options.timeFramesWorkingMode" time-frames-non-working-mode="options.timeFramesNonWorkingMode" time-frames-magnet="options.timeFramesMagnet" api="options.api" column-magnet="options.columnMagnet"> <gantt-tree enabled="options.sideMode === 'Tree' || options.sideMode === 'TreeTable'" header-content="options.treeHeaderContent" keep-ancestor-on-filter-row="true"> </gantt-tree> <gantt-table enabled="options.sideMode === 'Table' || options.sideMode === 'TreeTable'" columns="options.sideMode === 'TreeTable' ? options.treeTableColumns : options.columns" headers="options.columnsHeaders" classes="options.columnsClasses" formatters="options.columnsFormatters" contents="options.columnsContents" header-contents="options.columnsHeaderContents"> </gantt-table> <gantt-corner headers-labels="options.corner.headersLabels" headers-labels-templates="options.corner.headersLabelsTemplates"></gantt-corner> <gantt-groups enabled="options.groupDisplayMode === 'group' || options.groupDisplayMode === 'overview' || options.groupDisplayMode === 'promote'" display="options.groupDisplayMode"></gantt-groups> <gantt-tooltips></gantt-tooltips> <gantt-bounds></gantt-bounds> <gantt-progress></gantt-progress> <gantt-sortable></gantt-sortable> <gantt-sections></gantt-sections> <gantt-movable enabled="!options.readOnly" allow-row-switching="options.movable.allowRowSwitching"></gantt-movable> <gantt-draw-task enabled="options.canDraw" move-threshold="2" task-factory="options.drawTaskFactory"> </gantt-draw-task> <gantt-overlap></gantt-overlap> <gantt-resize-sensor></gantt-resize-sensor> <gantt-dependencies enabled="options.dependencies.enabled" conflict-checker="options.dependencies.conflictChecker" read-only="options.readOnly"> </gantt-dependencies> </div> </div> <div class="panel-body"> <div class="live-table"> <div class="live-cell" ng-show="live.row.tasks.length > 0"> <h4><button type="button" style="text-align: left" class="btn btn-default" ng-model="live.task" bs-options="t as t.name for t in live.row.tasks" bs-select></button> (Task object)</h4> <textarea class="live-task" ng-model="live.taskJson"></textarea> </div> <div class="live-cell" ng-show="data.length > 0"> <h4><button type="button" style="text-align: left" class="btn btn-default" ng-model="live.row" bs-options="r as r.name for r in data" bs-select></button> (Row object)</h4> <textarea class="live-row" ng-model="live.rowJson"></textarea> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container-content" ng-cloak="true"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <small>angular-gantt (@@version) - Gantt chart component for AngularJS | MIT License | Copyright © 2015 Marco Schweighauser and Rémi Alvergnat</small> </div> </div> </div> </div> </div>  </body> </html>