jQuery Plugin for World Calendars - calendars
File Size: | 868 KB |
---|---|
Views Total: | 18387 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.