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
<div id="ca"></div> <script> $('#ca').calendar({ // options }); </script>or
<input type="text" id="in"> <div id="ca"></div> <script> $('#ca').calendar({ trigger: '#in' // options }); </script>Options
{ // width width: 280, // height, height: 280, // zIndex zIndex: 1, // set the trigger selector trigger: null, // offset position offset: [0, 1], // override class customClass: '', // set display view, optional date or month view: 'date', // set current date date: new Date(), // date format format: 'yyyy/mm/dd', // first day of the week startWeek: 0, // week format weekArray: ['æ—¥', '一', '二', '三', 'å››', '五', 'å…'], // month format monthArray: ['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 characters prev: '<', next: '>', // callback function when view changed // params: view, y, m viewChange: $.noop, // callback function when selected onSelected: function (view, date, value) { // body... }, // callback function when mouseenter onMouseenter: $.noop, // callback function when closed onClose: $.noop }Methods
$element.calendar(method, value)setDate：Setting selected date.setData：Setting hover data.
