jQuery Plugin for World Calendars - calendars

calendars is a powerful jQuery plugin which provides implementations of various world calendars and additional functionality such as conversion between calendars, parsing and formatting dates, and a datepicker.

Features:

• Calendars: Gregorian, Julian, Taiwanese, Thai, Persian, Islamic, Hebrew, Ethiopian, Coptic, Mayan.
• Parse and format dates in all these calendars.
• Style the datepicker using one of five themes, or use any of the standard Themeroller themes.
• Over 70 localisations for Gregorian/Julian calendars.

Basic Usage:

1. Include jQuery library and calendars.js in your html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.calendars.js"></script>

2. Include the modules of your choice in the document. Available modules:

<!-- extra functions support: determineDate | formatDate | parseDate -->
<script src="js/jquery.calendars.plus.js"></script>

<!-- date picker module -->
<script src="js/jquery.calendars.picker.js"></script>

<!-- advanced date picker module -->
<script src="js/jquery.calendars.picker.ext.js"></script>

<!-- Taiwanese calendar -->
<script src="js/jquery.calendars.taiwan.js"></script>

<!-- Thai calendar -->
<script src="js/jquery.calendars.thai.js"></script>

<!-- Julian calendar -->
<script src="js/jquery.calendars.julian.js"></script>

<!-- Persian calendar -->
<script src="js/jquery.calendars.persian.js"></script>

<!-- Islamic calendar -->
<script src="js/jquery.calendars.islamic.js"></script>

<!-- Hebrew (civil) calendar -->
<script src="js/jquery.calendars.hebrew.js"></script>

<!-- Ethiopian calendar -->
<script src="js/jquery.calendars.ethiopian.js"></script>

<!-- Coptic calendar -->
<script src="js/jquery.calendars.coptic.js"></script>

<!-- Nepali calendar -->
<script src="js/jquery.calendars.nepali.js"></script>

<!-- Nanakshahi calendar -->
<script src="js/jquery.calendars.nanakshahi.js"></script>

<!-- Mayan (Long Count) calendar -->
<script src="js/jquery.calendars.mayan.js"></script>

<!-- Discworld calendar -->
<script src="js/jquery.calendars.discworld.js"></script>

3. Obtain a calendar implementation and start using it.

var gc = $.calendars.instance(); 
var d = gc.newDate(2009, 1, 26);

4. Default plugin options.

// The calendar for this datepicker.
calendar: $.calendars.instance(),

// CSS class to add to this instance of the datepicker.
pickerClass: '',

// true for popup on focus, false for not.
showOnFocus: true,

// Element to be cloned for a trigger
showTrigger: null,

// Name of jQuery animation for popup
showAnim: 'show',

// Options for enhanced animations.
showOptions: {},

// Duration of display/closure.
showSpeed: 'normal',

// The element to which a popup calendar is added
popupContainer: null,

// Alignment of popup
// 'top' or 'bottom' aligns depending on language direction,
// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'.
alignment: 'bottom',

// true to always show 6 weeks
// false to only show as many as are needed.
fixedWeeks: false,

// First day of the week, 0 = Sunday, 1 = Monday, etc.
firstDay: null,

// Calculate week of the year from a date,
calculateWeek: null,

// true to localise numbers (if available),
// false to use normal Arabic numerals.
localNumbers: false,

// How many months to show, cols or [rows, cols].
monthsToShow: 1,

// How many months to offset the primary month by;
// may be a function that takes the date and returns the offset.
monthsOffset: 0,

// How many months to move when prev/next clicked.
monthsToStep: 1,

// How many months to move when large prev/next clicked.
monthsToJump: 12,

// true to use mousewheel if available
useMouseWheel: true,

// true to change month/year via drop-down
// false for navigation only
changeMonth: true,

// Range of years to show in drop-down: 'any' for direct text entry
// or 'start:end', where start/end are '+-nn' for relative to today
// or 'c+-nn' for relative to the currently selected date
// or 'nnnn' for an absolute year.
yearRange: 'c-10:c+10',

// trueto show dates from other months
showOtherMonths: false,

// true to allow selection of dates from other months too.
selectOtherMonths: false,

// Date to show if no other selected.
defaultDate: null,

// true to pre-select the default date if no other is chosen.
selectDefaultDate: false,

// The minimum selectable date.
minDate: null,

// The maximum selectable date.
maxDate: null,

// Format for dates.
dateFormat: null,

// true to size the input field according to the date format.
autoSize: false,

// Allows for selecting a date range on one date picker.
rangeSelect: false,

// Text between two dates in a range.
rangeSeparator: ' - ',

// Maximum number of selectable dates, zero for single select.
multiSelect: 0,

// Text between multiple dates.
multiSeparator: ',',

// Callback as a date is added to the datepicker.
onDate: null,

// Callback just before a datepicker is shown.
onShow: null,

// Callback when a new month/year is selected.
onChangeMonthYear: null,

// Callback when a date is selected.
onSelect: null,

// Callback when a datepicker is closed.
onClose: null,

// Alternate field to update in synch with the datepicker.
altField: null,

//  Date format for alternate field
altFormat: null,

// true to constrain typed input to dateFormat allowed characters.
constrainInput: true,

// true to apply formatDate to the command texts.
commandsAsDateFormat: false,

// Command actions that may be added to a layout by name.
commands: {} 

More Examples:

• Basic Usage
• Datepicker

Changelog:

v2.1.2 (2019-10-23)

• Correct month parsing

---

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