jQuery Nao Calendar

Intro

Responsive calendar plugin for jQuery web applications.

This plugin has a few dependencies, so it is recommended to use if you are already using those dependencies in your project.

Examples are given below with code snippets.

Dependencies

• jQuery
• jQuery Pseudo Ripple (by me)
• Aicon icon set (by me)

Simple use

// HTML
<div class="calendar-1"></div>
// JS
$('.calendar-1').calendar()
			

Result

Styling with CSS

// HTML
<div class="calendar-2"></div>
// css
.calendar-2.nao-month td {
  padding: 20px;
}
.calendar-2 .month-head>div,
.calendar-2 .month-head>button {
  padding: 20px;
}
// JS
$('.calendar-2').calendar()
			

Result

API usage

// HTML
<div class="calendar-3"></div>
// css
.calendar-3.nao-month td {
  padding: 15px;
}
.calendar-3 .month-head>div,
.calendar-3 .month-head>button {
  padding: 15px;
}
// JS
$('.calendar-3').calendar({
  date: new Date(),
  autoSelect: true, // false by default
  select: function(date) {
    console.log('SELECT', date)
  },
  toggle: function(y, m) {
    console.log('TOGGLE', y, m)
  }
})
			

Result