Simple Animated jQuery Calendar Plugin with Bootstrap - SuperCal
File Size: | 5.99 KB |
---|---|
Views Total: | 14755 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.