jQuery Range Calendar v1.0

Made by : Libero Angelo
Email: [email protected]
Web site: Visit plugin Web Page for more information.

1.Simple Range Calendar

Sample #1

var simpleRangeCalendar = $("#range-calendar").rangeCalendar();

2.Custom theme Range Calendar

Sample #2

var customizedRangeCalendar = $("#range-calendar").rangeCalendar({theme:"full-green-theme"});

3.Custom Lang Range Calendar

Sample #3

var languageCalendar = $("#range-calendar").rangeCalendar({lang:"it"});

4.Set date programmatically

Sample #4
var rangeCalendar = $("#cal4").rangeCalendar({theme:"cyano-theme"});

$("#setDateBt").click(function () {

var newDate = new Date(2014, 4, 24);

$("#addMonthBt").click(function () {

var newDate = moment().add('months', 1);
Set a new date programmatically
+ 1 month from now
Sample #5

var callbackRangeCalendar = $("#range-calendar").rangeCalendar({theme:"cyano-theme",changeRangeCallback: rangeChanged});

function rangeChanged(target,range){


Start Date
End Date
Width Days


Method Params Return
range Current range struct (start,end,width)
rangeWidth Current range width
setRangeWidth rangeWidth
setStartDate new date object - (date)


Option Default
lang "en" - (string)
theme "default-theme" - (string)
startDate Now date object - (date)
endDate 12 months from now date object - (date)
start "+7" - (string)
startRangeWidth 3 - (integer)
minRangeWidth 1 - (integer)
maxRangeWidth 7 - (integer)
autoHideMonths false - (boolean)
visible true - (boolean)
changeRangeCallback null - (function)

Required files Dependencies

External Libraries Description
jQuery Download.
jQuery UI Download.
Moment.js Download the moment+lang.js for supporting dates manipolation and localization.
jQuery UI Touch Punch Enable touch events on web sites. Download here.
CSS Description
rangecalendar.css Avaiable in the plugin folder. Includes 5 themed CSS.