jQuery Plugin For Date Range Selector - Range Calendar

Range Calendar is a nice jQuery plugin which allows you select a date range in a fully customizable calendar layout with months.

Dependencies:

• jQuery
• jQuery UI
• Moment.js
• jQuery UI Touch Punch

See also:

• jQuery Date Range Picker For Twitter Bootstrap
• jQuery Date Range Selector Using jQuery UI Datepicker - daterange
• jQuery UI Date Range Picker Plugin - Daterange

How to use it:

1. Include the jQuery library and other required resources from CDNs.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>

2. Include the jQuery Range Calendar's script and CSS after jQuery library.

<script src="js/jquery.rangecalendar.js"></script>
<link rel="stylesheet" href="css/rangecalendar.css">

3. Create an empty element that will be served as a calendar container.

<div id="demo"></div>

4. Initialize the plugin to create a basic date range selector.

$(document).ready(function(){
$("#demo").rangeCalendar();
});

5. Options and defaults.

$(document).ready(function(){
$("#demo").rangeCalendar({
lang: "en",
theme: "default-theme",
themeContext: this,
startDate: moment(),
endDate: moment().add('months', 12),
start : "+7",
startRangeWidth : 3, 
minRangeWidth: 1,
maxRangeWidth: 14,
weekends: true,
autoHideMonths: false,
visible: true,
trigger: null,
changeRangeCallback : function( el, cont, dateProp ) { return false; }
});
});

---

This awesome jQuery plugin is developed by webangelo. For more Advanced Usages, please check the demo page or visit the official website.