forked from namespace-ee/react-calendar-timeline
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (107 loc) · 4.24 KB
/
index.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html>
<head>
<title>react calendar timeline Demo</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body style='font-family: "Lato";margin: 0;font-size: 13px;'>
<div id="main"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.js"></script>
<!-- <link href='build/dist/react-calendar-timeline.min.css' rel='stylesheet' type='text/css'>
<script src="build/dist/react-calendar-timeline.min.js"></script> -->
<link href='build/dist/react-calendar-timeline.css' rel='stylesheet' type='text/css'>
<script src="build/dist/react-calendar-timeline.js"></script>
<style>
.react-calendar-timeline .rct-item.item-weekend {
background: #21F32C;
border-color: #29B31A;
}
</style>
<script>
GROUP_COUNT = 30
ITEM_COUNT = 1000
DAYS_IN_PAST = 30
var groups = []
for (var i = 0; i < GROUP_COUNT; i++) {
groups.push({
id: (i+1)+'',
title: faker.name.firstName()
})
};
var items = []
for (var i = 0; i < ITEM_COUNT; i++) {
var startDate = faker.date.recent(DAYS_IN_PAST).valueOf() + (DAYS_IN_PAST * 0.3) * 86400 * 1000;
var startValue = moment(startDate).valueOf();
var endValue = moment(startDate + faker.random.number({min: 2, max: 20})*15*60*1000).valueOf();
items.push({
id: i+'',
group: faker.random.number({min: 1, max: groups.length})+'',
title: faker.hacker.phrase(),
start: startValue,
end: endValue,
canMove: startValue > new Date().getTime(),
canResize: endValue > new Date().getTime(),
className: (moment(startDate).day() === 6 || moment(startDate).day() === 0) ? 'item-weekend' : ''
})
}
items = items.sort(function(a, b) { return b - a; })
var minTime = moment().add(-6, 'months').valueOf()
var maxTime = moment().add(6, 'months').valueOf()
var props = {
groups: groups,
items: items,
fixedHeader: 'fixed',
canMove: true, // defaults
canResize: true,
itemsSorted: true,
itemTouchSendsClick: false,
stackItems: true,
itemHeightRatio: 0.75,
defaultTimeStart: moment().startOf('day').toDate(),
defaultTimeEnd: moment().startOf('day').add(1, 'day').toDate(),
keys: {
groupIdKey: 'id',
groupTitleKey: 'title',
itemIdKey: 'id',
itemTitleKey: 'title',
itemGroupKey: 'group',
itemTimeStartKey: 'start',
itemTimeEndKey: 'end'
},
onItemClick: function(item) {
console.log("Clicked: " + item);
},
onItemSelect: function(item) {
console.log("Selected: " + item);
},
moveResizeValidator: function(action, item, time) {
if (time < new Date().getTime()) {
var newTime = Math.ceil(new Date().getTime() / (15*60*1000)) * (15*60*1000);
return newTime;
}
return time
},
// this limits the timeline to -6 months ... +6 months
onTimeChange: function (visibleTimeStart, visibleTimeEnd) {
if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
this.updateScrollCanvas(minTime, maxTime)
} else if (visibleTimeStart < minTime) {
this.updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
} else if (visibleTimeEnd > maxTime) {
this.updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
} else {
this.updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
}
}
}
var filter = React.createElement("div", {}, "The filter");
/* jshint undef:false */
ReactDOM.render(React.createElement(ReactCalendarTimeline['default'], props, filter), document.getElementById('main'));
</script>
</body>
</html>