-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathdemo.html
116 lines (101 loc) · 2.49 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Dr.Cal Demo</title>
<meta charset="utf-8">
<style type="text/css">
.calendar {
border-collapse: collapse;
font-family: sans-serif;
}
.calendar td {
border: 1px solid #AEAEAE;
width: 6em;
height: 5em;
padding: 0;
}
.calendar td > div {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
.calendar thead tr:first-child th {
font-size: large;
padding-bottom: 0.5em;
}
.calendar thead tr:last-child th {
font-weight: normal;
font-size: small;
color: #939393;
}
.calendar .prev {
float: left;
}
.calendar .prev:before {
content: "<";
}
.calendar .next {
float: right;
}
.calendar .next:after {
content: ">";
}
.calendar .today, .calendar .today.selected {
background-color: #E9EFF8;
}
.calendar .selected {
background-color: #F3F3F3;
}
.calendar .extra {
color: #AEAEAE;
}
.calendar .daynum {
position: absolute;
top: 0.5ex;
right: 0.5ex;
}
</style>
</head>
<body>
<script src="drcal.js"></script>
<script type="text/javascript">
// default calendar
var cal = drcal();
displayCalendar(cal, 'JS');
// weeks start on Monday
var cal = drcal({'startDay': 1});
displayCalendar(cal, 'ISO');
// 中文
var cal = drcal({'weekdays': ['日', '一', '二', '三', '四', '五', '六'],
'months': ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'],
'startDay' : 1});
displayCalendar(cal, '中国');
function displayCalendar(cal, title) {
cal.addEventListener('drcal.renderDay', function (event) {
var dayNum = document.createElement('div');
dayNum.className = 'daynum';
dayNum.appendChild(document.createTextNode(event.detail.date.getDate()));
var div = document.createElement('div');
div.appendChild(dayNum);
event.detail.element.appendChild(div);
});
cal.changeMonth(new Date());
selected = null;
cal.addEventListener('click', function (event) {
if (event.target.tagName === 'DIV') {
event.preventDefault();
if (selected) selected.className = '';
selected = event.target;
selected.className = 'selected';
}
});
var header = document.createElement('h2');
header.appendChild(document.createTextNode(title));
document.body.appendChild(header);
document.body.appendChild(cal);
}
</script>
</body>
</html>