forked from continuouscalendar/jquery-continuous-calendar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
305 lines (256 loc) · 12.6 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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8"/>
<title>Jquery continuous calendar</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta property="og:title" content="Jquery continuous calendar"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://reaktor.github.com/jquery-continuous-calendar/"/>
<meta property="og:site_name" content="Jquery continuous calendar"/>
<meta property="og:description"
content="Jquery continuous calendar. A JavaScript Calendar component and date picker for selecting dates and date ranges."/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
<link rel="stylesheet" type="text/css" href="site/styles.css"/>
<link rel="stylesheet" href="build/jquery.continuousCalendar-latest-min.css" type="text/css" media="all"/>
<!--<link rel="stylesheet" href="src/main/jquery.continuousCalendar.css" type="text/css" media="all"/>-->
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<script src="http://shjs.sourceforge.net/sh_main.min.js"></script>
<meta content="Jquery continuous calendar. A JavaScript Calendar component and date picker for selecting dates and date ranges." name="description"/>
</head>
<body>
<!--[if lte IE 6]>
<h1>IE6 is not supported/h1>
<p>Please use one of following browsers:</p>
<p>
<a href="http://www.google.com/chrome">Google Chrome</a> |
<a href="http://www.mozilla-europe.org/fi/firefox/">Firefox</a> |
<a href="http://www.microsoft.com/finland/windows/internet-explorer/">Internet Explorer 8</a> |
<a href="http://www.opera.com/browser/">Opera</a> |
<a href="http://www.apple.com/fi/safari/">Safari</a>
</p>
<![endif]-->
<ul class="navi section">
<li><span>Home</span></li>
<li><a href="site/playground.html">Playground</a></li>
<li><a href="src/test/jquery.continuousCalendar.spec.html">Jasmine tests</a></li>
<li><a href="https://github.com/reaktor/jquery-continuous-calendar">Project in Github</a></li>
<li><a href="http://github.com/reaktor/jquery-continuous-calendar/zipball/master">Download ZIP</a></li>
</ul>
<div class="article">
<h1 id="live_example">Jquery continuous calendar</h1>
<ul class="section">
<li><a class="first" href="#live_example">Live example</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#supported_browsers">Supported browsers</a></li>
<li><a href="#getting_started">Getting started</a></li>
<li><a href="#api_documentation">Api documentation</a></li>
<li><a href="#license">License</a></li>
</ul>
<div class="section">
<h2>An example of range select with integrated time values</h2>
<div id="timeCalendar">
<input type="hidden" class="startDate" name="tripStartDate"/>
<input type="hidden" class="endDate" name="tripEndDate"/>
<h3>Select Days</h3>
<div class="continuousCalendar"></div>
<div class="dateLabels">
<div>
<strong>Starts</strong>
<span class="startDateLabel"></span>
<select name="tripStartTime"></select>
</div>
<div>
<strong>Ends</strong>
<span class="endDateLabel"></span>
<select name="tripEndTime"></select>
</div>
<div>
<strong>Duration</strong>
<span class="totalTimeOfTrip"></span>
</div>
</div>
</div>
<div class="c"></div>
<h2>Date picker example</h2>
<div id="date-picker"></div>
<div class="c"></div>
</div>
<h1 id="features">Features</h1>
<ul class="section">
<li>Date dragging</li>
<li>No pagination, continuous month flow</li>
<li>Range shifting by dragging</li>
<li>Range expand with Shift + Mouse click</li>
<li>Display current date</li>
<li>Allow disabling of dates</li>
<li>Month select</li>
<li>Week select</li>
<li>Popup support</li>
<li>Support for different date formats</li>
<li>Support for specifying holidays or disabled days</li>
<li>Support for setting minimum range</li>
</ul>
<h1 id="supported_browsers">Supported browsers</h1>
<ul class="section">
<li>IE6 →</li>
<li>FireFox</li>
<li>Chrome</li>
<li>Opera</li>
<li>Safari</li>
</ul>
<h1 id="getting_started">Getting started</h1>
<div class="section">
<h2>Insert in head</h2>
<pre><!-- basic default calendar styles -->
<link rel="stylesheet" type="text/css"
href="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.css" />
<!-- custom user specified calendar styles -->
<style type="text/css">
.calendarScrollContent {height: 250px;}
</style>
<!-- required JavaScript files -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript"
src="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.js">
</script>
</pre>
<h2>Insert in body</h2>
<pre><!-- range selection is attached to fields with class startDate and endDate -->
<div id="dateRange1">
<input type="hidden" class="startDate" name="range_start">
<input type="hidden" class="endDate" name="range_end">
</div>
<script type="text/javascript" language="JavaScript">
$("#dateRange1").continuousCalendar();
</script>
</pre>
</div>
<h1 id="api_documentation">Api Documentation</h1>
<div class="section">
<h2>Events</h2>
<dl>
<dt>calendarChange</dt>
<dd>Triggered in calendar init and calendar selections. Event object contains DateRange or Date for current selection</dd>
</dl>
<h2>Methods</h2>
<dl>
<dt>.continuousCalendar(options)</dt>
<dd>Creates a continuous calendar. Start and end input's are created if they don't exist. When created manually, they must have classes startDate and endDate and they must be inside the container. Options are passed in object. See options below.</dd>
<dt>.calendarRange(), returns <span class="type">DateRange</span></dt>
<dd>Returns calendar range object for current selection</dd>
</dl>
<h2>Options, color codes:
</h2>
<dl>
<dt class="title"><span>Property name</span>, <span class="default">Default value</span> <span class="type">Type</span></dt>
<dt>weeksBefore <span class="default">26</span> <span class="type">Number</span></dt>
<dd>Specifies amount of weeks displayed before selection. If no default selection then count from current day.</dd>
<dt>weeksAfter <span class="default">26</span> <span class="type">Number</span></dt>
<dd>Specifies amount of weeks displayed after selection. If no default selection then count from current day.</dd>
<dt>firstDate <span class="default">null</span> <span class="type">String</span></dt>
<dd>Specifies exact date for calendar start. this is alternative for weeksBefore. Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.</dd>
<dt>lastDate <span class="default">null</span> <span class="type">String</span></dt>
<dd>Specifies exact date for calendar end. This is alternative for weeksAfter. Date is in current short date format, i.e. 12/31/2011 or 31.1.2011.</dd>
<dt>startField <span class="default">$('input.startDate', this)</span> <span class="type">jQuery object</span></dt>
<dd>Specifies jquery element for start input field. This is used also for single date calendar</dd>
<dt>endField <span class="default">$('input.endDate', this)</span> <span class="type">jQuery object</span></dt>
<dd>Specifies jquery element for end input field.</dd>
<dt>isPopup <span class="default">false</span> <span class="type">Boolean</span></dt>
<dd>Specifies if calendar opens as popup or as inline version</dd>
<dt>selectToday <span class="default">false</span> <span class="type">Boolean</span></dt>
<dd>True, of current date is to be chosen, even if input field is empty.</dd>
<dt>locale <span class="default">Locale.EN</span> <span class="type">Object</span></dt>
<dd>Specifies locale for rendering calendar and parsing input fields. Currently Locale.EN and DATE_LOCALE_FI are found in global namespace.</dd>
<dt>disableWeekends <span class="default">false</span> <span class="type">Boolean</span></dt>
<dd>True if weekends are disabled.</dd>
<dt>disabledDates <span class="default">null</span> <span class="type">String</span></dt>
<dd>Space separated list of disabled dates. Dates are presented in short date format of current locale.</dd>
<dt>minimumRange <span class="default">-1</span> <span class="type">Number</span></dt>
<dd>Sets minimum range permitted in days. Shorter selections are expanded automatically.</dd>
<dt>selectWeek <span class="default">false</span> <span class="type">Boolean</span></dt>
<dd>Set to true for automatically selecting full weeks.</dd>
<dt>fadeOutDuration <span class="default">0</span> <span class="type">Number</span></dt>
<dd>Duration for fade out. Value is passed for jQuery's <a href="http://api.jquery.com/fadeOut/">.fadeOut</a> function.</dd>
<dt>callback <span class="default">$.noop</span> <span class="type">Function</span></dt>
<dd>Function called in init and after date selection. DateRange or Date is passed as argument and this points to calendar container.</dd>
</dl>
</div>
<h1 id="instructions_for_contributors">Instructions for contributors</h1>
<ul class="section">
<li>make a fork</li>
<li>code</li>
<li>run tests: <strong>jquery.continuousCalendar.spec.html</strong></li>
<li>Update documentation to index.html</li>
<li>run release.sh (see <strong>git tag</strong> for previous versions)</li>
<li>push --tags</li>
<li>make pull request</li>
</ul>
<h1 id="license">License</h1>
<div class="section">
<p>Licensed under the Apache License, Version 2.0 (the “License”); you may not<br>
use this file except in compliance with the License. You may obtain a copy of<br>
the License at</p>
<p>http://www.apache.org/licenses/LICENSE-2.0</p>
<p>Unless required by applicable law or agreed to in writing, software<br>
distributed under the License is distributed on an “AS IS” BASIS, WITHOUT<br>WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the<br>
License for the specific language governing permissions and limitations under<br>
the License.</p>
</div>
</div>
<script type="text/javascript" src="src/lib/jquery-1.6.js"></script>
<!--
<script type="text/javascript" src="src/main/DateTime.js" charset="UTF-8"></script>
<script type="text/javascript" src="src/main/DateLocale.js" charset="UTF-8"></script>
<script type="text/javascript" src="src/main/DateRange.js" charset="UTF-8"></script>
<script type="text/javascript" src="src/main/jquery.continuousCalendar.js" charset="UTF-8"></script>
-->
<script type="text/javascript" src="build/jquery.continuousCalendar-latest.js" charset="UTF-8"></script>
<script type="text/javascript" language="JavaScript">
$("#timeCalendar").continuousCalendar({weeksBefore: 30, lastDate: "today", selectToday: true});
$("#timeCalendar").bind('calendarChange', function() {
var container = $(this);
var startTime = container.find('select[name=tripStartTime]').val();
var endTime = container.find('select[name=tripEndTime]').val();
var range = container.calendarRange();
range = range.withTimes(startTime, endTime);
container.find('.totalTimeOfTrip').text(DateFormat.formatRange(range, Locale.EN)).toggleClass('invalid', !range.isValid());
});
$("#timeCalendar select").bind('change', function() {
$("#timeCalendar").trigger('calendarChange');
});
$("#timeCalendar select").each(function() {
for(i = 0; i < 24; i++) {
$(this).append($("<option>").text(i + ":00")).append($("<option>").text(i + ":30"));
}
});
$('#date-picker').continuousCalendar({isPopup: true, firstDate: 'today'});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4154602-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="section footer">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="eeroan" data-lang="en">Tweet</a>
<script>!function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if(!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
</div>
</body>
</html>