-
Notifications
You must be signed in to change notification settings - Fork 7
/
example.html
69 lines (69 loc) · 1.84 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
<html>
<head>
<title> jquery-timetable example </title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script
type="text/javascript" src="lib/jquery-1.6.4.js">
</script>
<script
type="text/javascript"
src="lib/jquery-mColorPicker-e4bff9ba17a8267f295217f15564ec15f6028cab/javascripts/mColorPicker.js">
</script>
<script type="text/javascript">
jQuery.fx.off = true;
$.fn.mColorPicker.init.showLogo = false;
$.fn.mColorPicker.init.allowTransparency = false;
$.fn.mColorPicker.defaults.imageFolder = 'lib/jquery-mColorPicker/images/';
// Don't load on init as we build the color selector input dynamically
$.fn.mColorPicker.init.replace = false;
</script>
<link rel="stylesheet" href="jquery-timetable.css" type="text/css" media="screen" />
<script src="jquery-timetable.js" type="text/javascript"></script>
<script>
var schedule = {
time: {
start: {
hour: 7,
minute: 40
},
durations: [ 30, 30, 30 ]
},
dailySlots: {
Monday: [
{ s: 'PE', d: 30 },
{ s: 'ME', d: 60 }
],
Wednesday: [
{ s: 'ME', d: 70 },
{ s: 'PE', d: 20 }
],
Friday: [
{ s: 'AI', d: 30 },
{ s: '', d: 30 },
{ s: 'AE', d: 30 }
]
},
bgColor: {
ME: 'pink',
PE: 'lightblue',
AI: 'lightgreen',
AE: 'lightyellow'
},
};
$(document).ready(function (){
$('#sample').timetable({
schedule: schedule,
edit: true,
onchange: function(schedule) {
console.log('schedule', schedule);
}
});
$('#sample').timetable('render');
});
</script>
</head>
<body>
<div id="sample"></div>
</body>
</html>