-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
207 lines (188 loc) · 6.23 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie7" xmlns:fb="http://ogp.me/ns/fb#" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 lt-ie8" xmlns:fb="http://ogp.me/ns/fb#" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" xmlns:fb="http://ogp.me/ns/fb#" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" xmlns:fb="http://ogp.me/ns/fb#" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie" xmlns:fb="http://ogp.me/ns/fb#"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript" src="dist/js/vendors.js"></script>
<script type="text/javascript" src="dist/js/app.js"></script>
<link rel="stylesheet" href="dist/styles/main.css">
</head>
<body>
<div class="row">
<div class="calendar-widget quarter"></div>
<div class="quarter">
<h2>Year display</h2>
<p>
The calendar allows to navigate throught the years. Every calendar starts
"today", which means, in that case, that the displayed year is the current year.
<br/>
When you click on a month's name, you can then select a date.
<br/>
<br/>
<i>Note that <b>allowYearView</b> will be <b>forced</b> to <b>true</b> with that mode, of course</i>
</p>
</div>
<div class="calendar-widget--second quarter"></div>
<div class="quarter">
<h2>Regular display</h2>
<p>
Example of a regular display calendar with callback options. When clicking on a date
with an event, you get all events occuring on that day and can do whatever you want with it.
</p>
<div class="event-infos">
Events will be displayed here.
</div>
</div>
</div>
<div class="row">
<div class="calendar-widget--third quarter"></div>
<div class="quarter">
<h2>Straight call</h2>
<pre class="code">$('.calendar-widget--third').calendar({});</pre>
<p>
Default options are set like these:
</p>
<ul>
<li><b>lang</b>: fr</li>
<li><b>mode</b>: date</li>
</ul>
</div>
<div class="calendar-widget--fourth quarter"></div>
<div class="quarter">
<h2>Translations</h2>
<p>
As of now, only english is supported as an extra language. But you can fairly easily
add your own languages by defining the translations in the options. See both supported
languages next:
</p>
<pre class="code">
translations: {
months: {
fr : ['Janvier', 'Février', 'Mars', 'Avril','Mai', 'Juin', 'Juillet', 'Août', 'Septembre','Octobre', 'Novembre', 'Décembre'],
en : ['January', 'February', 'March', 'April','May', 'June', 'July', 'August', 'September','October', 'November', 'December']
},
days: {
fr : ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
en : ['S', 'M', 'T', 'W', 'T', 'F', 'S']
},
nextMonthLabel : {
en : 'Next Month',
fr : 'Mois suivant'
},
prevMonthLabel : {
en : 'Previous Month',
fr : 'Mois précédent'
},
nextYearLabel : {
en : 'Next Year',
fr : 'Année suivante'
},
prevYearLabel : {
en : 'Previous Year',
fr : 'Année précédente'
}
}
</pre>
</div>
</div>
</body>
<script>
/**
* #Calendar example
*
* @param {object} opts
* - Event Title
* - Event date (multi format : "2012/11/6", 1349094647000, etc. (whatever gets in new Date())
* - Event Content
* - Event Link
*
* Return this (Calendar object)
*/
var events = [{
date:"2024/01/16",
title: 'Test title',
content : 'Well, turns out on that date we uploaded the plugin'
},
{
date:"2024/06/16",
title: 'Doc title',
content : 'We also updated the doc accordingly'
},
{
date:{
start : "2024/03/17",
end : "2024/08/27"
},
title: 'Changes',
content : 'We might add s\0ome changes during theses days'
},
{
date:{
start : "2024/04/17",
end : "2024/07/27"
},
title: 'Changes',
content : 'We might add s\0ome changes during theses days'
}];
elemnt = document.getElementsByClassName('calendar-widget--third')[0];
calendar = new bCalendar(elemnt, {
lang: 'fr',
showStartDate: false,
allowMonthView: true,
allowYearView: true,
displayAdjacentMonthDates: false,
mode: 'year',
events : events,
translations:{
nextYearLabel:{
fr:"",
en:""
},
prevYearLabel:{
fr:"",
en:""
},
nextMonthLabel:{
fr:"",
en:""
},
prevMonthLabel:{
fr:"",
en:""
}
},
callbacks:{
onMonthEventSelect : function(events, calendar) {
}
}
});
fourthElement = document.getElementsByClassName('calendar-widget--fourth')[0];
fourthCalendar = new bCalendar(fourthElement, { lang: 'en' });
firstElement = document.getElementsByClassName('calendar-widget')[0];
firstCalendar = new bCalendar(firstElement, { allowYearView: true });
secondElement = document.getElementsByClassName('calendar-widget--second')[0];
secondCalendar = new bCalendar(secondElement, {
lang: 'fr',
allowYearView: true,
events : events,
callbacks: {
onEventClick: function(ev,calendar) {
var events = ev.events;
var count = events.length;
var i = 0;
var html = '';
for (; i<count; i++) {
html += '<h3>'+events[ i ]['title']+'</h3><p>'+events[ i ]['content']+'</p>';
}
$('.event-infos').html(html);
}
}
});
</script>
<footer>
</footer>
</html>