Skip to content
A calendar picker component, based on jQuery.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Add setDate method. #15 Apr 2, 2017
src Add setDate method. #15 Apr 2, 2017
.gitignore dynamic element support, add gulp build Nov 24, 2016
README.md Add setDate method. #15 Apr 2, 2017
gulpfile.js month format Jan 4, 2017
index.html Add setDate method. #15 Apr 2, 2017
package.json Add setDate method. #15 Apr 2, 2017

README.md

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: '&lt;',
    next: '&gt;',

    // 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.
You can’t perform that action at this time.