This time I will share jQuery Plugin and tutorial about jQuery Plugin for World Calendars – calendars, hope it will help you in programming stack.
| File Size: | 868 KB |
|---|---|
| Views Total: | 16733 |
| 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.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.calendars.js"></script> |
2. Include the modules of your choice in the document. Available modules:
01 |
<!-- extra functions support: determineDate | formatDate | parseDate --> |
02 |
<script src="js/jquery.calendars.plus.js"></script> |
03 |
04 |
<!-- date picker module --> |
05 |
<script src="js/jquery.calendars.picker.js"></script> |
06 |
07 |
<!-- advanced date picker module --> |
08 |
<script src="js/jquery.calendars.picker.ext.js"></script> |
09 |
10 |
<!-- Taiwanese calendar --> |
11 |
<script src="js/jquery.calendars.taiwan.js"></script> |
12 |
13 |
<!-- Thai calendar --> |
14 |
<script src="js/jquery.calendars.thai.js"></script> |
15 |
16 |
<!-- Julian calendar --> |
17 |
<script src="js/jquery.calendars.julian.js"></script> |
18 |
19 |
<!-- Persian calendar --> |
20 |
<script src="js/jquery.calendars.persian.js"></script> |
21 |
22 |
<!-- Islamic calendar --> |
23 |
<script src="js/jquery.calendars.islamic.js"></script> |
24 |
25 |
<!-- Hebrew (civil) calendar --> |
26 |
<script src="js/jquery.calendars.hebrew.js"></script> |
27 |
28 |
<!-- Ethiopian calendar --> |
29 |
<script src="js/jquery.calendars.ethiopian.js"></script> |
30 |
31 |
<!-- Coptic calendar --> |
32 |
<script src="js/jquery.calendars.coptic.js"></script> |
33 |
34 |
<!-- Nepali calendar --> |
35 |
<script src="js/jquery.calendars.nepali.js"></script> |
36 |
37 |
<!-- Nanakshahi calendar --> |
38 |
<script src="js/jquery.calendars.nanakshahi.js"></script> |
39 |
40 |
<!-- Mayan (Long Count) calendar --> |
41 |
<script src="js/jquery.calendars.mayan.js"></script> |
42 |
43 |
<!-- Discworld calendar --> |
44 |
<script src="js/jquery.calendars.discworld.js"></script> |
3. Obtain a calendar implementation and start using it.
1 |
var gc = $.calendars.instance(); |
2 |
var d = gc.newDate(2009, 1, 26); |
4. Default plugin options.
001 |
// The calendar for this datepicker. |
002 |
calendar: $.calendars.instance(), |
003 |
004 |
// CSS class to add to this instance of the datepicker. |
005 |
pickerClass: '', |
006 |
007 |
// true for <a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a> on focus, false for not. |
008 |
showOnFocus: true, |
009 |
010 |
// Element to be cloned for a trigger |
011 |
showTrigger: null, |
012 |
013 |
// Name of jQuery animation for popup |
014 |
showAnim: 'show', |
015 |
016 |
// Options for enhanced animations. |
017 |
showOptions: {}, |
018 |
019 |
// Duration of display/closure. |
020 |
showSpeed: 'normal', |
021 |
022 |
// The element to which a popup calendar is added |
023 |
popupContainer: null, |
024 |
025 |
// Alignment of popup |
026 |
// 'top' or 'bottom' aligns depending on language direction, |
027 |
// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'. |
028 |
alignment: 'bottom', |
029 |
030 |
// true to always show 6 weeks |
031 |
// false to only show as many as are needed. |
032 |
fixedWeeks: false, |
033 |
034 |
// First day of the week, 0 = Sunday, 1 = Monday, etc. |
035 |
firstDay: null, |
036 |
037 |
// Calculate week of the year from a date, |
038 |
calculateWeek: null, |
039 |
040 |
// true to localise numbers (if available), |
041 |
// false to use normal Arabic numerals. |
042 |
localNumbers: false, |
043 |
044 |
// How many months to show, cols or [rows, cols]. |
045 |
monthsToShow: 1, |
046 |
047 |
// How many months to offset the primary month by; |
048 |
// may be a function that takes the date and returns the offset. |
049 |
monthsOffset: 0, |
050 |
051 |
// How many months to move when prev/next clicked. |
052 |
monthsToStep: 1, |
053 |
054 |
// How many months to move when large prev/next clicked. |
055 |
monthsToJump: 12, |
056 |
057 |
// true to use mousewheel if available |
058 |
useMouseWheel: true, |
059 |
060 |
// true to change month/year via drop-down |
061 |
// false for navigation only |
062 |
changeMonth: true, |
063 |
064 |
// Range of years to show in drop-down: 'any' for direct text entry |
065 |
// or 'start:end', where start/end are '+-nn' for relative to today |
066 |
// or 'c+-nn' for relative to the currently selected date |
067 |
// or 'nnnn' for an absolute year. |
068 |
yearRange: 'c-10:c+10', |
069 |
070 |
// trueto show dates from other months |
071 |
showOtherMonths: false, |
072 |
073 |
// true to allow selection of dates from other months too. |
