Pretty Responsive Calendar In jQuery - Nao Calendar

Nao Calendar is a jQuery plugin to render a fully responsive, pretty clean calendar widget (with support for date selection) on the webpage.

More features:

• Easy to implement.
• Month/year selection.
• Smooth scroll animations.
• Allows you to view the selected date & current month.
• Simple to customize via CSS.

How to use it:

1. Load the necessary Aicon icon set.

<link rel="stylesheet" href="aicon/style.css">

2. Load the Nao Calendar plugin's files in the HTML file.

<link rel="stylesheet" href="css/jquery-nao-calendar.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery-nao-calendar.js"></script>

3. Create a placeholder for the inline calendar.

<div class="myCalendar"></div>

4. Call the function on the containing element to generate a basic calendar.

$(function(){
  $('.myCalendar').calendar();
});

5. The example CSS to customize appearance of the calendar.

.myCalendar.nao-month td {
  padding: 15px;
}

.myCalendar .month-head>div,
.myCalendar .month-head>button {
  padding: 15px;
}

6. Set the pre-select date on init.

$('.myCalendar').calendar({
  date: new Date(),
  autoSelect: true
});

7. Get the selected date.

$('.myCalendar').calendar({
  select: function(date) {
    console.log('SELECT', date)
  }
});

8. Get the year/month you toggled.

$('.myCalendar').calendar({
  toggle: function(y, m) {
    console.log('TOGGLE', y, m)
  }
});

---

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