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

File Size: 17.8 KB
Views Total: 43492
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="calendar.js"></script>

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

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

// 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:


  • Added setDate method.


  • month format
  • fixed Month not updating


  • dynamic element support


  • fix prev & next data exception


  • fix resize & label


  • 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.