Calendar

A calendar component, based on jQuery. Demo

---

Depend

<link rel="stylesheet" href="calendar.css">
<script src="jquery.js"></script>
<script src="calendar.js"></script>

Use

<divid="ca"></div><script>$('#ca').calendar({// options});</script>

or

<inputtype="text" id="in"><divid="ca"></div><script>$('#ca').calendar({trigger: '#in'// options});</script>

Options

{// widthwidth: 280,// height, height: 280,// zIndexzIndex: 1,// set the trigger selectortrigger: null,// offset positionoffset: [0,1],// override classcustomClass: '',// set display view, optional date or monthview: 'date',// set current datedate: newDate(),// date formatformat: 'yyyy/mm/dd',// first day of the weekstartWeek: 0,// week formatweekArray: ['日','一','二','三','四','五','六'],// month formatmonthArray: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],// optional date range// value: `[ start date[, end date] ]`// Fixed date range: [new Date(2016, 0, 1), new Date(2016, 11, 31)] or ['2016/1/1', '2016/12/1']// Starting today: [new Date(), null] or [new Date()]selectedRang: null,// display data when mouse hover// value: `[{ date: String || Date, value: object }, ... ]`// example: [ { date: '2016/1/1', value: 'A new Year'} ] or [ { date: new Date(), value: 'What to do'} ]data: null,// data label format// No display is set to `false`label: '{d}\n{v}',// arrow charactersprev: '<',next: '>',// callback function when view changed// params: view, y, mviewChange: $.noop,// callback function when selectedonSelected: function(view,date,value){// body...},// callback function when mouseenteronMouseenter: $.noop,// callback function when closedonClose: $.noop}

Methods

$element.calendar(method,value)

• setDate：Setting selected date.
• setData：Setting hover data.