jQuery Range Calendar Examples

1.Simple Range Calendar

 Sample #1 

  $(document).ready(function(){

  

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

  });

2.Custom theme Range Calendar

 Sample #2 

  $(document).ready(function(){

  

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

  });

3.Custom Lang Range Calendar

 Sample #3 

  $(document).ready(function(){

  

  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);

  rangeCalendar.setStartDate(newDate);

  });

  

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

  

  var newDate = moment().add('months', 1);

  rangeCalendar.setStartDate(newDate);

  });

Set a new date programmatically

+ 1 month from now

 Sample #5 

  $(document).ready(function(){

  

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

  

  function rangeChanged(target,range){

  

  console.log(range);

  }

  

  });

Start Date

End Date

Width Days

Methods

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

Options

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.