forked from angular-gantt/angular-gantt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
92 lines (90 loc) · 4.54 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/gantt.css"/>
<title>Gantt chart for Angular.js</title>
</head>
<body style="padding: 10px">
<a href="https://github.com/Schweigi/angular-gantt" target="_blank"><img style="position: absolute; 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="ctrl">
<h1>Gantt chart demo</h1>
<form role="form" class="form-inline">
<div class="form-group">
<span class="help-block">Action</span>
<div class="btn-group">
<button class="btn btn-default" ng-click="addSamples()">Load data</button>
<button class="btn btn-default" ng-click="removeSomeSamples()">Remove some</button>
<button class="btn btn-default" ng-click="removeSamples()">Remove all</button>
</div>
</div>
<div class="form-group">
<span class="help-block">View scale</span>
<select class="form-control" style="width: 100px;" ng-model="scale" ng-options="s for s in ['hour', 'day', 'week', 'month']"></select>
</div>
<div class="form-group">
<span class="help-block">Sort order</span>
<select class="form-control" style="width: 100px;" ng-model="mode" ng-options="m for m in ['name', 'date', 'custom']"></select>
</div>
<div class="form-group text-center">
<span class="help-block">Max height</span>
<div ng-show="maxHeight > 0">
<button class="btn btn-default" ng-click="maxHeight = 0">Deactivate</button>
</div>
<div ng-show="maxHeight === 0">
<button class="btn btn-default" ng-click="maxHeight = 300">Activate</button>
</div>
</div>
<div class="form-group text-center">
<span class="help-block">Additional options</span>
<div class="btn-group">
<button ng-show="showWeekends" class="btn btn-default" ng-click="showWeekends = false">Hide weekends</button>
<button ng-show="showWeekends == false" class="btn btn-default" ng-click="showWeekends = true">Show weekends</button>
<button ng-show="showNonWorkHours == false" class="btn btn-default" ng-click="showNonWorkHours = true; subScale = 6">Show non working hours</button>
<button ng-show="showNonWorkHours" class="btn btn-default" ng-click="showNonWorkHours = false; subScale = 8">Hide non working hours</button>
</div>
</div>
</form>
<hr>
<gantt first-day-of-week="1"
load-data="loadData = fn"
remove-data="removeData = fn"
clear-data="clearData = fn"
sort-mode="mode"
view-scale="scale"
column-width="scale === 'month' && 20 || (scale === 'week' && 10 || 4)"
column-sub-scale="scale === 'week' && 7 || 6"
work-hours="[8,9,10,11,12,13,14,15]"
show-non-work-hours="showNonWorkHours"
weekend-days="[0,6]"
show-weekends="showWeekends"
max-height="maxHeight"
on-gantt-ready="addSamples()"
on-label-clicked="labelEvent(event)"
on-label-dbl-clicked="labelEvent(event)"
on-label-context-clicked="labelEvent(event)"
on-label-header-clicked="labelHeaderEvent(event)"
on-label-header-dbl-clicked="labelHeaderEvent(event)"
on-label-header-context-clicked="labelHeaderEvent(event)"
on-row-added="rowEvent(event)"
on-row-clicked="rowEvent(event)"
on-row-dbl-clicked="rowEvent(event)"
on-row-context-clicked="rowEvent(event)"
on-row-updated="rowEvent(event)"
on-scroll="scrollEvent(event)"
on-task-clicked="taskEvent(event)"
on-task-dbl-clicked="taskEvent(event)"
on-task-context-clicked="taskEvent(event)"
on-task-updated="taskEvent(event)">
</gantt>
<hr>
<small>Gantt chart v0.6.1 for Angular.js by Marco Schweighauser (2014) | MIT License</small>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="assets/demo_sample_data.js"></script>
<script src="assets/demo.js"></script>
<script src="assets/angular-gantt.js"></script>
</body>
</html>