Scrollable jQuery Date Picker and Range Selector - Continuous Calendar

Continuous Calendar is a jQuery plugin for creating date picker and range selector with scrollable months instead of paged. 

Licensed under the Apache License, Version 2.0.

Main features:

• Date dragging
• No pagination, continuous month flow
• Range shifting by dragging
• Range expand with Shift + Mouse click
• Display current date
• Allow disabling of dates
• Month select
• Week select
• Popup support (with current day in calndar icon)
• Support for different date formats
• Support for specifying holidays or disabled days
• Support for setting minimum range

Basic Usage:

1. Include jQuery Continuous Calendar CSS in the header

<link rel="stylesheet" href="build/jquery.continuousCalendar-latest-min.css" />

2. The HTML. 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>

3. Include jQuery library and jQuery Continuous Calendar plugin on the page

<script src="jquery.min.js"></script>
<script src="build/jquery.continuousCalendar-latest-min.js"></script> 

4. Call the plugin with default options.

$("#dateRange1").continuousCalendar({
  // options here
});

5. Default options to config the date picker.

// Specifies amount of weeks displayed before selection. 
// If no default selection then count from current day.
weeksBefore: 26,

// Specifies amount of weeks displayed after selection. 
// If no default selection then count from current day.
weeksAfter: 26,

// 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.
firstDate: null,

// 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.
lastDate: null,

// Specifies jquery element for start input field. 
// This is used also for single date calendar
startField: t("input.startDate", this),

// Specifies jquery element for end input field.
endField: t("input.endDate", this),

// Specifies if calendar opens as popup or as inline version
isPopup: false,

// True, of current date is to be chosen, even if input field is empty.
selectToday: false,

// Specifies locale for rendering calendar and parsing input fields.
locale: EN,

// True if weekends are disabled.
disableWeekends: false,

// Space separated list of disabled dates. 
// Dates are presented in short date format of current locale.
disabledDates: null,

// Sets minimum range permitted in days. Shorter selections are expanded automatically.
minimumRange: -1,

// Set to true for automatically selecting full weeks.
selectWeek: false,

// Duration for fade out. 
// Value is passed for jQuery's .fadeOut function.
fadeOutDuration: 0,

// Function called in init and after date selection. 
// DateRange or Date is passed as argument and this points to calendar container.
callback: t.noop,

// Popup callback
popupCallback: t.noop,


customScroll: false,
scrollOptions: {
  sizethumb: "auto"
},

// Theme to be used. 
// Currently available alternative themes are rounded and transparent. 
// Don't forget to include the required css for the theme.
theme: "",

// Allows the user to clear dates
allowClearDates: false,

// Is date range picker?
isRange: false,

// Start/end dates
startDate: null,
endDate: null,

useIsoForInput:  false,
initScrollBar: function() { },
executeCallback: function() { }

Changelog:

v5.0.1 (2016-02-17)

• update

v4.12.2 (2016-02-16)

• Use commonJS for source files

v4.12.1 (2015-08-27)

• Add Language support for German and French

v4.11.0 (2015-05-28)

• Highlight Finnish holidays and show tooltips

v4.10.0 (2014-12-16)

• Provide possibility to use iso date format for input field

v4.9.0 (2014-12-16)

• Read dateutils from external dependency
• Ensure box-sizing=content box for calendar icon

v4.8.0 (2014-11-13)

• Support js date objects and DateTime objects as first and last date
• Add callback for popup opening
• Use inline images for custom scrollbar

v4.7.0 (2014-08-13)

• Prevent date labels wrap between week day and date
• Add possibility to set date selection as constructor parameter
• Add DateTime.toISODateString
• De-couple DateLocale and continuousCalendar
• Remove IE 6 tweaks
• Make tinyscrollbar as separate dependency
• Add Duration module

v4.6.2 (2014-04-17)

• Bring old IE support back by using $.map instead of Array.prototype.map
• Make DateTime constructor less ambigous and rely on factory methods instead

v4.6.1 (2014-03-04)

• Get rid of eval in DateFormat.js.

v4.6.0 (2014-03-03)

• Determine single date vs range with configuration parameter instead of provided input elements.

v4.5.3 (2014-02-15)

• version update.

v4.5.2 (2014-01-22)

• version update.

v4.5.1 (2014-01-22)

• version update.

v4.4.1 (2013-09-04)

• Add possibility to use fixed height scroll when using custom scrollbar

 

---

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