Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

284 lines (233 sloc) 11.855 kb
<!DOCTYPE html>
<html lang="en">
<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/theme.rounded.css" type="text/css" media="all"/>
<!--<link rel="stylesheet" href="src/main/jquery.continuousCalendar.css" type="text/css" media="all"/>-->
<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>
<label for="starts">Starts</label>
<span class="startDateLabel"></span>
<select id="starts" name="tripStartTime"></select>
</div>
<div>
<label for="ends">Ends</label>
<span class="endDateLabel"></span>
<select id="ends" name="tripEndTime"></select>
</div>
<div>
<label>Duration</label>
<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>
<li>Support for custom scrollbar</li>
<li>Three different themes</li>
</ul>
<h1 id="supported_browsers">Supported browsers</h1>
<ul class="section">
<li>IE7 →</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>&lt;!-- basic default calendar styles --&gt;
&lt;link rel="stylesheet" type="text/css"
href="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.css" /&gt;
&lt;!-- custom user specified calendar styles --&gt;
&lt;style type="text/css"&gt;
.calendarScrollContent {height: 250px;}
&lt;/style&gt;
&lt;!-- required JavaScript files --&gt;
&lt;script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"
src="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.js"&gt;
&lt;/script&gt;
</pre>
<h2>Insert in body</h2>
<pre>&lt;!-- range selection is attached to fields with class startDate and endDate --&gt;
&lt;div id="dateRange1"&gt;
&lt;input type="hidden" class="startDate" name="range_start"&gt;
&lt;input type="hidden" class="endDate" name="range_end"&gt;
&lt;/div&gt;
&lt;script type="text/javascript" language="JavaScript"&gt;
$("#dateRange1").continuousCalendar();
&lt;/script&gt;
</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">DateLocale.EN</span> <span class="type">Object</span></dt>
<dd>Specifies locale for rendering calendar and parsing input fields.</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>
<dt>theme <span class="default">''</span> <span class="type">String</span></dt>
<dd>Theme to be used. Currently available alternative themes are rounded and transparent. Don't forget to include the required css for the theme.</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>Update release notes to History.textile</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.9.1.min.js"></script>
<script type="text/javascript" src="build/jquery.continuousCalendar-latest-min.js" charset="UTF-8"></script>
<script type="text/javascript" language="JavaScript" src="site/index.js" ></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>
Jump to Line
Something went wrong with that request. Please try again.