Basic Lightweight jQuery Calendar Plugin - Yacal
File Size: | 21.1 KB |
---|---|
Views Total: | 5523 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yacal is a small and simple-to-use jQuery plugin used to embed a nice-looking calendar component with basic functionality in your webpage.
Basic usage:
1. Make you you have jQuery library installed and then include the jQuery yacal plugin's JS and CSS files in your document.
<link rel="stylesheet" href="dist/jquery.yacal.css"> ... <script src="jquery.min.js"></script> <script src="dist/jquery.yacal.min.js"></script>
2. Create a container for the calendar and use data-attributes
to config the options.
<div class="yacal" data-date="2015/06/15" data-near-months="1" data-min-date="2014/6/15" data-max-date="2016/6/15"> </div>
3. You can also generate a calendar within a specified container using JavaScript.
$('#container').yacal({ // options here });
4. Full plugin options.
// Sets the date date: new Date(), // How many months will be displayed to each side nearMonths: 0, // Toggles the week days ('Su','Mo','Tu',etc). showWeekdays: true, // Sets the minimal date range. minDate: null, // Sets the maximum date range maxDate: null, // Sets the first day of the week. // TODO firstDay: false, // Page size pageSize: 1, // Custom calendar template tpl: { day: tag('a', 'day d' + _ph.dw + '' + _ph.we + '' + _ph.t + '' + _ph.s + '' + _ph.a, _ph.d, 'time="' + _ph.dt + '"'), weekday: tag('i', 'wday wd' + _ph.wd, _ph.wdn), week: tag('div', 'week w' + _ph.w + _ph.ws, '|', 'time="' + _ph.wt + '"'), month: tag('div', 'month m' + _ph.m, tag('h4', null, _ph.mnam + ' ' + _ph.y) + '|'), nav: tag('div', 'yclNav', tag('a', 'prev', tag('span', null, _ph.prev)) + tag('a', 'next', tag('span', null, _ph.next))), wrap: tag('div', 'wrap'), clearfix: tag('div', 'clearfix') }, // i18n options i18n: { weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], prev: 'prev', next: 'next' }
Change log:
v0.5.0 (2015-09-17)
- update
v0.3.2 (2015-07-30)
- Improves timestamp read (with +date).
This awesome jQuery plugin is developed by eduludi. For more Advanced Usages, please check the demo page or visit the official website.