Basic Lightweight jQuery Calendar Plugin - Yacal

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.