Simple Animated jQuery Calendar Plugin with Bootstrap - SuperCal

File Size: 5.99 KB
Views Total: 14812
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="">

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

<script src=""></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 {
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.


6. All the available options.

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

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