Pretty Event Calendar & Datepicker Plugin For jQuery - Calendar.js

Calendar.js is highly customizable jQuery plugin that helps you create inline event calendars and date pickers for your website or web application. 

How to use it:

1. Include the calendar.css stylesheet in the head section of your webpage that will provide the core styles for the calendar & date picker.

<link rel="stylesheet" href="calendar.css">

2. Include jQuery library and the calendar.js script at the bottom of the document so the pages load faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="calendar.js"></script>

3. Create an inline calendar with custom events on your webpage.

$('#container').calendar({
  data: [
    {
      date: '2015/12/24',
      value: 'Christmas Eve'
    },
    {
      date: '2015/12/25',
      value: 'Merry Christmas'
    },
    {
      date: '2016/01/01',
      value: 'Happy New Year'
    }
  ]
});

4. Create a calendar date picker attaching to your input field.

<input type="text" id="dt" placeholder="date picker">
<div id="dd"></div>

$('#dd').calendar({
  trigger: '#dt',
});

5. Override the default options as you like.

// width and height in pixels
width: 280,
height: 280,

// z-inde property
zIndex: 1,

// selector or element
trigger: null,

// offset
offset: [0, 1],

// custom CSS class
customClass: '',

// date or month
view: 'date',

// current date  
date: new Date(),

// date format
format: 'yyyy/mm/dd',

// start of week
startWeek: 0,

// day of the week
weekArray: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

// month
monthArray: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],

// date range
// [new Date(), null] or ['2015/11/23']
selectedRang: null,

// custom events
data: null,

// shows labels
// {m} view mode，{d}date，{v}value
// false = disable
label: '{d}\n{v}',

// next / prev signs
prev: '<',
next: '>',

// callbacks
viewChange: $.noop,
onSelected: function(view, date, value) {},
onMouseenter: $.noop,
onClose: $.noop

6. API methods.

// set date
$element.calendar(setDate, value)

// set data
$element.calendar(setData, value)

Change logs:

2017-04-03

• Added setDate method.

2017-01-05

• month format
• fixed Month not updating

2016-11-24

• dynamic element support

2016-11-02

• fix prev & next data exception

2016-08-29

• fix resize & label

2016-01-08

• Fixed: setData bug

---

This awesome jQuery plugin is developed by yscoder. For more Advanced Usages, please check the demo page or visit the official website.