-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathexample.html
125 lines (111 loc) · 4.71 KB
/
example.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
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<link href="./dist/js-calendar.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JS Calendar</h1>
<hr />
<div id="test-instance" class="js-calendar">
</div>
<div id="errorWrapper" style="color:#999;">
No uncaught error!
</div>
<pre id="stateOutput">
[State]
</pre>
<script src="./dev/debug.js"></script>
<script src="./dist/js-calendar.js"></script>
<script>
JSCalendar.on('new', function(cal, xtra) {
_jscallog("Class level hook caught for instance with id " + cal.id)
});
var today = new Date();
var matrix = {};
matrix[today.getFullYear()] = {};
matrix[today.getFullYear()][today.getMonth()] = {
"5" : [{displayname : "You can't miss this event", color : "#792aca"}],
"12" : [
{
displayname : "A very important meeting",
at : new Date(today.getFullYear(), today.getMonth(), 12, 15, 30).getTime()
},
{
displayname : "A somewhat important 2 hours meeting",
color : "rgb(113, 180, 193)",
at : new Date(today.getFullYear(), today.getMonth(), 12, 17, 30).getTime(),
duration : 1000 * 60 * 60 * 2
},
{
displayname : "This meeting is so important it's red",
color : "#9c3d27",
at : new Date(today.getFullYear(), today.getMonth(), 12, 21, 55).toString()
}
],
"15" : [
{
displayname : "Something else to do here",
at : new Date(0, 0, 0, 9, 30).toString()
},
{
displayname : "Similar event",
at : new Date(0, 0, 0, 9, 50).toString(),
duration : 1000 * 60 * 10,
color : "#5198da"
}
],
"16" : [{displayname : "Something to do here"}],
"17" : [{at : new Date(0, 0, 0, 10, 25).getTime()}],
"26" : [
{
displayname : "An event by the end of the month",
at : new Date(0,0,0, 9)
}
],
"27" : [
{
displayname : "Short monthly recap meeting",
at : new Date(0,0,0, 15, 30),
color : "rgb(113, 180, 193)",
duration : 1000 * 60 * 30
}
]
};
var calendar = new JSCalendar(document.getElementById('test-instance'), {
titleCropSize : 30,
eventBackground : "rgb(193, 155, 113)"
});
calendar.init();
var todayEventTime = new Date();
todayEventTime = new Date(todayEventTime.getFullYear(), todayEventTime.getMonth(), todayEventTime.getDate(), 10, 0, 0);
var tomorrowEventTime = new Date(todayEventTime.getTime() + (1000 * 60 * 60 * 24));
calendar.on('willRender', function() {
var titleBar = calendar.elem.querySelector('.control-bar-title');
titleBar.style.fontWeight = (
calendar.state.month == today.getMonth() &&
calendar.state.year == today.getFullYear()
) ? "bold" : "";
}).on('rendered', function(inst) {
document.getElementById('stateOutput').textContent = JSON.stringify(inst.debug(), null, 4);
}).on('cellMoved', function(inst) {
document.getElementById('stateOutput').textContent = JSON.stringify(inst.debug(), null, 4);
}).setMatrix( matrix ).push({
at : todayEventTime,
event : {
displayname : "Something to do today",
color : "rgb(193, 113, 167)",
duration : 1000 * 60 * 60 * 2,
at : todayEventTime
}
}).push({
at : tomorrowEventTime,
event : {
displayname : "Something to do tomorrow",
color : "rgb(113, 193, 132)",
duration : 1000 * 60 * 60,
at : tomorrowEventTime
}
}).render();
</script>
</body>
</html>