Basic Lightweight jQuery Calendar Plugin Yacal - Download Basic Lightweight jQuery Calendar Plugin - Yacal

Download Basic Lightweight jQuery Calendar Plugin – Yacal

By Posted on

This time I will share jQuery Plugin and tutorial about Basic Lightweight jQuery Calendar Plugin – Yacal, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link rel="stylesheet" href="dist/jquery.yacal.css">
2   ...
3 <script src="jquery.min.js"></script>
4 <script src="dist/jquery.yacal.min.js"></script>

2. Create a container for the calendar and use data-attributes to config the options.

view source
1 <div class="yacal"
2      data-<a href="https://www.jqueryscript.net/time-clock/">date</a>="2015/06/15"
3      data-near-months="1"
4      data-min-date="2014/6/15"
5      data-max-date="2016/6/15">
6 </div>

3. You can also generate a calendar within a specified container using JavaScript.

view source
1 $('#container').yacal({
2   // options here
3 });

4. Full plugin options.

view source
01 // Sets the date
02 date: new Date(),
03  
04 // How many months will be displayed to each side
05 nearMonths: 0,
06  
07 // Toggles the week days ('Su','Mo','Tu',etc).
08 showWeekdays: true,
09  
10 // Sets the minimal date range.
11 minDate: null,
12  
13 // Sets the maximum date range
14 maxDate: null,
15  
16 // Sets the first day of the week.
17 // TODO
18 firstDay: false,
19  
20 // Page size
21 pageSize: 1,
22  
23 // Custom calendar template
24 tpl: {
25   day: tag('a', 'day d' + _ph.dw + '' + _ph.we + '' + _ph.t + '' + _ph.s + '' + _ph.a, _ph.d, 'time="' + _ph.dt + '"'),
26   weekday: tag('i', 'wday wd' + _ph.wd, _ph.wdn),
27   week: tag('div', 'week w' + _ph.w + _ph.ws, '|', 'time="' + _ph.wt + '"'),
28   month: tag('div', 'month m' + _ph.m, tag('h4', null, _ph.mnam + ' ' + _ph.y) + '|'),
29   nav: tag('div', 'yclNav', tag('a', 'prev', tag('span', null, _ph.prev)) + tag('a', 'next', tag('span', null, _ph.next))),
30   wrap: tag('div', 'wrap'),
31   clearfix: tag('div', 'clearfix')
32 },
33  
34 // i18n options
35 i18n: {
36   weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
37   months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
38   prev: 'prev',
39   next: 'next'
40 }

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.

source : jqueryscript.net

Related posts: