Simple Animated jQuery Calendar Plugin with Bootstrap - SuperCal

SuperCal is a jQuery and Boostrap based plugin for creating a calendar widget with transition effects when the month changed.

How to use it:

1. Include the Bootstrap's CSS in the head section of the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">

2. Include the jQuery library and jQuery SuperCal's javascript at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.supercal.js"></script> 

3. Create an empty container to place the calendar widget.

<div class="demo"></div>

4. The required CSS to style the calendar.

.supercal {
width: 300px;
}
.supercal .supercal-header {
display: block;
line-height: 30px;
margin-bottom: 20px;
text-align: center;
position: relative;
}
.supercal .supercal-header .prev-month {
float: left;
}
.supercal .supercal-header .next-month {
float: right;
}
.supercal-month {
position: relative;
z-index: 0;
overflow: hidden;
}
.supercal table {
width: 300px;
table-layout: fixed;
background: #fff;
}
.supercal td {
cursor: pointer;
}
.supercal td:hover {
background: #2f96b4 !important;
color: #fff;
}
.supercal td.month-prev, .supercal td.month-next {
background: #eee;
}
.supercal td.selected {
background: #0088cc;
color: #fff;
font-weight: normal;
}
.supercal td.today {
font-weight: bold;
}
/* Footer */
.supercal .supercal-footer {
width: 100%;
display: table;
}
.supercal .supercal-footer span.supercal-input {
display: table-cell;
width: 100%;
cursor: default;
}

5. Call the plugi with default options.

<script>
$('.demo').supercal();
</script>

6. All the available options.

<script>
$('.demo').supercal({
todayButton: true,// Show the button to reset to today's date?
showInput: true,// Show input
weekStart: 1,// Start day of the week. 0 is Sunday, 6 for Saturday, 1 for Monday (default)
widget: true,
cellRatio: 1,
format: 'd/m/y',
footer: true,
dayHeader: true,
mode: 'widget',// 'widget' (default), 'tiny', 'popup', 'page'
animDuration: 200,
transition: '',
tableClasses: 'table table-condensed',
hidden: true,
setOnMonthChange: true,
condensed: false
});
</script>

---

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